This time I will share jQuery Plugin and tutorial about Handy Slideshow-style Image Gallery Plugin For jQuery – gallery.js, hope it will help you in programming stack.
gallery.js is a simple,handy jQuery gallery plugin to showcase your images in a slideshow-style lightbox popup where the users are able to switch between images with navigation arrows and/or keyboard interactions.
How to use it:
1. Create the html for the slideshow-style lightbox popup.
03 |
< li class = "control previous" > |
04 |
< a href = "#" title = "Previous" >Previous</ a > |
06 |
< li class = "control next" > |
07 |
< a href = "#" title = "Next" >Next</ a > |
09 |
< li class = "control close" > |
10 |
< a href = "#" title = "Close" >Close</ a > |
14 |
< div class = "image" ></ div > |
15 |
< p class = "caption" ></ p > |
2. Create a list of thumbnails and wrap them into a
links pointing to the large images.
02 |
< ul class = "images thumbnails" > |
03 |
< li class = "even image thumbnail" > |
04 |
< a href = "1.jpg" title = "1.jpg" >< img src = "1-s.jpg" alt = "1.jpg" title = "1.jpg" ></ a > |
06 |
< li class = "odd image thumbnail" > |
07 |
< a href = "2.jpg" title = "2.jpg" >< img src = "2-s.jpg" alt = "2.jpg" title = "2.jpg" ></ a > |
09 |
< li class = "even image thumbnail" > |
10 |
< a href = "3.jpg" title = "3.jpg" >< img src = "3-s.jpg" alt = "3.jpg" title = "3.jpg" ></ a > |
12 |
< li class = "odd image thumbnail" > |
13 |
< a href = "4.jpg" title = "4.jpg" >< img src = "4-s.jpg" alt = "4.jpg" title = "4.jpg" ></ a > |
3. Load jQuery library and the main JS file gallery.js
in the document.
1 |
< script src = "//code.jquery.com/jquery-3.1.1.slim.min.js" ></ script > |
2 |
< script src = "gallery.js" ></ script > |
4. Create a new Gallery instance as this.
01 |
var gallery = new Gallery({ |
03 |
slideshow: '#slideshow' , |
04 |
currentImage: '#slideshow .current .image' , |
05 |
currentCaption: '#slideshow .current .caption' , |
06 |
thumbnailAnchor: '#gallery .thumbnails .thumbnail a' , |
07 |
previousAnchor: '#slideshow .previous a' , |
08 |
nextAnchor: '#slideshow .next a' , |
09 |
closeAnchor: '#slideshow .close a' , |
5. Let’s start to style the gallery lightbox in the CSS:
02 |
background-color : rgba( 0 , 0 , 0 , 0.75 ); |
10 |
#slideshow .current .image, #slideshow .controls .previous, #slideshow .controls .next { |
15 |
#slideshow .current .image, #slideshow .current . caption { text-align : center ; } |
17 |
#slideshow .current . caption { |
22 |
#slideshow .controls { position : relative ; } |
24 |
#slideshow .controls .control { position : absolute ; } |
26 |
#slideshow .controls .previous, #slideshow .controls .next { |
31 |
#slideshow .controls .previous { left : 0 ; } |