{"id":31556,"date":"2014-01-21T07:15:20","date_gmt":"2014-01-21T12:15:20","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=31556"},"modified":"2014-01-21T07:15:20","modified_gmt":"2014-01-21T12:15:20","slug":"js-animated-how-to-implement-jquery-fancybox-lightbox-plugin","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/js-animated-how-to-implement-jquery-fancybox-lightbox-plugin.html","title":{"rendered":"JS Animated. How to implement jQuery “FancyBox” lightbox plugin"},"content":{"rendered":"

This tutorial is going to show you how to implement the jQuery "FancyBox" lightbox plugin into your JS Animated template.<\/p>\r\n\r\nJS Animated. How to implement jQuery “FancyBox” lightbox plugin<\/a>\r\n\r\n

FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats over a web page and is built using the jQuery library<\/a>.<\/p> \r\n

To add it to your page:<\/p>\r\n

    \r\n

  1. Download the plugin library from http:\/\/fancybox.net\/<\/a> on your computer and unpack it.<\/p>\r\n\r\n\"js_animated_jquery_fancybox_lightbox_plugin_implementing_1\"<\/a>\r\n\r\n<\/li>\r\n

  2. Copy the fancybox<\/strong> folder from the unzipped package and paste it into the site<\/strong> folder of your template package.<\/p>\r\n\r\n\"js_animated_jquery_fancybox_lightbox_plugin_implementing_2\"<\/a>\r\n\r\n<\/li>\r\n

  3. Open the .html<\/strong> file with the image you want to apply the plugin to\u00a0and add the libraries and the table of styles to it in Dreamweaver to the <head><\/strong> tag:<\/p>\r\n\r\n

    \r\n<script type="text\/javascript" src=".\/fancybox\/jquery.fancybox-1.3.4.pack.js"><\/script>\r\n<script type="text\/javascript" src=".\/fancybox\/jquery.easing-1.4.pack.js"><\/script>\r\n<script type="text\/javascript" src=".\/fancybox\/jquery.mousewheel-3.0.4.pack.js"><\/script>\r\n<link rel="stylesheet" href=".\/fancybox\/jquery.fancybox-1.3.4.css" type="text\/css" media="screen" \/>\r\n<\/pre>\r\n\r\n\"js_animated_jquery_fancybox_lightbox_plugin_implementing_3\"<\/a>\r\n<\/li>\r\n\r\n
  4. Find the line with the image, e.g.<\/p><\/li>\r\n\r\n
    \r\n<img src="images\/image_small.jpg" alt="" \/>\r\n<\/pre>\r\n\r\n
  5. And change it to<\/p><\/li>\r\n\r\n
    \r\n<a class="fancybox" href="images\/image_big.jpg"><img src="images\/image_small.jpg" alt=""\/><\/a>\r\n<\/pre>\r\n\r\n\"js_animated_jquery_fancybox_lightbox_plugin_implementing_4\"<\/a>\r\n\r\n  
  6. In the images folder, there should be  image_big.jpg and image_small.jpg accordingly.<\/p><\/li>\r\n   \r\n\"js_animated_jquery_fancybox_lightbox_plugin_implementing_5\"<\/a>\r\n   \r\n  
  7. Initialize the gallery: add the  following to your .html<\/strong> file right before the closing <\/head><\/strong> tag:<\/p>\r\n  \r\n
    \r\n<script type="text\/javascript">\r\n    $(document).ready(function() {\r\n   \t\t$("a.fancybox").fancybox();\r\n    });\r\n<\/script>\r\n<\/pre>\r\n\r\n\"js_animated_jquery_fancybox_lightbox_plugin_implementing_6\"<\/a>\r\n\r\n<\/li>\r\n  
  8. Save the changes and\u00a0check your page in a web browser: the image should be opening in a lightbox.<\/p>\r\n\r\n\"js_animated_jquery_fancybox_lightbox_plugin_implementing_7\"<\/a>\r\n\r\n<\/li>\r\n<\/ol>\r\n\r\n
    Using the  table of available options from http:\/\/fancybox.net\/api<\/a>, you can pass them as key\/value  object to the fancybox() function. <\/p>\r\nFor more  information on how to use the plugin, please refer to the official manual at http:\/\/fancybox.net\/howto<\/a>.\r\n<\/p>\r\n\r\n
    Feel free to check the detailed video tutorial below:<\/p>\r\n\r\nJS Animated. How to implement jQuery “FancyBox” lightbox plugin<\/a>","protected":false},"excerpt":{"rendered":"
    This  tutorial is going to show you how to implement the jQuery "FancyBox"  lightbox plugin into your JS Animated template.<\/p>\n","protected":false},"author":30,"featured_media":31568,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1016,253,270],"tags":[828,1574,827,768],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/31556"}],"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\/30"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=31556"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/31556\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/31568"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=31556"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=31556"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=31556"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}