Guest Author: Jason MacKenzie
Intelligence Among Us

My client has photo gallery envy after looking at the Flash-based slide show that another municipality has on their web site.  They also don’t want to buy the component the others are using so I set off to create something simple using jQuery and the Content Query Web Part. The end result looks like the image below. Clicking on the left and right arrow buttons will scroll the next block of 5 images into view.

In order to create this effect I downloaded the latest version of jQuery Tools. We’re interested in the Scrollable functionality here. If you look at the standalone demo at the bottom of the page it will give you a sense of how the HTML needs to be rendered in order for the plug in to work. I’ve pasted it below for reference. We can see that our only real challenge to implementing this will be formatting the HTML properly that’s returned by the CQWP.

<div id="image_wrap">
	<!-- Initially the image is a simple 1x1 pixel transparent GIF -->
	<img src="http://static.flowplayer.org/tools/img/blank.gif" width="500" height="375" />
</div>

<!-- HTML structures -->

<!-- "previous page" action -->
<a class="prev browse left"></a>

<!-- root element for scrollable -->
<div class="scrollable">   

   <!-- root element for the items -->
   <div class="items">

      <!-- 1-5 -->
      <div>
         <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
         <img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" />
         <img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" />
         <img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" />
         <img src="http://farm1.static.flickr.com/164/399223606_b875ddf797_t.jpg" />
      </div>

      <!-- 5-10 -->
      <div>
         <img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" />
         <img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" />
         <img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" />
         <img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />
         <img src="http://farm1.static.flickr.com/50/117346182_1fded507fa_t.jpg" />
      </div>

      <!-- 10-15 -->
      <div>
         <img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" />
         <img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" />
         <img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" />
         <img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" />
         <img src="http://farm4.static.flickr.com/3624/3323893148_8318838fbd_t.jpg" />
      </div>

   </div>

</div>

<!-- "next page" action -->
<a class="next browse right"></a>

Once the jQuery tools, the required CSS files (available from their site) and the arrow images are downloaded into our SharePoint Scripting Resource Center we’re ready to get started. I created a site called Photo Gallery, created an image library and uploaded the pictures to it.

The next step is to create a new web part page and add a CEWP and a CQWP to the page. We’ll configure the CQWP to point to the correct list and ensure that the results are pulled back.; We’ll keep the default item style for now.

Open the content query web part and paste the following script and styles into it – this is directly from the jQuery Tools site.  Make sure you change the links to your js and css files.

<script src="http://sandbox/photogallery/jQuery/jquery.tools.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://sandbox/photogallery/jQuery/scrollable-buttons.css" />
<link rel="stylesheet" type="text/css" href="http://sandbox/photogallery/jQuery/scrollable-horizontal.css" />
<link rel="stylesheet" type="text/css" href="http://sandbox/photogallery/jQuery/standalone.css" />
<style>	/* styling for the image wrapper  */
	#image_wrap {
		/* dimensions */
		width:677px;
		margin:15px 0 15px 40px;
		padding:15px 0;

		/* centered */
		text-align:center;

		/* some "skinning" */
		background-color:#000000;
		border:2px solid #fff;
		outline:1px solid #ddd;
		-moz-ouline-radius:4px;
	}
	</style>

<script>
$(function() {

$(".scrollable").scrollable();

$(".items img").click(function() {

	// see if same thumb is being clicked
	if ($(this).hasClass("active")) { return; }

	// calclulate large image's URL based on the thumbnail URL (flickr specific)
	var url = $(this).attr("src").replace("_t", "");

	// get handle to element that wraps the image and make it semi-transparent
	var wrap = $("#image_wrap").fadeTo("medium", 0.5);

	// the large image from www.flickr.com
	var img = new Image();

	// call this function after it's loaded
	img.onload = function() {

		// make wrapper fully visible
		wrap.fadeTo("fast", 1);

		// change the image
		wrap.find("img").attr("src", url);

	};

	img.src = url;

	// activate item
	$(".items img").removeClass("active");
	$(this).addClass("active");

// when page loads simulate a "click" on the first image
}).filter(":first").click();
});
</script>

The next step is to modify the style to render the HTML in the correct format. Open SharePoint designer and navigate to the Style Library > XSL Style Sheets folder and open ItemStyles.xsl. We’re going to add a new template.

I’m going to explain the logic and put the entire xsl template below.  If you refer to the html from the jQuery tools site above you’ll see that we need to group each set of 5 images into its own DIV. Which means in our XSL we need a method to determine where we are currently at as we traverse the tree.

<xsl:if test="count(preceding-sibling::*)=0"> and </xsl:if> and <xsl:if test="count(following-sibling::*)=0"></xsl:if> will tell is if we’re at the first or last node which allows us to place our opening and closing DIV tags in the right place.

The next one is to determine how to open and close the DIV tags in groups of 5 images. The logic was that if the preceding sibling count is divisible equally by 5 then we need to add an opening DIV tag and if its one less than that add and if its one less than that we need a closing one. This took us back to the math MOD operation which sparked a lively debate about what grade we learned that in and whether we had ever used it outside of school before. This snippet says that if the count of the preceding siblings is divisible by 5 then we are on the 6th item and need to start a new DIV tag. For the closing tag we want to know if the preceeding count is divisible by 5 with a remainder of 4 then we’re on the 10th item for example and need to close the DIV.

<xsl:if test="count(preceding-sibling::*) mod 5=0">
			<xsl:text disable-output-escaping="yes">
			     &lt;div&gt;</xsl:text>
		</xsl:if>
                             <img src="{$SafeLinkUrl}"></img>
		<xsl:if test="count(preceding-sibling::*) mod 5=4">
				<!--<xsl:if test="count(preceding-sibling::*)!=0">-->
					<xsl:text disable-output-escaping="yes">
			     &lt;/div&gt;</xsl:text>
		</xsl:if>

	<xsl:template name="PhotoGallery" match="Row[@Style='PhotoGallery']" mode="itemstyle">
		<xsl:variable name="SafeLinkUrl">
            <xsl:call-template name="OuterTemplate.GetSafeLink">
                <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
            </xsl:call-template>
        </xsl:variable>
		<xsl:variable name="SafeImageUrl">
            <xsl:call-template name="OuterTemplate.GetSafeStaticUrl">
                <xsl:with-param name="UrlColumnName" select="'ImageUrl'"/>
            </xsl:call-template>
        </xsl:variable>
		<xsl:variable name="LinkTarget">
            <xsl:if test="@OpenInNewWindow = 'True'" >_blank</xsl:if>
        </xsl:variable>

		<!--If this is the first match let's put a header on it-->
		<xsl:if test="count(preceding-sibling::*)=0">
		<!-- wrapper element for the large image -->
		<div id="image_wrap">

	<!-- Initially the image is a simple 1x1 pixel transparent GIF -->
	<img src="http://static.flowplayer.org/tools/img/blank.gif" width="500" height="375" />
		</div>
              <a class="prev browse left"></a>
			<xsl:text disable-output-escaping="yes">
			<!-- root element for scrollable -->
				&lt;div class="scrollable"&gt;  

   			<!-- root element for the items -->
   			&lt;div class="items"&gt;    

			</xsl:text>
		</xsl:if>

		<xsl:if test="count(preceding-sibling::*) mod 5=0">
					<xsl:text disable-output-escaping="yes">
			     &lt;div&gt;</xsl:text>
		</xsl:if>
				<img src="{$SafeLinkUrl}"></img>
		<xsl:if test="count(preceding-sibling::*) mod 5=4">
				<!--<xsl:if test="count(preceding-sibling::*)!=0">-->
					<xsl:text disable-output-escaping="yes">
			     &lt;/div&gt;</xsl:text>
		</xsl:if>
		<xsl:if test="count(following-sibling::*)=0">

			<xsl:text disable-output-escaping="yes">
			     &lt;/div&gt;
    			&lt;/div&gt;
    			&lt;/div&gt;     			

			</xsl:text>
		<!-- "next page" action -->
		<a class="next browse right"></a>
		</xsl:if>
	</xsl:template>

Save the file, check it in, and then go back to your CQWP and select the item style you just created.

Almost done! We set the web part to a width of 800px for demo purposes so the buttons would show up. It could likely be a little narrower but you’ll need to experiment with that.

The last thing we need to do is download the arrow image from the jQuery tools site and place it with our CSS file. You’re jQuery library should contain the following files:

Modify the a.browse class in the scrollable-buttons.css file to point to the new image URL:

a.browse {
	background:url(hori_large.png) no-repeat;
	display:block;
	width:30px;
	height:30px;
	float:left;
	margin:40px 10px;
	cursor:pointer;
	font-size:1px;
}

Voila. A nice scrollable jQuery picture library using the Content Query Web part. You can always export the 2 web parts, upload them to the Site Collection Web Part Gallery and reuse them easily as well.

Enjoy and any feedback is welcome.

Guest Author: Jason MacKenzie
Intelligence Among Us

Jason has been an IT professional for 12 years and has worked in a variety of roles from software development to managing business solutions for a large international automotive supplier. He has developed mission critical software solutions for the manufacturing industry and has experience in the government and educational fields as well.

Jason is a social networking enthusiast and is currently working as an independent SharePoint architect. Jason helps organizations with strategy and implementation guidance related to architecture, governance, processes as well as hand-holding and facilitating a good group cry every now and again. Jason’s goal is to actively participate in the community and share what he has learned in order to help people and business leverage their investment in this critical platform.