{"id":31507,"date":"2014-01-21T08:38:19","date_gmt":"2014-01-21T13:38:19","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=31507"},"modified":"2014-01-21T08:38:19","modified_gmt":"2014-01-21T13:38:19","slug":"js-animated-how-to-implement-jquery-magnific-popup-lightbox-plugin","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/js-animated-how-to-implement-jquery-magnific-popup-lightbox-plugin.html","title":{"rendered":"JS Animated. How to implement jQuery “Magnific Popup” lightbox plugin"},"content":{"rendered":"

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

Magnific Popup<\/strong> is a fast, light, mobile-friendly and responsive lightbox and modal dialog plugin built using the jQuery library<\/a>. To see it in action, you can play with examples on CodePen<\/a>. To add it to your page:<\/p>\r\n

    \r\n

  1. Download Magnific-Popup-master.zip<\/strong> from https:\/\/github.com\/dimsemenov\/Magnific-Popup<\/a>\u00a0 on your computer and unpack it.<\/p> \r\n\r\n\"js_animated_jquery_magnific_popup_lightbox_plugin_implementing_1\"<\/a>\r\n\r\n<\/li>\r\n

  2. Copy the dist <\/strong>folder from the unzipped package and paste into the site<\/strong> folder of your template package.<\/p> \r\n\r\n\"js_animated_jquery_magnific_popup_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 and add the libraries and the table of styles to it in DreamWeaver inside of the <head> <\/strong>tag:\r\n\r\n
    \r\n<!-- Magnific Popup core CSS file -->\r\n  <link rel="stylesheet" href=".\/dist\/magnific-popup.css">\r\n\r\n<!-- Magnific Popup core CSS file --> \r\n  <link rel="stylesheet" href=".\/dist\/magnific-popup.css"> \r\n\r\n<!-- Magnific Popup core JS file --> \r\n  <script src=".\/dist\/jquery.magnific-popup.js"><\/script>\r\n<\/pre>\r\n\r\n\"js_animated_jquery_magnific_popup_lightbox_plugin_implementing_3\"<\/a>\r\n<\/li> \r\n\r\n
  4. Find the  line with the image e.g.<\/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<\/li>\r\n\r\n
    \r\n<a class="image-popup-vertical-fit" href="images\/image_big.jpg" title="Title">\r\n    <img src="images\/image_small.jpg">\r\n<\/a>\r\n<\/pre>\r\n\r\n\"js_animated_jquery_magnific_popup_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.<\/li>\r\n\r\n\"js_animated_jquery_magnific_popup_lightbox_plugin_implementing_5\"<\/a>  \r\n  \r\n
  7. To initialize  the popup, add the following to your .html <\/strong>file right before the closing <\/head><\/strong>  tag or in the footer of your site (before the closing <\/body><\/strong> tag:<\/li>\r\n\r\n
    \r\n<script>\r\n$(document).ready(function() {\r\n \r\n    $('.image-popup-vertical-fit').magnificPopup({\r\n        type: 'image',\r\n        closeOnContentClick: true,\r\n        mainClass: 'mfp-img-mobile',\r\n        image: {\r\n            verticalFit: true\r\n        }\r\n         \r\n    });\r\n \r\n});\r\n<\/script>\r\n<\/pre>\r\n\r\n\"js_animated_jquery_magnific_popup_lightbox_plugin_implementing_6\"<\/a>  \r\n  \r\n
  8. Save the  changes and\u00a0check your page in a web browser: the image should be opening  in a lightbox with a title. Your site should be up and running on a  remote\/local server to see the plugin in action.<\/li>\r\n<\/ol>\r\n\r\n\"js_animated_jquery_magnific_popup_lightbox_plugin_implementing_7\"<\/a>\r\n  \r\n
    For more  information on how to use the plugin, please refer to the official manual at: http:\/\/dimsemenov.com\/plugins\/magnific-popup\/documentation.html#initializing_popup<\/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 “Magnific Popup” lightbox plugin<\/a>","protected":false},"excerpt":{"rendered":"
    This  tutorial is going to show you how to implement the jQuery Magnific Popup  lightbox plugin into your JS Animated template.<\/p>\n","protected":false},"author":30,"featured_media":31526,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1016,253,270],"tags":[1574,827,1575,1191,1363],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/31507"}],"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=31507"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/31507\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/31526"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=31507"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=31507"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=31507"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}