{"id":988,"date":"2014-05-27T01:55:32","date_gmt":"2014-05-27T01:55:32","guid":{"rendered":"http:\/\/tw.newtonstudio.com\/?p=988"},"modified":"2014-05-27T02:07:54","modified_gmt":"2014-05-27T02:07:54","slug":"shadowbox-js-how-to-use-shadow-box-in-more-advanced-way","status":"publish","type":"post","link":"https:\/\/tw.newtonstudio.com\/?p=988","title":{"rendered":"shadowbox.js, how to use shadow box in more advanced way?"},"content":{"rendered":"

Offical Website: http:\/\/www.shadowbox-js.com\/index.html<\/p>\n

sometimes we might need to decide what images need to be played instead of using <\/p>\n

\r\n<a href=\"...\" rel=\"shadowbox[Vacation]\"><img src=\"...\"\/><\/a>\r\n<\/pre>\n
This is how we can do to create an Array to store all the object<\/p>\n
\r\n<a id=\"item_img\" href=\"javascript:;\">Click me to play ShadowBox<\/a>\r\n\r\n<a href=\"{original_img_link}\" class=\"sbox\"><img src=\"{thumb_img_link}\"\/><\/a>\r\n<a href=\"{original_img_link}\" class=\"sbox\"><img src=\"{thumb_img_link}\"\/><\/a>\r\n<a href=\"{original_img_link}\" class=\"sbox\"><img src=\"{thumb_img_link}\"\/><\/a>\r\n<a href=\"{original_img_link}\" class=\"sbox\"><img src=\"{thumb_img_link}\"\/><\/a>\r\n<a href=\"{original_img_link}\" class=\"sbox\"><img src=\"{thumb_img_link}\"\/><\/a>\r\n\r\n\r\n<script>\r\n\/\/the array list going to be played\r\nvar play_array = [];\r\n\r\n\/\/we use jquery to insert the url into the list\r\n$(\"a.sbox\").each(function(index, element) {\r\n\t\tplay_array.push({\r\n\t\t\tcontent:    element.href,\r\n        \t        player:     \"img\",\t\r\n\t\t\ttitle:\t   element.title,\r\n\t\t});\t\t\t\r\n});\r\n\r\nShadowbox.init({\r\n\t\thandleOversize: \"resize\",\r\n\t\tcontinuous: true,\r\n\t\tmodal: false,\r\n\t\tskipSetup: true,\r\n\t\tcounterType: \"skip\"\r\n});\r\n\t\r\nShadowbox.setup(\"a.sbox\", {\r\n\t\tgallery:        \"sbox\",\r\n\t\tcontinuous:     true,\r\n\t\tcounterType:    \"skip\"\r\n});\r\n\r\n$(\"#item_img\").click(function(){\t\t\t\t\t\r\n    Shadowbox.open(play_array);\t\t\t\r\n});\r\n\r\n<\/script>\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
Offical Website: http:\/\/www.shadowbox-js.com\/index.html […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[38,10],"tags":[],"class_list":["post-988","post","type-post","status-publish","format-standard","hentry","category-javascript","category-10"],"_links":{"self":[{"href":"https:\/\/tw.newtonstudio.com\/index.php?rest_route=\/wp\/v2\/posts\/988","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tw.newtonstudio.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tw.newtonstudio.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tw.newtonstudio.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tw.newtonstudio.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=988"}],"version-history":[{"count":12,"href":"https:\/\/tw.newtonstudio.com\/index.php?rest_route=\/wp\/v2\/posts\/988\/revisions"}],"predecessor-version":[{"id":1006,"href":"https:\/\/tw.newtonstudio.com\/index.php?rest_route=\/wp\/v2\/posts\/988\/revisions\/1006"}],"wp:attachment":[{"href":"https:\/\/tw.newtonstudio.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=988"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tw.newtonstudio.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=988"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tw.newtonstudio.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=988"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}