Simplelightbox with jQuery Edge

by bvotcode

HTML

<script src="https://www.imagely.com/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/lightbox/static/simplelightbox/simple-lightbox.js"></script>
<link rel="stylesheet" href="https://www.imagely.com/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/lightbox/static/simplelightbox/simple-lightbox.css">
<p>
	Image gallery <small>(ps, try using mouse scroll wheel) </small><br>

	<a rel="example_group" title="Custom title" href="http://farm4.staticflickr.com/3745/8971419780_cb88b22947_b.jpg">
		<img alt="" src="http://farm4.staticflickr.com/3745/8971419780_cb88b22947_m.jpg">
	</a>

	<a rel="example_group" title="" href="http://farm9.staticflickr.com/8366/8483546751_86494ae914_b.jpg">
		<img alt="" src="http://farm9.staticflickr.com/8366/8483546751_86494ae914_m.jpg">
	</a>

	<a rel="example_group" title="" href="http://farm9.staticflickr.com/8481/8215602321_69d9939b8b_b.jpg">
		<img alt="" src="http://farm9.staticflickr.com/8481/8215602321_69d9939b8b_m.jpg">
	</a>

<a  rel="example_group" class="banner-section" id="img-from-array"> </a>
</p>

JavaScript

var nextgen_simplebox_options = {
        history: false,
        animationSlide: false,
        animationSpeed: 100,
        captionSelector: 'self'
    };


var data = {
"images": [{
"bannerImage": "https://i.imgur.com/eJqEsnz.png"
},
{
"bannerImage": "https://i.imgur.com/eJqEsnz.png"
},
{"bannerImage" : "https://i.imgur.com/LOQjVCz.png"
}]
};
data.images.forEach( function(obj) {
var img = new Image();
img.src = obj.bannerImage;
img.setAttribute("class", "banner-img");
img.setAttribute("alt", "hinh-anh");
document.getElementById("img-from-array").appendChild(img);
});

    
jQuery(function($){
  $('a[rel="example_group"]').simpleLightbox(nextgen_simplebox_options);
})