If you worked with the content search web part you probably know that it has several rendering templates available: List, List with Paging, Slideshow
All of these will show you just that: a list which will take you to a page where the content is coming from.
In my case, my customer wanted to see the result right on the page where they user is at, in other words – have a fancybox or lightbox show the content like this:
Let’s take a look how this can be achieved with minimal effort.
First of, I’ll be using SharePoint Online tenant to demo this but same assumptions can be applied for on premises SP2013.
1. Add a CSWP to the page … easy
2. Download free fancybox plugin (this is the last place I’ve seen it: http://fancyapps.com/fancybox/)
2.1 This might be obvious but be aware that fancybox is using jQuery so you’ll need to download and reference jQuery in your masterpage in order for the fancybox to work – so yea, just making sure you’ve done that.
3. Extract the contents of the ZIP and upload the contents of the source directory which looks like this:
To your style library, in my case: /Style Library/Assets/scripts/fancybox
3.1 Make sure you check in all of these file otherwise they will appear not found to any other users except you and that will break the functionality.
3.2 Also make sure you reference fancybox in your masterpage just below jquery as follows (make sure the URLs match your structure):
<SharePoint:CssRegistration Name="<%$SPUrl:~sitecollection/Style Library/assets/scripts/fancybox/jquery.fancybox.css%>" runat="server" />
3. Open your site in SharePoint Designer and navigate to: All files/_catalogs/masterpage/Display Templates/Content Web Parts
4. Make a copy of Item_TwoLines.html and rename newly copied file to something else, in my case it’s Item_Fancybox.html
5. Check out the new file, open Item_Fancybox.html and add the following content to it:
5.1 Find this section
and replace it with
5.2 Find this section
and replace it with
5.3 Find this piece of code in the “FancyboxLines” section
var line2Id = encodedId + "line2";
and add the following chunk of code right below it
$('.fancybox').fancybox(); // fancybox
This section here basically initializes the fancybox UI with some of the parameters
5.4 Find the following piece of HTML
<div class="cbs-Item" id="_#= containerId =#_" data-displaytemplate="Item2Lines"<
Here is the picture to clarify:
and replace the entire div with it’s whole content with the following piece:
<a href="#content-div-_#= pictureLinkId =#_" class="fancybox">_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_</a>
<div style="display: none;">
<div id="content-div-_#= pictureLinkId =#_">
<p><strong>_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_</strong></p>
<p>_#= $htmlEncode(line2.defaultValueRenderer(line2)) =#_</p>
This section here maps line1 and line2 from the web part properties to the structure in the fancybox.
This section here:
<div style="display: none;"> is really the content that will appear in the fancybox flyout so if you need to display any other content for example the author name – you can output it there provided you get a hold of it through properties mapped to the CSWP.
6. Check in and publish your Item_Fancybox.html
7. Navigate back to your site and add a new (or use existing) instance of the Content Search Web Part.
7.1 Make sure that both Line 1 and Line 2 properties are mapped to correct fields so that you get the data you need displayed in a fancybox. Also, above example uses both Line 1 and Line 2 – so you must associate both of the drop downs otherwise you will get an error due to my poor error handling in this example code
8. In the web part properties, change the rendering template for the Item to Fancybox as shown below:
9. Save the web part properties and the page and ….