Magnific Pop Up.js Implementation To Zoom In Pictures

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