Showcase est un plugin jQuery qui permet de réaliser de jolis diaporamas d’accueil.
Pour voir les démonstrations c’est ici, pour télécharger le plugin c’est ici et la page officielle est ici.
Code :
1 2 3 4 | $("#showCase1").showcase({ animation: { type: "fade", interval: 4500, stopOnHover: false }, navigator: { item: { width: "4px", height: "4px" } } }); |
Le plugin jQuery mbGallery va vous permettre de réaliser de jolis diaporamas photo de vos albums sur votre site.
Le diaporama est entièrement configurable, en voici la preuve par le petit code jQuery d’exemple:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | $(”#g1?).mbGallery( { galleryMaxWidth:0, galleryWidth:300, galleryHeight:300, galleryColor:”#333?, galleryFrameBorder: 12, galleryFrameColor:”#fff”, thumbStripPos: “right”, thumbStripWidth:250, thumbSelectColor: “#fff”, thumbOverColor : “#cccccc”, thumbStripColor: “#333333?, thumbsBorder: 6, thumbHeight:70, headerOpacity: .8, labelColor: “#333333?, labelColorDisactive:”#333333?, labelTextColor: “#ffffff”, labelTextSize:”11px”, labelHeight:20, startFrom:0, fadeTime: 500, autoSlide:true, autoSize : true, slideTimer: 3000, iconFolder: “elements/white”, startTimer:0 } )} |
Pour le code HTML suivant:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div id="”g1?" class="”galleryCont”"> //image1 <img class="”imgThumb”" src="”LR/01.jpg”" alt="”"" /> //miniature <img class="”imgFull”" src="”HR/01.jpg”" alt="”"" /> //photo <div class="”imgDesc”">Entrance view of the SESC Avenida Paulista, São Paulo, Brazil (Photo by Noah Stolz)</div> //légende //image2 <img class="”imgThumb”" src="”LR/02.jpg”" alt="”"" /> <img class="”imgFull”" src="”HR/02.jpg”" alt="”"" /> <div class="”imgDesc”">Fórum Discussões Collaterais - Collateral Talks</div> //image3 <img class="”imgThumb”" src="”LR/04.jpg”" alt="”"" /> <img class="”imgFull”" src="”HR/04.jpg”" alt="”"" /> <div class="”imgDesc”">Runa Islam, “Turn (Gaze of Orpheus)”</div> </div> |
Si vous aussi vous souhaitez créer vos Pop-in à la « web 2.0″ je vous conseille le plugin Jquery nyroModal, il permet de créer des Pop-in ou même des galeries d’ images (ou vidéos,textes… )extrêmement facilement et avec un effet assez réussi.
Ce plugin réserve tout un tas de surprises, pour les découvrir je vous conseille de jeter un œil à la documentation.
Exemple de code Pour créer une galerie multimedia(photos, vidéos youtube):
Code Jquery:
1 | $('a.nyroModal').nyroModal(); |
Code HTML:
1 2 3 4 5 | <a id="imgFiche" class="nyroModal" title="UCLA" rel="gal" href="img/img1.jpg">Gallery Img 1</a> <a class="nyroModal" title="3rd Street Promenade by Night" rel="gal" href="img/img2.jpg">Gallery Img 2</a> <a class="nyroModal" title="Hockey Goal fight" rel="gal" href="http://www.youtube.com/watch?v=lddUnv1R5y0">Youtube in gallery</a> <a class="nyroModal" title="Sunset at Santa Monica" rel="gal" href="img/img3.jpg">Gallery Img 3</a> |
Et si ce plugin ne vous convient pas vous pouvez toujours jeter un œil sur le plugin lightbox ou encore thickbox.
Twitter links powered by Tweet This v1.6.1, a WordPress plugin for Twitter.
