carrousel d'images avec vignettes qui défilent

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : carrousel d'images avec vignettes qui défilent

hoz74

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

Publicité

valentin_caen

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

HTML

Code :

<div id="cfs-carrousel">
<div id="wrapper">
<div id="carrousel">
<img src="http://lorempixel.com/600/400/fashion/1" alt="c1" width="600" height="400">
<img src="http://lorempixel.com/600/400/fashion/2" alt="c2" width="600" height="400">
<img src="http://lorempixel.com/600/400/fashion/3" alt="c3" width="600" height="400">
<img src="http://lorempixel.com/600/400/fashion/4" alt="c4" width="600" height="400">
<img src="http://lorempixel.com/600/400/fashion/5" alt="c5" width="600" height="400">
<img src="http://lorempixel.com/600/400/fashion/6" alt="c6" width="600" height="400">
<img src="http://lorempixel.com/600/400/fashion/7" alt="c7" width="600" height="400">
<img src="http://lorempixel.com/600/400/fashion/8" alt="c8" width="600" height="400">
<img src="http://lorempixel.com/600/400/fashion/9" alt="c9" width="600" height="400">
<img src="http://lorempixel.com/600/400/fashion/10" alt="c10" width="600" height="400">
</div>
</div>
<div id="pagination">
<div id="thumbnails">
<img src="http://lorempixel.com/100/100/fashion/1" alt="c1" width="100" height="100">
<img src="http://lorempixel.com/100/100/fashion/2" alt="c2" width="100" height="100">
<img src="http://lorempixel.com/100/100/fashion/3" alt="c3" width="100" height="100">
<img src="http://lorempixel.com/100/100/fashion/4" alt="c4" width="100" height="100">
<img src="http://lorempixel.com/100/100/fashion/5" alt="c5" width="100" height="100">
<img src="http://lorempixel.com/100/100/fashion/6" alt="c6" width="100" height="100">
<img src="http://lorempixel.com/100/100/fashion/7" alt="c7" width="100" height="100">
<img src="http://lorempixel.com/100/100/fashion/8" alt="c8" width="100" height="100">
<img src="http://lorempixel.com/100/100/fashion/9" alt="c9" width="100" height="100">
<img src="http://lorempixel.com/100/100/fashion/10" alt="c10" width="100" height="100">
</div>
</div>
</div>

CSS

Code :

#wrapper {
width: 600px;
height: 400px;
overflow: hidden;
}
#carrousel {
width: 600px;
height: 400px;
overflow: hidden;
position: absolute;
}
#carrousel img {
display: block;
float: left;
}
#pagination {
display: block;
width: 600px;
height: 100px;
overflow: hidden;
}
#thumbnails img {
}

Code :

$(function() {
$('#pagination').hover(
function() {
$('#carrousel').trigger( 'pause' );
}, function() {
$('#carrousel').trigger( 'play' );
}
);
$('#carrousel').carouFredSel({
scroll: {
fx: 'crossfade'
},
auto: {
onBefore: function( oldI, newI ) {
$('#thumbnails').trigger( 'slideTo', [ '#thumbnails img[alt='+ newI.attr( 'alt' ) +']', -2 ] );
}
}
});
$('#thumbnails').carouFredSel({
auto: false,
items: {
start: -2
}
});
$('#thumbnails img').click(function() {
$('#thumbnails').trigger( 'slideTo', [ this, -2 ] );
$('#carrousel').trigger( 'slideTo', [ '#carrousel img[alt='+ $(this).attr( 'alt' ) +']' ] );
}).css( 'cursor', 'pointer' );
});

hoz74

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 !!

Message cité 1 fois

---------------
VENTES TouchPad

valentin_caen

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 :

$('#thumbnails img').click(function() {

par

Code :

$('#thumbnails img').hover(function() {

valentin_caen

Au fait tu peux virer ça dans le css :

Code :

#thumbnails img {
}

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

valentin_caen

Petite correction.

Code :

$(function() {
$('#pagination').hover(
function() {
$('#carrousel').trigger( 'pause' );
}, function() {
$('#carrousel').trigger( 'play' );
}
);
$('#carrousel').carouFredSel({
scroll: {
fx: 'crossfade'
},
auto: {
onBefore: function( oldI, newI ) {
$('#thumbnails').trigger( 'slideTo', [ '#thumbnails img[alt='+ newI.attr( 'alt' ) +']', -2 ] );
}
}
});
$('#thumbnails').carouFredSel({
auto: false,
items: {
start: -2
}
});
$('#thumbnails img').click(function() {
$('#carrousel').trigger( 'slideTo', [ '#carrousel img[alt='+ $(this).attr( 'alt' ) +']' ] );
});
$('#thumbnails img').hover(function() {
$('#thumbnails').trigger( 'slideTo', [ this, -2 ] );
}).css( 'cursor', 'pointer' );
});

hoz74

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

jacky jacky

Bonjour,

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

Merci

hoz74

tout est expliqué ici pourtant ...

que te manque t'il ?

---------------
VENTES TouchPad

FORUM HardWare.fr

Programmation

HTML/CSS

carrousel d'images avec vignettes qui défilent

Sujets relatifs
defilement horizontal d'images	Afficher plusieur Images avec Netbeans
Demande d'aide: fondu entre deux images sous htm	Faire un espace entre 2 images en html
Menu d'entrée, images en cercle	problème avec réécriture d'URL et images site
[bat]Commande externe de copie,sauvegarde,déplacement,gestion d'images	[C++] Extraire images d'un fichier mxf avec Mxflib
Superposer deux fois deux images	Dream cs5: remplacer images style diaporama(edit:résolu)
Plus de sujets relatifs à : carrousel d'images avec vignettes qui défilent

Page générée en 0.079 secondes