Galerie d’images avec navigation Jquery

Dans le cadre d’un projet, j’avais besoin d’un slideshow en jquery efficace. J’utilise régulièrement Nivo Slider, mais là j’avais envie d’en essayer un nouveau pouvant générer les miniatures automatiquement.

Après une petite sélection des sliders existants, je suis partit sur slideViewerPro, un plugin basé sur jQuery slideViewer.

Le plugin est très facile à mettre en place dans une page simple, et n’a pas besoin d’être modifié pour fonctionner avec le framework 960.gs (parfois la grille de reset peut poser problème).

L’intégration de slideViewerPro nécessite uniquement un fichier JS et CSS (et bien sûr le fichier Jquery).

Vous pourrez ensuite customiser le CSS pour rajouter vos préférences ou effets. J’ai ajouté une ombre à l’image principale :
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;

Les options plus basiques peuvent se configurer directement dans le script d’appel : borders, couleurs, démarrage… Je vous rentrouvrez toutes les options dans la documentation. A titre informatif, voici mon script d’appel :
$(window).bind("load", function() {
$("div#my-folio-of-works").slideViewerPro({
thumbs: 6,
typo: true,
galBorderWidth: 0,
thumbsTopMargin: 10,
thumbsBorderOpacity: 0,
buttonsTextColor: "#707070",
buttonsWidth: 40,
thumbsActiveBorderOpacity: 0.8,
thumbsActiveBorderColor: "#0084ff",
typoFullOpacity: 0.9,
shuffle: true
});
});

Bonjour tout le monde !

Bienvenue sur le blog de Lunart. Nous vous ferons partager ici nos projets en cours, astuces, outils utilisés… La vie de notre webagency 😉

Proudly powered by WordPress
Theme: Esquire by Matthew Buchanan.