When creating large content pages with multiple images embedded (like help documentation or blogs), the content may be more readable if there are small images within the body of the page that expand out to larger, light-boxed images when clicked. Or you may prefer to have hyperlinks on the page with a unique style (like a red hyperlink) so that users can click on it to see a pop up image.
This blog walks through the process to meet each of these scenarios.
Note that this has been implemented in SharePoint using the standard modal dialog (SP.UI.ModalDialog.showModalDialog) that comes out of the box with SP 2010. JQuery is still required, but SharePoint does most of the heavy lifting.
The steps taken:
Part 1: Set up the CSS and Masterpage
- CSS: In a .css stylesheet that is referenced in your Master Page, add the following classes:
- Reference JQuery in Master Page: Within the <head> tags of your /_catalogs/masterpage/Custom.master Master Page, add a reference to the JQuery code in appropriate location (version 1.10 + is required):
<script type="text/javascript" src="http://sitecollection/Style Library/Scripts/jquery.js"></script> - MasterPage: In the footer of the same Master Page, add the following:
- More CSS (optional): Finally, you may wish to fix the modal dialog on the page - meaning that wherever you were scrolled to on the page, the dialog will always be in the centre of the screen.
To do this, update a style sheet that is called by the System Master Page (most likely "v4.master" but you can check at SiteCollection/_Layouts/ChangeSiteMasterPage.aspx).
Add the following class:
Part 2: Applying the pop-up to content pages
Applying the pop-up using images
- Insert a logo image on the page. This is the one I have used:
. - Apply the “Lightbox” style from the “Image Style” drop down:
- Insert a link on the image to the image that you want to see in the modal dialog:
Applying the pop-up using Hyperlinks
To apply the pop-up image functionality to inline text, rather than using an icon image, do the following:- Insert the text into the page, highlight and select “Insert” Link
- Open the page in HTML mode, add the class to the <a> tag:
- Save the page and click on the link to see the image in Modal Dialog form
The finished product
Your pages look clean and mean:
And when users click on a familiar icon (or hyperlink style), a helpful modal dialog will popup and give them a full resolution image to enrich your content:
Finally, of the snippets above can be downloaded here.
