Using jquery.magnific-popup.min.js to highlight the Images in SharePoint 2013

Sathish Nadarajan
Solution Architect
November 2, 2014
Rate this article
[Total: 0    Average: 0/5]

In some of the situations, we may require to enlarge the Image on our Site to make it more visible for the End User. In my situation, I had a screen (ApplicationPage) on which a grid contains the Images. On click of the Images, the images should enlarge on the screen.

Let us see, how to implement this functionality using jquery.magnific-popup.min.js.

1. Open the visual Studio.

2. Add an application Page.

3. Add reference to the jquery-1.9.0.min.js, jquery.magnific-popup.min.js, jquery-ui-1.9.2.custom.js.

4. There is a CSS file given by the Magific Popup team itself. Refer that also. magnific-popup.css

5. All the above files are attached in the download section.

6. Hence, the reference on the page are as follows.

 <SharePoint:ScriptLink ID="ScriptLink7" runat="Server" Localizable="false" Name="~SiteCollection/Style Library/JS/jquery-1.9.0.min.js" Language="javascript" />
     <SharePoint:ScriptLink ID="ScriptLink13" runat="Server" Localizable="false" Name="~SiteCollection/Style Library/JS/jquery.magnific-popup.min.js" Language="javascript" />
     <SharePoint:ScriptLink ID="ScriptLink97" runat="Server" Localizable="false" Name="~SiteCollection/Style Library/JS/jquery-ui-1.9.2.custom.js" Language="javascript" />
     <SharePoint:CssRegistration ID="CssRegistration3" Name="<% $SPUrl:~SiteCollection/Style Library/CSS/magnific-popup.css %>" After="corev4.css" runat="server" />

7. Now, on the document.ready, we need to wrap the Image tags with an Anchor tag, so that on click of the image, we can trigger an event.

 $(document).ready(function ($) {
             var arraysOfIds = $('#Images img').map(function () {
                 this.setAttribute("class", "image-popup-no-margins");
                 $(this).wrap("<a class=\"image-popup-no-margins\"  href=\"" + this.src + "\"></a>");
                 return this.src;
                 type: 'image',
                 closeOnContentClick: true,
                 closeBtnInside: false,
                 fixedContentPos: true,
                 mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
                 image: {
                     verticalFit: true
                 zoom: {
                     enabled: true,
                     duration: 300 // don't foget to change the duration also in CSS

8. On the ASPX, the div and tags will looks like

 <div id="Images">
             <asp:GridView ID="gvImage" EmptyDataText="No records Found" CssClass="gridImage" runat="server" AutoGenerateColumns="false" ShowHeaderWhenEmpty="true">

9. On the Page Load (Server Side), write the logic to bind the Images on the grid.

10. Find the attached sample to see the C# code.

11. The screen will looks like this.


On click of the Images,


This Plugin contains so many other properties as well. I am leaving the rest to the readers. Hope this is a very simple way of implementing this functionality.

Download the Source HERE

Happy Coding.

Sathish Nadarajan.

Author Info

Sathish Nadarajan
Solution Architect
Rate this article
[Total: 0    Average: 0/5]
Sathish is a Microsoft MVP for SharePoint (Office Servers and Services) having 13+ years of experience in Microsoft Technologies. He holds a Masters Degree in Computer Aided Design and Business more

Leave a comment