Offical Website: http://www.shadowbox-js.com/index.html
sometimes we might need to decide what images need to be played instead of using
<a href="..." rel="shadowbox[Vacation]"><img src="..."/></a>
This is how we can do to create an Array to store all the object
<a id="item_img" href="javascript:;">Click me to play ShadowBox</a>
<a href="{original_img_link}" class="sbox"><img src="{thumb_img_link}"/></a>
<a href="{original_img_link}" class="sbox"><img src="{thumb_img_link}"/></a>
<a href="{original_img_link}" class="sbox"><img src="{thumb_img_link}"/></a>
<a href="{original_img_link}" class="sbox"><img src="{thumb_img_link}"/></a>
<a href="{original_img_link}" class="sbox"><img src="{thumb_img_link}"/></a>
<script>
//the array list going to be played
var play_array = [];
//we use jquery to insert the url into the list
$("a.sbox").each(function(index, element) {
play_array.push({
content: element.href,
player: "img",
title: element.title,
});
});
Shadowbox.init({
handleOversize: "resize",
continuous: true,
modal: false,
skipSetup: true,
counterType: "skip"
});
Shadowbox.setup("a.sbox", {
gallery: "sbox",
continuous: true,
counterType: "skip"
});
$("#item_img").click(function(){
Shadowbox.open(play_array);
});
</script>