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>
發佈留言