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