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

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;
 
             }).get();
 
              
 
             $('.image-popup-no-margins').magnificPopup({
                 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">
             </asp:GridView>
         </div>
 

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.