JavaScriptGallery is A responsive, easy-to-use, user-friendly jQuery gallery lightbox plugin designed to provide an elegant image viewing experience on the webpage.
grid gallery with lightbox popup, dynamic image gallery, lightbox gallery demo, how to create dynamic gallery, wordpress gallery lightbox, responsive gallery with lightbox
Add preview Images
- Add #preview to the end of the Image url.
- Add a smaller preview Image to the same path ({original_name}-preview.{original_file_extension})
.jpeg; .png; .jpg and .webp are supported
How to make use of it:
1. Load the Gallery.js plugin’s information within the doc.
<!-- jQuery & jQuery UI --> <script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/cdn/jquery-ui.min.js"></script> <!-- jQuery Gallery.js Plugin --> <link rel="stylesheet" href="/path/to/gallery.min.css" /> <script src="/path/to/gallery.min.js"></script>
2. Create a container to carry the picture gallery.
<div class="Gallery"></div>
3. Add photos and a headline to the Gallery.
json = '{ "Entry": { "Title": "Gallery Tigle", '+
'"Image": ["1.jpg",'+
'"2.jpg",'+
'"3.jpg",'+
'"4.jpg",'+
'"5.jpg",'+
'"6.jpg" ] } }';addGallery(json);
4. Determine whether or not to allow additional buttons (social media, zoom, picture link, and so on).
enableExtraButtons();
5. Set the transition impact you like:
- opacity
- zoomin
- slide
- slideAndZoom
- slideZoom
- ZoominFast
- bounce
- puffzoom
setGalleryTransition("zoomin");6. Set the gallery model you like:
- tiles
- center
- Circles
- full
setGalleryStyle("mosaic");7. Determine whether to auto-set the gallery width on window resize.
enableAutoWidth();
8. Set the background colour of the gallery lightbox.
backgroundColor("#444444");Dynamic Gallery Lightbox In jQuery, JavaScriptGallery Plugin/Github, dynamic photo gallery
See Demo And Download
Official Website(marcelbohland): Click Here
This superior jQuery/javascript plugin is developed by marcelbohland. For extra Advanced Usages, please go to the official website.
