{"id":31528,"date":"2013-12-11T10:54:38","date_gmt":"2013-12-11T15:54:38","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=31528"},"modified":"2013-12-25T09:47:33","modified_gmt":"2013-12-25T14:47:33","slug":"js-animated-how-to-implement-jquery-prettyphoto-lightbox-plugin","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/js-animated-how-to-implement-jquery-prettyphoto-lightbox-plugin.html","title":{"rendered":"JS Animated. How to implement jQuery “prettyPhoto” lightbox plugin"},"content":{"rendered":"

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

PrettyPhoto is a jQuery lightbox clone. It supports not only images, but also videos, flash, YouTube, iframes and ajax. It\u2019s a full blown media lightbox.<\/p> To add it to your page:<\/p>\r\n\r\n

    \r\n

  1. Download prettyPhoto_compressed_3.1.5.zip<\/strong> from http:\/\/www.no-margin-for-errors.com\/projects\/prettyphoto-jquery-lightbox-clone\/<\/a> \u00a0on your computer and unpack it.<\/p>\r\n\r\n\"js_animated_jquery_prettyphoto_lightbox_plugin_implementing_1\"<\/a>\r\n\r\n<\/li>\r\n

  2. Copy the js <\/strong>and css<\/strong> folders from the unzipped package and paste them into the site<\/strong> folder of your template package. Since you already have folders with the same names there, you will be asked to replace them. This will just add the files in these folders to them, so just go ahead and agree to the replacement.<\/p>\r\n\r\n\"js_animated_jquery_prettyphoto_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> section:<\/p>\r\n\r\n

    \r\n<link rel="stylesheet" href="css\/prettyPhoto.css" type="text\/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" \/>\r\n\r\n<script src="js\/jquery.prettyPhoto.js" type="text\/javascript" charset="utf-8"><\/script> \r\n<\/pre>\r\n\r\n\"js_animated_jquery_prettyphoto_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    
    And change  it to:<\/p>\r\n\r\n
        \r\n<a href="images\/image_big.jpg" rel="prettyPhoto" title="Single Photo"><img src="images\/image_small.jpg " alt=" " \/><\/a>    \r\n<\/pre>\r\n\r\n\"js_animated_jquery_prettyphoto_lightbox_plugin_implementing_4\"<\/a>      \r\n      \r\n      
    In the  images folder there should be image_big.jpg and image_small.jpg accordingly.<\/p><\/p>\r\n\r\n\"js_animated_jquery_prettyphoto_lightbox_plugin_implementing_5\"<\/a>      \r\n      \r\n      
  5. Initialize prettyPhoto:  add the following to your .html<\/strong> file right before the closing <\/head> <\/strong> tag:<\/p><\/li>\r\n      \r\n
          \r\n<script type="text\/javascript" charset="utf-8">\r\n$(document).ready(function(){\r\n$("a[rel^='prettyPhoto']").prettyPhoto();\r\n});\r\n<\/script>\r\n<\/pre>\r\n\r\n\"js_animated_jquery_prettyphoto_lightbox_plugin_implementing_6\"<\/a>\r\n\r\n       
  6. Save the  changes and\u00a0 check your page in a web browser: the image should be opening  in a lightbox.<\/li>\r\n\r\n\"js_animated_jquery_prettyphoto_lightbox_plugin_implementing_7\"<\/a>.     \r\n      \r\n<\/ol>\r\n\r\n
    For more  information on how to use the plugin, please refer to the official manual at http:\/\/www.no-margin-for-errors.com\/projects\/prettyphoto-jquery-lightbox-clone\/documentation<\/a>.<\/p>\r\n\r\n
    Feel free to check the detailed video tutorial below:<\/p>\r\n\r\nJS Animated. How to implement jQuery “prettyPhoto” lightbox plugin<\/a>","protected":false},"excerpt":{"rendered":"
    This  tutorial is going to show you how to implement the jQuery prettyPhoto lightbox  plugin into your JS Animated template.<\/p>\n","protected":false},"author":30,"featured_media":31541,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1016,253,270],"tags":[1574,813,827,768,1418],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/31528"}],"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=31528"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/31528\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/31541"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=31528"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=31528"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=31528"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}