juil 16

SlideView est un plugin jQuery qui permet de créer un Diaporama ( slideshow).

Voici la démo.

Documentation et téléchargement.

Exemple de code jQuery :

1
$("#slideshow").slideView();

diaporama-slideshow-jquery

Post to Twitter Twitter ce post


juil 02

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" } }
});

showcase-diaporama-jquery

Post to Twitter Twitter ce post

mar 01

Le plugin jQuery mbGallery va vous permettre de réaliser de jolis diaporamas photo de vos albums sur votre site.

diaporama-album-photo-plugin-jquery-mb-gallery

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="”&quot;" />     //miniature
     <img class="”imgFull”" src="”HR/01.jpg”" alt="”&quot;" />     //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="”&quot;" />
     <img class="”imgFull”" src="”HR/02.jpg”" alt="”&quot;" />
<div class="”imgDesc”">Fórum Discussões Collaterais - Collateral Talks</div>
//image3
     <img class="”imgThumb”" src="”LR/04.jpg”" alt="”&quot;" />
     <img class="”imgFull”" src="”HR/04.jpg”" alt="”&quot;" />
<div class="”imgDesc”">Runa Islam, “Turn (Gaze of Orpheus)</div>
</div>

Post to Twitter Twitter ce post

Twitter links powered by Tweet This v1.6.1, a WordPress plugin for Twitter.