Magnific Pop Up.js Implementation To Zoom In Pictures

We all would have come across a scenario where we would have wanted to see the full-size image of a picture that was resized to fit on the web page. Ideally, when clicking the image, it navigates to the picture URI on a new page, where we get to see the full-size image, and we have to hit the back button to go back to the original web page.

In this scenario, Magnific Pop Up.js gives us the flexibility to open the embedded web page image as a full-sized pop-up by just clicking the image.

Let’s see how we can implement this in a sample web page.

What all files do we have to refer in the page?

CSS

<link rel="stylesheet" type="text/css" href="https://rawgit.com/dimsemenov/Magnific-Popup/master/dist/magnific-popup.css">

Magnific Pop up.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

JQuery

<script type="text/javascript" src="https://rawgit.com/dimsemenov/Magnific-Popup/master/dist/jquery.magnific-popup.js"></script>

Place the above references within the head tag of the html file.

Place the following CSS inside the Style tag within the head section.

<style>  
    table {  
        border-spacing: 0;  
        width: 100%;  
    }        
    td {  
        border-bottom: 1px solid #eee;  
        background: #ddd;  
        color: #000;  
        padding: 10px 25px;  
    }      
    th {  
        background: #87CEFA;  
        padding: 10px 25px;  
    }        
    td + td {  
        border-left: 1px solid #eee;  
    }  
</style>

I had to create a markup so that the image and corresponding data are displayed as a table. Place the following html markup within the body.

<section class="">  
    <div class="container">  
        <table>  
            <thead>  
                <tr class="header">  
                    <th> National Flower </th>  
                    <th> Country </th>  
                    <th> Image </th>  
                </tr>  
            </thead>  
            <tbody>  
                <tr>  
                    <td>Tulip</td>  
                    <td>Peru</td>  
                    <td>  
                        <img class="FlowerLink" 
                             src="https://lh5.ggpht.com/gDsUvYasttZ9ucT9IiL6hCZO_miY_Z2Esc7fdP8bR-_up7U3ymvrwK1LollkEeo2oAgy=h900" 
                             height="100" 
                             width="100">
                    </td>  
                </tr>  
                <tr>  
                    <td>Lotus</td>  
                    <td>India</td>  
                    <td>  
                        <img class="FlowerLink" 
                             src="http://withanopenheartdotorg.files.wordpress.com/2013/01/tumblr_lqf3n7sp3d1qbe09go1_1280_large.png?w=320&h=294" 
                             height="100" 
                             width="100">
                    </td>  
                </tr>  
                <tr>  
                    <td>Sunflower</td>  
                    <td>Switzerland</td>  
                    <td>  
                        <img class="FlowerLink" 
                             src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTo4nS-7mMfZlhUpwLqLBFtQGNwR4FIH4am2CMqeRMUtGN3peXw" 
                             height="100" 
                             width="100">
                    </td>  
                </tr>  
            </tbody>  
        </table>  
    </div>  
</section>

As a final step lets place the following jQuery code which would invoke the Magnific JS methods within the head tag right after the External JS file references.

$(document).ready(function() {  
    $(".FlowerLink").each(function() {  
        $(this).wrap("<a class=\"FlowerLinkWrapper\" href=\"" + $(this).attr('src') + "\"></a>");  
    });  

    $('.FlowerLinkWrapper').magnificPopup({  
        type: 'image',  
        closeOnContentClick: true,  
        image: {  
            verticalFit: true  
        },  
        zoom: {  
            enabled: true,  
            duration: 800 // don't forget to change the duration also in CSS  
        }  
    });  
}); 

Code Walk-through.

$(this).wrap(
    "<a class=\"FlowerLinkWrapper\" href=\"" + $(this).attr('src') + "\"></a>"
);

The above line of code wraps the images within an anchor tag and associates a class with the images. This is necessary for the Magnific.js call to work.

$('.FlowerLinkWrapper').magnificPopup({});

This line of code associates the magnificent popup event with the earlier anchor tags that we had wrapped around the images. Thus, whenever the image is clicked, it opens up as a popup and shows the full-size image.

Sample Screenshots

There are a lot of properties that we can set for the ‘magnificPopup’ method call, which gives us better transitions and zoom effects. You may feel free to play around with these properties at the jsfiddle I have created here.