Ýletiþim
   0212 852 89 61
Mail
   info@ysmmedia.com

Ysm Media /
How to implement jQuery "Magnific Popup" lightbox plugin

This tutorial is going to show you how to implement the jQuery Magnific Popup lightbox plugin into your JS Animated template.

JS Animated. How to implement jQuery “Magnific Popup” lightbox plugin

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

 
1
<img src="images/image_small.jpg" alt="" />
 
1
2
3
<a class="image-popup-vertical-fit" href="images/image_big.jpg" title="Title">
    <img src="images/image_small.jpg">
</a>

js_animated_jquery_magnific_popup_lightbox_plugin_implementing_4js_animated_jquery_magnific_popup_lightbox_plugin_implementing_5

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
$(document).ready(function() {
 
    $('.image-popup-vertical-fit').magnificPopup({
        type: 'image',
        closeOnContentClick: true,
        mainClass: 'mfp-img-mobile',
        image: {
            verticalFit: true
        }
         
    });
 
});
</script>

js_animated_jquery_magnific_popup_lightbox_plugin_implementing_6

  1. Download Magnific-Popup-master.zip from https://github.com/dimsemenov/Magnific-Popup  on your computer and unpack it.

    js_animated_jquery_magnific_popup_lightbox_plugin_implementing_1
  2. Copy the dist folder from the unzipped package and paste into the site folder of your template package.

    js_animated_jquery_magnific_popup_lightbox_plugin_implementing_2
  3. Open the .html 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> tag:
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    <!-- Magnific Popup core CSS file -->
      <link rel="stylesheet" href="./dist/magnific-popup.css">
     
    <!-- Magnific Popup core CSS file -->
      <link rel="stylesheet" href="./dist/magnific-popup.css">
     
    <!-- Magnific Popup core JS file -->
      <script src="./dist/jquery.magnific-popup.js"></script>
    js_animated_jquery_magnific_popup_lightbox_plugin_implementing_3
  4. Find the line with the image e.g.
  5. And change it to
  6. In the images folder there should be image_big.jpg and image_small.jpg accordingly.
  7. To initialize the popup, add the following to your .html file right before the closing </head> tag or in the footer of your site (before the closing </body> tag:
  8. Save the changes and check 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.

js_animated_jquery_magnific_popup_lightbox_plugin_implementing_7

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

Feel free to check the detailed video tutorial below:

JS Animated. How to implement jQuery “Magnific Popup” lightbox pluginJS Animated. How to implement jQuery "Magnific Popup" lightbox plugin, 3.6 out of 51 based on 5 ratings

arama motorlarıyla %100 uyum
Arama Motoru Optimizasyonu (SEO); web sitenizin anahtar kelimeler ile arandığında Arama Motorlarında ilk sayfada, Üst sırada Çıkmasını sağlayan web sitesi iÇi ve web sitesi dışında yapılan uygulamalardır.
kolay iÇerik gÜncelleme
Arama Motoru Optimizasyonu (SEO); web sitenizin anahtar kelimeler ile arandığında Arama Motorlarında ilk sayfada, Üst sırada Çıkmasını sağlayan web sitesi iÇi ve web sitesi dışında yapılan uygulamalardır.
responsive web tasarım
Arama Motoru Optimizasyonu (SEO); web sitenizin anahtar kelimeler ile arandığında Arama Motorlarında ilk sayfada, Üst sırada Çıkmasını sağlayan web sitesi iÇi ve web sitesi dışında yapılan uygulamalardır.