mar 01

Diaporama de photos en Jquery

Jquery Add comments



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

Mots-clefs :, , , ,

Leave a Reply