Dans ce tuto jQuery en vidéo, nous allons voir comment créer une bulle d'info enrichie qui apparaitra au survol de votre souris sur un élément de votre site ou portfolio.
Nous verrons dans ce tuto jQuery :
- Créer la structure HTML de la liste des images
- Créer une div qui accueillera les informations (titre, description, icônes...)
- Styliser cette boîte pour qu'elle passe par-dessus l'image
- Styliser le contenu textuel
- Télécharger une nouvelle police et l'ajouter dans notre CSS
- Positionner des éléments en absolu
- Utiliser les backgrounds pour afficher les icônes
- Changer un curseur
- Ajouter un script javascript pour créer une infobulle
- Styliser cette infobulle dans le CSS
- Ajouter une flèche à celle-ci grâce à une nouvelle pseudo-classe CSS3
- Créer un script js pour faire apparaître notre boîte de contenu au passage de la souris sur l'image
- Utiliser une fonction de jquery pour dupliquer l'image survolée à coté de notre paragraphe
- Ajouter une boucle en PHP pour afficher les 40 images
- Modifier le CSS pour qu'elles s'affichent côte à côte sans espace blanc autour des images
- Ajouter et modifier un script de lightbox pour l'adapter au site
- Rendre les catégories aléatoires sur les 40 images à l'aide d'une fonction random de PHP
Vous trouverez dans les sources tous les fichiers créés pour ce tutoriel. Bon tuto !!
Jetez un oeil à ces autres tuto jQuery 1.7, CSS 3
Créer un Sticky menu qui…
Dans ce tuto vidéo CSS3 et Jquery, en vidéo, nous allons voir…
Animer la hauteur d'un élément…
Dans ce tuto jQuery en vidéo, nous allons voir comment animer…
Mettre en place un panneau…
Dans ce tuto Jquery gratuit en vidéo, nous allons voir ensemble…
Mettre un background vidéo…
Dans ce tuto Jquery en vidéo, nous allons voir comment ajouter…
Créer un site web avec un…
Dans ce tuto jQuery / CSS3, nous allons ensemble, pas à pas,…
Créer un slider et l'intégrer…
A l'aide d'un plugin jQuery, nous allons créer un slider pour…
Créer une lightbox simplement…
Dans ce tuto Jquery en vidéo, nous verrons comment créer une…
Créer un scroll horizontal…
Dans ce tuto Jquery, en vidéo, nous allons voir ensemble comment…
Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto jQuery 1.7, CSS 3 de 1 heure 23 minutes est proposée dans une résolution plus grande que l’extrait suivant :
spykrew07
, Formateur
Salut, moi c’est Adrien, j’ai 27 ans et je suis Graphiste / Webdesigner depuis 5 ans maintenant. Ancien élève de l'ESMA à Montpellier, j’ai travaillé en agence de communication pendant 3 ans et depuis peu je me suis lancé en freelance. Je souhaite partager mes connaissances avec vous membres de tuto.com et j’essaierai d’être le plus didactique possible dans mes tutoriaux. Ma devise : Webdesign is not a job, it’s a passion !
En savoir plus sur spykrew07
Témoignage des clients de spykrew07
![]()
Je viens d'acheter plusieurs de ses tutos et je trouve que Spykrew07 est un excellent formateur. je recommande ses formations!
![]()
Des tuto sympa mais parfois un peu chers.
![]()
Très bon formateur, j'ai acheté beaucoup de ses tuto, le timbre de voix passe bien en continu, et bon ritme d'apprentissage. Je recommande.
![]()
Les tutos wordpress de ce formateur sont tout simplement INDISPENSABLES
![]()
je n'ai pas encore terminé les tutos, mais pour une bille comme moi, je comprends tout. Un grand merci
Lire les autres témoignages
D'autres tuto de spykrew07
Créer une typo déstructurée avec des impacts de balles
Dans ce petit tuto vidéo Photoshop, nous allons créer un effet de typo déstructurée…
Apprenez les bases du CSS pour intégrer votre site web
Dans ce tuto vidéo sur les bases du CSS, nous verrons ensemble les propriétés essentielles…
Installation & Tour d'horizon de l'admin de Wordpress
Dans cette 1ère partie consacré à la création d'un thème WordPress complet pour…
Créer un site web avec un slider d'images en full page
Dans ce tuto jQuery / CSS3, nous allons ensemble, pas à pas, créer un gabarit de site…
Notes attribuées par les utilisateurs (7 votes)
Les avis / Questions des utilisateurs (19)
Donnez votre avis ou posez une question au formateur.
Vous souhaitez commenter ce tuto vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous
Ce tuto en résumé ...
Ce tuto jQuery 1.7, CSS 3 d’une durée de 1 heure 23 minutes a été acheté 99 fois et a reçu une note moyenne de 5/5.
Ce tuto a été publié le 26 janvier 2012 par spykrew07, contributeur, ayant reçu une note moyenne de 4,7/5 pour l’ensemble de ses vidéos, dans la catégorie Tuto jQuery Animation.
Tous les fichiers sources sont fournis avec cette formation. Ces derniers vous permettront de reproduire les manipulations expliquées dans cette formation.
Ce tuto video vous expliquera étape par étape, toutes les manipulations présentées par le formateur.
Toutes nos vidéos sont visionnées par notre équipe, avant d’être mises en ligne, garantissant ainsi la qualité des produits téléchargés.
















(a acheté ce tuto - 08 mai 2012)
" très bon tuto! dommage qu'il ne soit pas "parfait". il l'est presque! j'ai appris plein de choses! mais il y a quelques parties à retravailler un peu en php... pour que le texte dans détails soit unique à chaque image, pour que l'image "big" se change automatiquement ( j'ai vu que ça a été répondu dans les commentaires par le créateur du tuto, je lui en remercie, on voit qu'il s'investit beaucoup dans son travail, c'est vraiment bien!)
bref je le conseille quand même vivement ce tuto, car l'auteur explique vraiment bien! "
(a acheté ce tuto - 28 avril 2012)
" salut ! je penses que tu as oublié le plus important ! peux tu m'expliquer comment faire tourner mes images correctement ? parce que elles ne tournent pas ! elles ne corresponds pas du tout aux images lors du clique. j'ai bien suivi tes instructions dans le com. plus haut mais ca ne fonctionne pas merci pour l'aide ! une petite video serait la bienvenue :)
bonne soirée "
(a acheté ce tuto - 07 avril 2012)
" Ca marche!
En revanche, comment dimensionner la taille du lecteur vidéo au format de ma maquette soit 940 px sur 600px en restant sur la même page ?
Encore merci "
(auteur de ce tuto - 02 avril 2012)
" @EricMangeat Il suffit de modifier l'attribut "href" du lien et mettre le lien vers vimeo (http://www.vimeo.com) et rajouter un target="_blank" pour ouvrir le lien dans un nouvel onglet !
Bon courage, bye !! "
(a acheté ce tuto - 02 avril 2012)
" Bonjour,
Comment faîtes vous un lien vers un site web externe comme Viméo en utilisant le bouton en savoir plus.
Cordialement. "
(auteur de ce tuto - 21 février 2012)
" @tricepad Oui tout a fait, c'est juste du HTML et du CSS donc il faut juste aller chercher des infos dynamiques et les afficher. C'est un peu ce que je fais dans la partie développement d'un thème WordPress pour le portfolio, j'aurai pu faire le "hover" de ce tuto. Bye et merci de me suivre ;) "
(a acheté ce tuto - 20 février 2012)
" Merci pour ce tuto et tous les autres !!!!
Je suis juste au début de celui-ci et je me demandais
si il était possible d'intégrer cette info bulle dans une page wordpress d'un thème existant comme twenty ten ?
Merci @ +
Tricepad
"
(a acheté ce tuto - 17 février 2012)
" Très bon tuto, tri bien expliquer.
j'ai un petit souci je me demandais si à la place d'avoir un trie aléatoire avec mt_rand je pouvais utiliser une autre fonction de trie pour avoir les noms apparaitre à la suite.
j'ai vu que sort() trie en ordre croissant mais je ne sais pas comment l'utiser si vous avez une idée?
merci "
(a acheté ce tuto - 17 février 2012)
" Super tuto trés clairement expliqué. Il ne reste plus qu'à changer le texte dans chaque fenêtre. "
(a acheté ce tuto - 09 février 2012)
" Tuto très sympa, clair et net avec plein de petites astuces bienintéressantes...
Une fois de plus un grand Merci!
José "
(auteur de ce tuto - 31 janvier 2012)
" @lottaviani Merci ;) "
(a acheté ce tuto - 31 janvier 2012)
" Oups autant pour moi, tout à l'air de fonctionner à merveille!!!
Super réactif, un SAV impec et des tutos du tonnerre, continue comme ça!
A+. "
(auteur de ce tuto - 31 janvier 2012)
" @lottaviani En effet, je suis pas allé plus loin avec la lightbox pour ce tuto mais je comprend ton problème.
Alors, tu recherches ton lien dans index.php :
<a title="Zoomer" class="icone bulle" id="zoom" href="img/big.jpg">Zoom</a>
Et tu remplaces par :
<a title="Zoomer" class="icone bulle lightbox" id="zoom" href="img/big<?php echo $i; ?<.jpg">Zoom</a>
J'ai juste ajouté une classe lightbox au lien pour le cibler en jquery, ainsi que la valeur de $i a coté de "big" pour créer plusieurs grandes images. Tu peux donc créer big1.jpg, big2.jpg ...
Tu vas maintenant dans ton site.js et tu modifies $("#portfolio li a").lightBox(); en $(".lightbox").lightBox();
Comme ça le plugin n'a plus de mal à compter le nombre d'éléments et normalement ta pagination dans la lightbox marche impecable !
Si tu as encore un soucis, tu me donnes ton email et jt'envoi ça. Bye ! "
(a acheté ce tuto - 31 janvier 2012)
" Je ne sais pas si tu as reçu mes questions concernant la lightbox , mais concernant l'affichage de mes "bigImages" j'ai finalement réussi à les chargé en ajoutant le php dans le "href" comme ceci: href="img/bigImage<?php echo $i;?<.jpg" et ça fonctionne. Par contre toujours problème avec les btn prev et next.... Ainsi qu'avec la "span" #lightbox-images-details-currentNumber" qui n'affiche pas les bonnes reférences. Là je sèche...
A+ "
(a acheté ce tuto - 31 janvier 2012)
" Tuto parfait. Toujours aussi enrichissant et agréable à suivre.
Problème avec lightbox: je n'arrive pas à incrémenter dans"#lightbox-image-details-currentNumber'" de la lightbox le nombre exact d'images qui figurent dans le portfolio. Affiche toujours "image 4 of 40".
Et je ne vois pas comment faire fonctionner les btn prev et next si dans index.php le href renvoie toujours à la même image...(img/big.jpg).
A et encore merci pour ce super tuto...
(Je vais refaire un tour sur ton tuto précédent sur la lightbox afin de voir si quelque chose ne m'a pas échappé)
"
(auteur de ce tuto - 30 janvier 2012)
" @agorat Super alors :D Merci pour ton vote !! "
(a acheté ce tuto - 30 janvier 2012)
" très bien, ça va mettre utile "
(auteur de ce tuto - 29 janvier 2012)
" @alou38 Merci !! Content qu'il t'es plu ;) "
(a acheté ce tuto - 29 janvier 2012)
" Trop cool :-) "