carrousel d'images avec vignettes qui défilent

carrousel d'images avec vignettes qui défilent - HTML/CSS - Programmation

Marsh Posté le 09-01-2012 à 01:04:13    

Bonjour,  
 
Je m'incruste dans la section rapidement, car j'ai une petite question,
Je fais des sites internet en html/php à titre privé, je maitrise donc à peu près ces langages,  
 
par contre là j'ai besoin d'un carrousel d'images, ce qui est plutot du ressort de javascript, que je ne connais absolument pas (et que j'utiliserai surement pas assez pour y passer un temps fou à l'apprendre)
 
J'ai donc trouvé mon bonheur dans le jquery : caroufredsel (http://caroufredsel.frebsite.nl/)
ça semble super facile à installer, à configurer, et à bidouiller.
 
Par contre mon probleme est :  
 
J'aurais une seule grande image qui défilera (premier carousel)
en dessous, j'aurais les vignettes de toutes les images qui peuvent s'afficher (pagination du 1er caroussel)  
 
par contre, je voudrais que je puisse naviguer dans ces vignettes (si il y en a 5 d'affichées, je voudrais aller voir les 5 suivantes; pour afficher en grand la 10eme par exemple)
 
Je sais pas si je m'explique bien, mais en gros, je voudrais 2 carrousels  réunis  l'un dans l'autre...
et je ne vois pas comment cela peut être possible avec caroufredsel et/ou Jquery ...je ne connais pas assez ces mondes...
 
Si vous avez des idées ? merci


---------------
VENTES TouchPad
Reply

Marsh Posté le 09-01-2012 à 01:04:13   

Reply

Marsh Posté le 11-01-2012 à 14:55:02    

Bon c'est pas super propre mais c'est à peut près ce que tu recherche je pense.  
 
HTML

Code :
  1. <div id="cfs-carrousel">
  2.  <div id="wrapper">
  3.   <div id="carrousel">
  4.    <img src="http://lorempixel.com/600/400/fashion/1" alt="c1" width="600" height="400">
  5.    <img src="http://lorempixel.com/600/400/fashion/2" alt="c2" width="600" height="400">
  6.    <img src="http://lorempixel.com/600/400/fashion/3" alt="c3" width="600" height="400">
  7.    <img src="http://lorempixel.com/600/400/fashion/4" alt="c4" width="600" height="400">
  8.    <img src="http://lorempixel.com/600/400/fashion/5" alt="c5" width="600" height="400">
  9.    <img src="http://lorempixel.com/600/400/fashion/6" alt="c6" width="600" height="400">
  10.    <img src="http://lorempixel.com/600/400/fashion/7" alt="c7" width="600" height="400">
  11.    <img src="http://lorempixel.com/600/400/fashion/8" alt="c8" width="600" height="400">
  12.    <img src="http://lorempixel.com/600/400/fashion/9" alt="c9" width="600" height="400">
  13.    <img src="http://lorempixel.com/600/400/fashion/10" alt="c10" width="600" height="400">
  14.   </div>
  16.  </div>
  17.  <div id="pagination">
  18.   <div id="thumbnails">
  19.    <img src="http://lorempixel.com/100/100/fashion/1" alt="c1" width="100" height="100">
  20.    <img src="http://lorempixel.com/100/100/fashion/2" alt="c2" width="100" height="100">
  21.    <img src="http://lorempixel.com/100/100/fashion/3" alt="c3" width="100" height="100">
  22.    <img src="http://lorempixel.com/100/100/fashion/4" alt="c4" width="100" height="100">
  23.    <img src="http://lorempixel.com/100/100/fashion/5" alt="c5" width="100" height="100">
  24.    <img src="http://lorempixel.com/100/100/fashion/6" alt="c6" width="100" height="100">
  25.    <img src="http://lorempixel.com/100/100/fashion/7" alt="c7" width="100" height="100">
  26.    <img src="http://lorempixel.com/100/100/fashion/8" alt="c8" width="100" height="100">
  27.    <img src="http://lorempixel.com/100/100/fashion/9" alt="c9" width="100" height="100">
  28.    <img src="http://lorempixel.com/100/100/fashion/10" alt="c10" width="100" height="100">
  29.   </div>
  30.  </div>
  31. </div>


 
CSS

Code :
  1. #wrapper {
  2. width: 600px;
  3. height: 400px;
  4. overflow: hidden;
  5. }
  6. #carrousel {
  7. width: 600px;
  8. height: 400px;
  9. overflow: hidden;
  10. position: absolute;
  11. }
  12. #carrousel img {
  13. display: block;
  14. float: left;
  15. }
  16. #pagination {
  17. display: block;
  18. width: 600px;
  19. height: 100px;
  20. overflow: hidden;
  21. }
  22. #thumbnails img {
  24. }


 
JS

Code :
  1. $(function() {
  2.       $('#pagination').hover(
  3.        function() {
  4.         $('#carrousel').trigger( 'pause' );
  5.        }, function() {
  6.         $('#carrousel').trigger( 'play' );
  7.        }
  8.       );
  9.  
  10.       $('#carrousel').carouFredSel({
  11.        scroll: {
  12.         fx: 'crossfade'
  13.        },
  14.        auto: {
  15.         onBefore: function( oldI, newI ) {
  16.          $('#thumbnails').trigger( 'slideTo', [ '#thumbnails img[alt='+ newI.attr( 'alt' ) +']', -2 ] );
  17.         }
  18.        }
  19.       });
  20.  
  21.       $('#thumbnails').carouFredSel({
  22.        auto: false,
  23.        items: {
  24.         start: -2
  25.        }
  26.       });
  27.  
  28.       $('#thumbnails img').click(function() {
  29.        $('#thumbnails').trigger( 'slideTo', [ this, -2 ] );
  30.        $('#carrousel').trigger( 'slideTo', [ '#carrousel img[alt='+ $(this).attr( 'alt' ) +']' ] );
  31.  
  32.       }).css( 'cursor', 'pointer' );
  33.      });

Reply

Marsh Posté le 11-01-2012 à 15:44:34    

monstrueux !!
 
Merci j'y comprends absolument rien dans le script, mais ça fonctionne, reste à l'adapter à mon site !
 
Juste un truc, si je veux décaler les vignettes (aller directement à la 10eme ) sans cliquer sur la 5, puis la 7, puis la 10... je peux ajouter un bouton ou que ça se déplace  automatiquement si j'approche ma souris du bord ?
 
ça reste un truc facile à mettre en place? ou chiant ?
 
Merci encore !! :D

Message cité 1 fois

---------------
VENTES TouchPad
Reply

Marsh Posté le 11-01-2012 à 17:51:00    

hoz74 a écrit :


Juste un truc, si je veux décaler les vignettes (aller directement à la 10eme ) sans cliquer sur la 5, puis la 7, puis la 10... je peux ajouter un bouton ou que ça se déplace  automatiquement si j'approche ma souris du bord ?


 
Aller directement à la 10eme je ne suis pas sûr d'avoir capté ? ;-)
 
Pour que cela bouge quand tu passe la souris c'est à dire en hover :  
 
regarde la ligne 28 du code JS  
 
remplace  
 

Code :
  1. $('#thumbnails img').click(function() {


 
par  
 

Code :
  1. $('#thumbnails img').hover(function() {


Reply

Marsh Posté le 11-01-2012 à 17:55:13    

Au fait tu peux virer ça dans le css :  
 

Code :
  1. #thumbnails img {
  2. }


 
tu as dû le remarquer ça ne sert à rien, c'est vide ;-)

Reply

Marsh Posté le 11-01-2012 à 20:15:37    

Petite correction.  
 
 

Code :
  1. $(function() {
  2.       $('#pagination').hover(
  3.        function() {
  4.         $('#carrousel').trigger( 'pause' );
  5.        }, function() {
  6.         $('#carrousel').trigger( 'play' );
  7.        }
  8.       );
  9.  
  10.       $('#carrousel').carouFredSel({
  11.        scroll: {
  12.         fx: 'crossfade'
  13.        },
  14.        auto: {
  15.         onBefore: function( oldI, newI ) {
  16.          $('#thumbnails').trigger( 'slideTo', [ '#thumbnails img[alt='+ newI.attr( 'alt' ) +']', -2 ] );
  17.         }
  18.        }
  19.       });
  20.  
  21.       $('#thumbnails').carouFredSel({
  22.        auto: false,
  23.        items: {
  24.         start: -2
  25.        }
  26.       });
  27.  
  28.       $('#thumbnails img').click(function() {
  29.        $('#carrousel').trigger( 'slideTo', [ '#carrousel img[alt='+ $(this).attr( 'alt' ) +']' ] );
  30.        });
  31.  
  32.        $('#thumbnails img').hover(function() {
  33.         $('#thumbnails').trigger( 'slideTo', [ this, -2 ] );
  34.  
  35.       }).css( 'cursor', 'pointer' );
  36.      });

Reply

Marsh Posté le 17-01-2012 à 00:46:41    

Merci beaucoup pour le script !
j'ai pas tout compris, mais l'essentiel est que ça fonctionne.
 
Je garde ça sous le coude pour le moment, j'y ajouterais peut être des modifications par la suite...


---------------
VENTES TouchPad
Reply

Marsh Posté le 04-07-2013 à 13:35:27    

Bonjour,  
 
Pouvez vous m’expliquer comment intégrer se carrousel a mon site internet?
Je suis débutant!  
 
Merci

Reply

Marsh Posté le 04-07-2013 à 22:42:49    

tout est expliqué ici pourtant ...
 
que te manque t'il ?


---------------
VENTES TouchPad
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed