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>