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.
Happy Coding.
Sathish Nadarajan.
Leave a comment