08/04

2010

Créer une galerie pour votre portfolio grâce à jQuery

thumb

Voici un petit tutoriel enfin plutôt une compilation de différentes ressources jQuery qui va vous permettre de mettre en place un slider qui contiendra différentes vignettes animées qui laisseront apparaitre les informations que vous souhaiterez, y compris un bouton pour pouvoir afficher une image en grand, visible grâce à une lightbox.
Bien entendu tout est possible via les css, cette présentation n'est qu'un exemple.


Pour ce tutoriel vous aurez besoin de 3 choses:

Et puis aussi un éditeur de texte, perso je vous conseil quand même Notepad++

Dans l'archive que je vous propose en téléchargement il y a tout ce dont vous avez besoin il vous suffit donc de copier les différents dossiers / fichiers / images de la même façon que sur l'exemple mais faites bien attention aux urls qui appellent vos fichiers.

Démonstration Download

Voici pour les explications:

Le slider

Nous allons commencer par mettre en place le slider.

Pour cela ouvrez votre fichier index ou header (selon votre cas) et dans la balise head nous allons appeler les fichiers néccessaire au bon fonctionnement et copiez aussi le dossier images_slider à la racine de votre site.

la bibliothèque jQuery

  1. <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script>

les fichiers css et javascript

  1. <!--slideshow-->
  2. <link href="./slideshow.css" rel="stylesheet" type="text/css" />
  3. <script type="text/javascript" src="./js/slideshow.js"></script>

Et voilà vous avez les fichiers nécessaire pour afficher le slider.

Maintenant ouvrez le fichier ou vous voulez placer votre slider, et copier ceci

  1. <!-- Slideshow HTML -->
  2.   <div id="slideshow">
  3.     <div id="slidesContainer"> 
  4. <div class="slide">
  5.         <h2>Titre</h2>
  6.         <p>Le texte que vous voulez afficher</p>
  7.     <div class="boxgrid_link">
  8.     <a rel="clearbox[ gallery=photos,,slideshowtime=10 ]" href="./galerie/leaf.jpg" title="charger l'image">visualiser</a>
  9.     </div><!--/boxgrid_link-->
  10. </div><!--/slide-->
  11.                
  12.     </div><!--/slidescontainer-->
  13.   </div><!--/slideshow-->
  14. <!-- Slideshow HTML -->

L'attribut rel va servir dans l'appel de la lightbox et ce qui se trouve entre les crochets sera pour créer le diaporama mais on verra ça plus tard.

Là vous avez une miniature pour en ajouter il suffit de copier la div="slide" et tout ce qui est dedans et de coller en dessous ou au dessus de celle présente.

  1. <div class="slide">
  2.         <h2>Titre</h2>
  3.         <p>Le texte que vous voulez afficher</p>
  4.     <div class="boxgrid_link">
  5.     <a rel="clearbox[ gallery=webdesign,,slideshowtime=10 ]" href="./galerie/leaf.jpg" title="charger l'image">visualiser</a>
  6.     </div><!--/boxgrid_link-->
  7. </div><!--/slide-->

Maintenant on va passer au css pour donner forme à tout ça.
Créer une nouvelle feuille css et enregistré la à la racine de votre site en la nommant slideshow.css et collé ça dedans.

  1. #slideshow {
  2.         margin: 10px auto 0 auto;
  3.         width: 767px;
  4.         height: 365px;
  5.         background: transparent;
  6.         position: relative;
  7.         }
  8. #slideshow #slidesContainer {
  9.   margin: 0 auto;
  10.   padding: 0;
  11.   width: 687px;
  12.   height: 365px;
  13.   overflow: auto;
  14.   position: relative;
  15.         }
  16. #slideshow #slidesContainer .slide {
  17.   margin: 0 auto;
  18.   padding: 0;
  19.   width: 667px;
  20.   height: 365px;
  21.         }
  22. .slide img {
  23.         float: right;
  24.         margin: 0;
  25.         border: none;
  26.         }
  27. .slide p {
  28.         line-height: 1.5em;
  29.         margin: 0;
  30.         }
  31. .slide a {
  32.         color: #000;
  33.         font-weight: bold;
  34.         text-decoration: none;
  35.         padding: 0 0 2px 0;
  36.         border-bottom: 1px dotted #181818;
  37.         }
  38. .control {
  39.        display: block;
  40.        width: 39px;
  41.        height: 270px;
  42.        text-indent: -9999px;
  43.        position: absolute;
  44.        cursor: pointer;
  45.         }
  46. #navDiapo{
  47.         display: block;
  48.         width: 15px;
  49.         height: 16px;
  50.         position: absolute;
  51.         right: 25px;
  52.         bottom: 10px;
  53.         cursor: pointer;
  54.         }
  55. #leftControl {
  56.   top: 0;
  57.   left: 0;
  58.   background: transparent url(images_slideshow/control_left.png) no-repeat 0 0;
  59.         }
  60. #rightControl {
  61.   top: 0;
  62.   right: 0;
  63.   background: transparent url(images_slideshow/control_right.png) no-repeat 0 0;
  64.         }

Et voilà votre Slider est fait !!

Toute la documentation et les options disponible ici

Animation sur image

Maintenant on va donner un petit effet sympa à vos miniatures qui permettra de dévoiler les divers informations.
Dans votre fichier index on va appeler (toujours dans la balise head) le fichier boxgrid.css (on va voir ça juste en dessous) et mettre le javascript nécessaire au bon fonctionnement.

  1. <!--sliding boxes-->
  2. <link rel="stylesheet" type="text/css" href="./boxgrid.css" />
  3. <script type="text/javascript">
  4.                         $(document).ready(function(){
  5.                                 //To switch directions up/down and left/right just place a "-" in front of the top/left attribute
  6.                                 //Horizontal Sliding
  7.                                 $('.boxgrid.slideright').hover(function(){
  8.                                         $(".cover", this).stop().animate({left:'180px'},{queue:false,duration:300});
  9.                                 }, function() {
  10.                                         $(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300});
  11.                                 });
  12.                         });
  13. </script>

Et pour le css il vous suffit de coller ça dans une nouvelle feuille nommée boxgrid.css et enregistrée la à la racine de votre site.

  1. .boxgrid{
  2.         width: 180px;
  3.         height: 90px;
  4.         font-family: Verdana, sans-serif;       
  5.         margin: 4px 22px;
  6.         float:left;
  7.         background: #f3f3f3;
  8.         border: solid 1px #aaa;
  9.         overflow: hidden;
  10.         position: relative;
  11.         }
  12. .boxgrid h3 {
  13.         font-size: 12px;
  14.         font-weight: bold;
  15.         padding: 2px 2px 0 2px;
  16.         }
  17. .boxgrid  img{
  18.         position: absolute;
  19.         top: 0;
  20.         left: 0;
  21.         border: 0;
  22.         }
  23. .boxgrid p{
  24.         font-size: 10px;
  25.         padding: 2px 2px 0 2px;
  26.         margin: 0 0 2px 0;
  27.         color:#404040;
  28.         }
  29. .boxgrid_link {
  30.         margin: 0 5px 0 0;
  31.         }
  32. .boxgrid a {
  33.         width: 15px;
  34.         height: 13px;
  35.         display: block;
  36.         text-indent: -9999px;
  37.         text-decoration: none;
  38.         float: right;
  39.         background: transparent url("images_slider/preview.png") no-repeat top;
  40.         }
Toute la documentation et les options disponible ici

Et voilà l'animation est bonne !!

L'affichage de vos images via clearbox3

Cela va vous permettre d'afficher votre image en grand et en plus en toute beauté !! Dans cette galerie on va opter pour un diaporama histoire d'avoir une navigation plus sympa.
Clearbox3 est pour moi la meilleur des lightbox (que je connaisse) pleins d'options sont disponible et très pratique, vous verrez !!

Copiez le dossier clearbox ainsi que le fichier clearbox.js dans votre dossier js.

Dans votre fichier index et entre la balise head

  1. <!--clearbox-->
  2. <script src="./js/clearbox.js" type="text/javascript"></script>
  3. <script src="./js/clearbox.js?config=myconfig" type="text/javascript"></script>

Pour en revenir à la fonction diaporama, en fait il suffit donc de rajouter l'attribut

  1. rel=""

Puis clearbox

  1. rel="clearbox"

Définir un nom pour la galerie ce qui aura pour effet d'afficher toutes les images comportant ce nom de galerie

  1. rel="clearbox[ gallery=photos ]"

Et maintenant le timing du diaporama, soit 10 secondes

  1. rel="clearbox[ gallery=photos,,slideshowtime=10 ]"

Et voilà pour l'affichage de vos images.

Toute la documentation et les options disponible ici

Bon bah c'est fini !!

Démonstration Download

J'espère que tout est assez clair si toutefois vous avez des soucis n'hésitez pas à le signaler dans les commentaires ;)

Ce billet est rangé dans: Tutoriels , Webdesign , jQuery

Sur le même sujet

Un billet au hasard

Application Android: WebSharing

Voiçi une petite application que j’ai découvert ce matin et qui est tout simplement INDISPENSABLE!! Avec WebSharing vous allez pouvoir transférer via le wifi des fichiers de votre ordinateur vers votre mobile Android, et vis et versa, et le tout par le navigateur web de votre pc, simple non??

Liens
Version gratuite: WebSharing Free

Liens
Version payante (2.99$): WebSharing

Infos
Testé [...]

Lire...
« Le graffiti s’invite chez vous
BlizAar, une explosion de couleurs à vos pieds »

Les commentaires et trackbacks du billet...

  1. gravatar
    vieaero

    Très bon site que je découvre là, merci à toi de partager ce tuto, le rendu à l’air sympa. ;)
    Bonne continuation !

    Posté le 4 mai 2010 à 10:01.
  2. gravatar
    Parier Sport

    Je découvre ce blog et merci pour ce tuto, il va m’etre très utile pour mon blog.

    Posté le 26 juin 2010 à 10:29.
  3. gravatar
    spiruline

    Je cherchais justement un tuto pour faire ça, nickel merci ;) +1 bookmark :)

    Posté le 7 juillet 2010 à 20:31.

Laissez votre commentaire

Markup Controls Mettre en Gras Mettre en Italique Mettre un Code Blockquote Abbr Ajouter un lien    Emoticons clein d oeil Content Lol Cool Love Timide Tire la langue Good Bisou Heuuu... Oops Triste Pleure Neutre Beurk Truc de fou Troublé Fou Mouai... Angel