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

Redirection avec compte à rebours en JqueryRedirection avec compte à…
Dans ce tuto jQuery en vidéo nous verrons comment mettre en…

Créer un accordéon horizontal pour vos derniers articlesCréer un accordéon horizontal…
Dans ce tuto Jquery, en vidéo, nous allons voir ensemble comment…

Créer un Sticky menu qui reste visible à tout instantCré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 pour dévoiler un contenuAnimer la hauteur d'un élément…
Dans ce tuto jQuery en vidéo, nous allons voir comment animer…

Créer un site web avec un slider d'images en full pageCréer un site web avec un…
Dans ce tuto jQuery / CSS3, nous allons ensemble, pas à pas,…

Créer un slider et l'intégrer à votre blog WordpressCré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 simplementCréer une lightbox simplement…
Dans ce tuto Jquery en vidéo, nous verrons comment créer une…

Créer un scroll horizontal animé pour votre site webCré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 :

Partagez cet extrait

Lien vers cet extrait : Embed code :

spykrew07 , formateur certifié

Salut à tous ! Je m'apelle Adrien j’ai 29 ans et je suis Webdesigner spécialiste WordPress depuis 7 ans. Ancien élève de l'ESMA à Montpellier, j’ai travaillé en agence de communication pendant 4 ans et depuis 3 ans je me suis lancé en freelance. Formateur certifié sur tuto.com, je partage mes connaissances et mes découvertes dans différents domaines : web design, logo, html, wordpress, php, css jquery ... Ma devise : Webdesign is not a job, it’s a passion !

Toutes les formations de Spykrew07


Témoignage des clients de spykrew07

Un super pro dans le domaine du web et une grande connaissance de WordPress. Un grand merci.

Très belle vidéo, et la voix donne envie d'écouter, ce n'est pas le cas avec d'autres personnes ... Merci de m'avoir aidé :)

Je trouve que Spykrew07 est un très bon formateur !

Très bon formateur !!!

tutos clair et précis!

Lire les autres témoignages

 

D'autres tuto de spykrew07

Créer une typo déstructurée avec des impacts de ballesCré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 webApprenez 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 WordpressInstallation & 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 pageCré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…

voir tous les tuto de spykrew07

Notes attribuées par les utilisateurs (9 votes)

Note moyenne des utilisateurs  

Votez pour ce tuto


 

Les avis / Questions des utilisateurs (30)

par spykrew07
(auteur de ce tuto - 07 octobre 2013)

" @EPILATION Je suis désolé mais je vous renvoi vers d'autres formations pour apprendre le HTML/CSS car créer un lien c'est la base et je ne peux pas dans chacun de mes tutos revenir sur tout ça. "

par EPILATION
(a acheté ce tuto - 06 octobre 2013)

" Bonjour,

Comment faire pour rejouter un lien vers une autre page web html, à partir du lien en savoir plus de la petite fenêtre.

Cordialement "

par spykrew07
(auteur de ce tuto - 02 octobre 2013)

" @EPILATION Tu peux m'envoyer ton code sur contact[at]adriengazaix.fr pour que je vérifie mais normalement sur IE tout fonctionne. "

par spykrew07
(auteur de ce tuto - 02 octobre 2013)

" @EPILATION Si c'est le code qu'il y a dans les sources du tuto ça m'étonne qu'il y est un problème. Sur quel navigateur est-tu ? Sur Chrome & IE cela marche parfaitement. "

par gb4752a voté :
(a acheté ce tuto - 10 janvier 2013)

" Très pédagogique, bourré d'astuces (pour un débutant) - Super Tuto "

par spykrew07
(auteur de ce tuto - 16 août 2012)

" @samellite Toute la partie PHP de ce tuto était pour aller plus vite et ne pas rentrer toutes les images en html à la main. Dans le cas d'un vrai site, tu reproduis en html chaque div, et tu pourras les modifier un à un. Ou alors il te faut aller chercher des données dans une BDD ou utiliser WordPress par exemple si tu veux entrer les infos via une admin.
"

par samellitea voté :
(a acheté ce tuto - 14 août 2012)

" Encore une fois, très enrichissante et agréable à suivre cette formation !
Mais j'ai quelques soucis que je n'arrive pas à régler, vu que je débute et que j'ai encore beaucoup à apprendre.
- en agrandissant une image, le numéro (5of40) est partout sur toutes les images. Comment modifier cette pagination, si j'ai 50 ou 60 images par exemple, et aussi pour que le numéro s'adapte à l'image (4 of 60) ou 7 of 60), etc ...
- comment faire en sorte de ne prévoir que 8 images par page, si dans mon cas j'en ai plusieurs et que je veux que chaque groupe de 8 image ne s'affiche que sur une page.
- quand je clique sur agrandir, j'ai l’image "big" noire qui s'affiche au lieu de l’image agrandie.
-comment personnaliser le contenu texte de chaque image.

Merci d'avance pour votre réponse qui me serait certainement d'une grande aide, c'est vraiment Urgent ! "

par bass33
(a acheté ce tuto - 26 juillet 2012)

" C'est vrai que cela a bien l'air pratique ^^

Sinon dsl mais j'ai encore une question, quand je suis sur la 1ere image et que je fais next cela ne va pas charger la 2e img. Où faut-il intervenir ? "

par spykrew07
(auteur de ce tuto - 26 juillet 2012)

" @bass33 Non je ne m'en sers pas pour des projets client c'est juste pour les tutos ça fait gagner du temps sur la création des styles ;) "

par bass33
(a acheté ce tuto - 26 juillet 2012)

" Problème de lightbox résolu ;)

Sinon le bootstrap tu t'en sert a chaque réalisation web ?
Perso je ne connaissais pas du tout, quel est son intérêt ?
"

par bass33
(a acheté ce tuto - 26 juillet 2012)

" Bonjour spykrew07,

J'ai un soucis avec la lightbox, l'img big ne ce charge pas, le loading tourne en boucle :/
Tu n'aurais pas une solution ?

Sinon merci pour ce tuto ;) "

par 89854243a voté :
(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! "

par andether15
(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 "

par EricMangeat
(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 "

par spykrew07
(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 !! "

par EricMangeat
(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. "

par spykrew07
(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 ;) "

par tricepad
(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
"

par twelveflowersa voté :
(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 "

par dede18a voté :
(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. "

par tailivana voté :
(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é "

par spykrew07
(auteur de ce tuto - 31 janvier 2012)

" @lottaviani Merci ;) "

par lottaviania voté :
(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+. "

par spykrew07
(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&lt;?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 ! "

par lottaviania voté :
(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&lt;?php echo $i;?&lt;.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+ "

par lottaviania voté :
(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&quot;#lightbox-image-details-currentNumber'&quot; de la lightbox le nombre exact d'images qui figurent dans le portfolio. Affiche toujours &quot;image 4 of 40&quot;.
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é)
"

par spykrew07
(auteur de ce tuto - 30 janvier 2012)

" @agorat Super alors :D Merci pour ton vote !! "

par agorata voté :
(a acheté ce tuto - 30 janvier 2012)

" très bien, ça va mettre utile "

par spykrew07
(auteur de ce tuto - 29 janvier 2012)

" @alou38 Merci !! Content qu'il t'es plu ;) "

par alou38a voté :
(a acheté ce tuto - 29 janvier 2012)

" Trop cool :-) "

 

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é 247 fois et a reçu une note moyenne de 5/5.

Ce tuto a été publié le 26 janvier 2012 par spykrew07, formateur certifié par Tuto.com, ayant reçu une note moyenne de 4,8/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.

N'hésitez pas à nous contacter si vous avez la moindre question !