{"id":6697,"date":"2011-03-17T04:24:45","date_gmt":"2011-03-17T08:24:45","guid":{"rendered":"http:\/\/info.template-help.com\/?p=6697"},"modified":"2013-06-13T08:53:53","modified_gmt":"2013-06-13T12:53:53","slug":"jquery-fancybox","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/jquery-fancybox.html","title":{"rendered":"jQuery &#8220;FancyBox&#8221;"},"content":{"rendered":"FancyBox is a tool for displaying images, HTML content and multi-media in a Mac-style &#8220;lightbox&#8221; that floats overtop of web page.\r\n\r\n<h3>JavaScript<\/h3>\r\nWe should include jQuery framework, jquery.fancybox-1.3.1.pack and jquery.easing-1.3.pack by pointing src attribute in the script tag to those .js files.\r\n\r\n<img src=\"http:\/\/info.template-help.com\/files\/jquery\/lightbox\/lightbox_2_1.png\" alt=\"1\" \/>\r\nInitialization script we place in the &lt;head&gt; section. It initializes the link with the id #single_image\r\n<img src=\"http:\/\/info.template-help.com\/files\/jquery\/lightbox\/lightbox_2_2.png\" alt=\"2\" \/>\r\nThere are plenty of additional settings, that you can check at the official website http:\/\/fancybox.net\/api\r\n\r\n<h3>HTML<\/h3>\r\nBelow you can see general HTML script representation:\r\n<img src=\"http:\/\/info.template-help.com\/files\/jquery\/lightbox\/lightbox_2_3.png\" alt=\"3\" \/>\r\n\r\nThe href attribute indicates path to big image, which will display in the preview window. If you need to arrange some number of images into one gallery, then add attribute rel with the same value (id) (e.g. rel=&#8221;group1&#8243;).\r\n\r\n<h3>CSS<\/h3>\r\nYou can find script related styles in the css file:\r\n<img src=\"http:\/\/info.template-help.com\/files\/jquery\/lightbox\/lightbox_2_4.png\" alt=\"4\" \/>","protected":false},"excerpt":{"rendered":"<p>FancyBox is a tool for displaying images, HTML content and multi-media in a Mac-style &#8220;lightbox&#8221; that floats overtop of web page. JavaScript We should include jQuery framework, jquery.fancybox-1.3.1.pack and jquery.easing-1.3.pack by pointing src attribute in the script tag to those .js files. Initialization script we place in the &lt;head&gt; section. It initializes the link with [&hellip;]<\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[266,270],"tags":[828,813,827],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/6697"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=6697"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/6697\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=6697"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=6697"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=6697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}