This time I will share jQuery Plugin and tutorial about jQuery Plugin For Fullscreen Image Viewer – Chroma Gallery, hope it will help you in programming stack.
Chroma Gallery is a jQuery image gallery / viewer plugin that enlarges and displays your images in a fullscreen, navigatable modal popup. In addition, it extracts the dominant color from your image and applies the color to the background overlay of the modal popup. It also uses jQuery Masonry plugin to create a responsive, fluid grid layout for the thumbnail images.
How to use it:
1. Include jQuery library and the jQuery Chroma Gallery plugin’s files in the html page.
1 |
<link rel="stylesheet" href="stylesheets/chromagallery.css"> |
2 |
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> |
3 |
<script src="scripts/chromagallery.js"></script> |
2. Include other required resources in the html page.
1 |
<script src="scripts/modernizr-chrg.min.js"></script> |
2 |
<script src="scripts/masonry.min.js"></script> |
3. Add thumbnails with full-sized images specified using data-largesrc attribute to a container.
1 |
<div class="chroma-gallery mygallery"> |
2 |
<img src="thumb-1.jpg" alt="Pic 1" data-largesrc="1.jpg"> |
3 |
<img src="thumb-2.jpg" alt="Pic 2" data-largesrc="2.jpg"> |
4 |
<img src="thumb-3.jpg" alt="Pic 3" data-largesrc="3.jpg"> |
5 |
<img src="thumb-4.jpg" alt="Pic 4" data-largesrc="4.jpg"> |
6 |
<img src="thumb-5.jpg" alt="Pic 5" data-largesrc="5.jpg"> |
4. You can also add images to the gallery using items option.
01 |
$(".mygallery").chromaGallery({ |
5. Initialize the plugin and done.
1 |
$(".mygallery").chromaGallery(); |
6. Configuration options.
01 |
$(".mygallery").chromaGallery({ |
10 |
easing:'easeInOutQuart', |
16 |
onFullscreen:function(){} |
7. Methods.
01 |
var mygallery = $(".mygallery").chromaGallery(); |
04 |
mygallery.chromaGallery("openImg",1); |
07 |
mygallery.chromaGallery("closeImg",1); |
10 |
mygallery.chromaGallery("goTo",2); |
13 |
mygallery.chromaGallery("prev"); |
16 |
mygallery.chromaGallery("next"); |
Change log:
2015-11-01
- Improved overall performance
- Improved navigability when a image is opened
- Improved performance when using depth of field
- Shadows added to imgWrap
- Index added to chroma screen
- Fix next and prev functions when the image is not available
- Removed imagesLoaded dependecy
This awesome jQuery plugin is developed by codecrafting-net. For more Advanced Usages, please check the demo page or visit the official website.
