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 which was resized to fit in the web page. Ideally on clicking the image it navigates to the picture URI in 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 mark up so that the image and corresponding data is displayed as a table. Place the following html mark up 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>
                        <image class="FlowerLink" src="https://lh5.ggpht.com/gDsUvYasttZ9ucT9IiL6hCZO_miY_Z2Esc7fdP8bR-_up7U3ymvrwK1LollkEeo2oAgy=h900" height="100" width="100"></image>
                    </td>
                </tr>
                <tr>
                    <td>Lotus</td>
                    <td>India</td>
                    <td>
                        <image class="FlowerLink" src="http://withanopenheartdotorg.files.wordpress.com/2013/01/tumblr_lqf3n7sp3d1qbe09go1_1280_large.png?w=320&h=294" height="100" width="100"></image>
                    </td>
                </tr>
                <tr>
                    <td>Sunflower</td>
                    <td>Switzerland</td>
                    <td>
                        <image class="FlowerLink" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTo4nS-7mMfZlhUpwLqLBFtQGNwR4FIH4am2CMqeRMUtGN3peXw" height="100" width="100"></image>
                    </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 foget to change the duration also in CSS
        }
    });
});

Code Walk-through

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

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 magnific pop up event to the earlier anchor tags that we had wrapped around the images. Thus whenever the image is clicked it would open up as a pop up and show the full size image.

Sample Screenshots





There are 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.