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


Sathish Nadarajan
SharePoint MVP
Published On :   02 Nov 2014
Visit Count
Today :  3    Total :   10360



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.

clip_image002

On click of the Images,

clip_image004

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.

Categories