jqGalScroll, faites défiler vos images avec jQuery
jqGalScroll est un plugin pour jQuery qui peut vous créer une mini galerie à partir d'une simple liste d'images.
Plutôt que de vous expliquez, allez voir directement la démo 
Sympa non ?
Installation de jqGalScroll
- On télécharge et on inclue la librairie jQuery entre les balises HTML
<head>et</head>:<script type="text/javascript" src="jquery-latest.pack.js"></script> - Ensuite on télécharge le plugin "Easing" et on inclue le fichier "jquery.easing.1.2.js" juste en dessous de jQuery :
<script type="text/javascript" src="jquery.easing.1.2.js"></script>
- Puis on télécharge le plugin et on inclue le fichier "jqGalScroll.js" juste en dessous du plugin "Easing" :
<script type="text/javascript" src="jqGalScroll.js"></script>
- On inclue ensuite le fichier "jqGalScroll.css" pour la mise en forme :
<style type="text/css" media="screen">
@import url(jqGalScroll.css);
</style>
Utilisation de jqGalScroll
Alors là rien de plus simple, vous mettez vos images dans une liste HTML:
<li><img src="common/img/baby-02.jpg" alt="Description de la photo 1" /></li>
<li><img src="common/img/baby-03.jpg" alt="Description de la photo 2" /></li>
<li><img src="common/img/baby-04.jpg" alt="..." /></li>
<li><img src="common/img/baby-05.jpg" alt="" /></li>
<li><img src="common/img/baby-06.jpg" alt="" /></li>
<li><img src="common/img/baby-07.jpg" alt="" /></li>
<li><img src="common/img/baby-08.jpg" alt="" /></li>
<li><img src="common/img/baby-12.jpg" alt="" /></li>
<li><img src="common/img/baby-14.jpg" alt="" /></li>
<li><img src="common/img/baby-29.jpg" alt="" /></li>
<li><img src="common/img/baby-39.jpg" alt="" /></li>
<li><img src="common/img/baby-47.jpg" alt="" /></li>
<li><img src="common/img/baby-48.jpg" alt="" /></li>
<li><img src="common/img/baby-56.jpg" alt="" /></li>
<li><img src="common/img/baby-58.jpg" alt="" /></li>
</ul>
Et pour finir appliquez le plugin sur cette liste ...
Les portions de code suivantes sont à ajouter soit entre des balises <script type="text/javascript"> //le code ici </script>, soit dans un fichier .js
Par contre il doit impérativement ce trouver après le plugin.
$("ul.galerie_bebe").jqGalScroll({height:268,width:400,ease:'easeInOutCubic',speed:1000});
});
Donc là on applique le plugin sur chaque liste ayant une classe "galerie_bebe", vous pouvez bien entendu modifier les dimensions (height:268,width:400) et la vitesse (speed:1000) !
Edit: fonction diaporama
A la demande de Sylvain, voici le code javascript à rajouter après le plugin pour obtenir un diaporama automatique. J'ai mis 3 secondes par défaut.
//Fonction Diapo
//==============
function gogogogo(param){
var href = param;
$(".jqGalScroll").stop().animate({top:-($(".jqGalScroll").children().height()*href)},1000, "linear");
}
var incre = 0;
var max = $("div.jqGSImgContainer li").length;
function check(){
incre++;
if (incre >= max){
incre = 1;
}
gogogogo(incre);
}
//3000 = 3 secondes d'interval
var boucle = window.setInterval(check, 3000);
C'est pas parfait mais ça dépanne
Conclusions
L'effet final est relativement simple, mais c'est aussi une qualité. On n'a pas toujours envie de s'encombrer d'un système complexe pour juste afficher 2-3 photos
-----
Guide pour mieux gérer vos emails via gmail (multicompte, redirection, ...)
Comment réussir vos concours sur vos blogs ?
Brève Wordpress: 40 liens, thèmes, plugins et astuces en tout genre !
Ajouter un lien pour envoyer la page par e-mail
Vraiment gentil tutoriel sur la façon d’utiliser mon plugin, j’ai vraiment apprécier. J’ai posté un lien vers votre site dans mon message pour les personnes qui parlent français.
Nice travail.
Note: Je translate.google.com utilisé pour convertir l’anglais vers le français
Merci pour le backlink Benjamin !
Tres sympa cette gallerie.
Bonjour,
Peut on faire que le diaporama defile de manière automatique, tout en gardant l’option du choix des photos avec les boutons ?
@Sylvain
Bon j’ai essayé de bidouillez une solution, ce n’est pas vraiment parfait mais je pense que ça devrait convenir
J’ai rajouté l’astuce en fin de billet.
Merci !
Quelle rapidité !
La variable max n’est pas initialisée
Parfois, comme ça, on découvre des perles de blogs, alors direct dans mon Netvibes le tiens
!
Merci Vincent
Bonjour,
Peut on faire défiler de manière horizontale ?
Merci d’avance
Bonjour lesclar,
Désolé mais ce plugin ne le permet pas. Par contre je viens de sortir mon 1er plugin qui permet le défilement horizontal (et diagonal).
C’est par ici: http://www.webinventif.fr/wslide-plugin/
j’ai suivi ton conseil, je viens d’aller voir ton plugin.
Super
C’est exactement ce qu’il me faut
Merci de faire partager ton boulot
Salut,
et en plus enfin un slide qui fonctionne pour les visiteurs qui ont IE
Merci pour la découverte
Bonjour,
j’utilise se plugin, mais j’ai besoin de le faire sur des .class pour pouvoir l’afficher plusieurs fois, mais sa ne fonctionne pas.
code que je voudrai utiliser :
$(document).ready(function(){
select($sql);
$result = $connection->selectTableau($sql);
$total = count($result);
for ($i=1; $i
/*======================= Album photo ======================*/
$(« ul.album »).wslide(
{
width: 110,
height: 110,
horiz: true
});
});
j’ai changé l’id en classe
$(« ul.album »).wslide(
Comment je puis faire pour afficher plusieurs class ?
Merci d’avance.
Bonjour,
Merci beaucoup pour ce tutorial.
J’ai un soucis avec le diaporama : il ne se lance pas (tout le reste si).
J’ai essayé plein de combinaisons et d’endroits possibles, je n’ai pas d’erreur javascript mais il ne se passe rien…
Super tutoriel.
C’est vraiment bien.
La démo peut-être trouvée à l’adresse suivante :
http://benjaminsterling.com/jquery-jqgalscroll-photo-gallery/
Laurent