Touch Optimized jQuery Picture Gallery in SharePoint 2010 and Office 365

Last week, I came across a couple of blog posts that talked about the TouchTouch Gallery which is a jQuery based image viewer that is optimized for touch screen devices. After checking it out, I figured it would be a good thing to throw into SharePoint 2010 (more specifically, my Cribtoso sandbox site) and see how it worked.

TouchTouch Gallery

According to the developer of TouchTouch, it is a jQuery 1.7 plugin that makes it easy to display a set of photos on your site as a touch-optimized photo gallery.

Highlights

• Smooth CSS3 animations and transitions.
• A responsive CSS interface that fills the screen and responds to changes in device orientation.
• Preloads photos only when they are needed.
• Supports swiping through photos.
• Displays onscreen arrows and listens for arrow key presses on desktop browsers.

I don’t know about you but it looks like something that could be pretty useful.

The Set Up

I wanted to make sure that anything that I put together for this plugin could be deployed to Office 365 with minimal effort (by that I mean, without getting anywhere close to the MSOCAF deployment process). For that, I want to ensure that the deployment package is built as a sandbox solution that can easily be deployed to the cloud as a user solution. In following this approach, I’ll take the advice of Mark Rackley (Choice 1 of “The Good Options”) and deploy the CSS and JavaScript to the Site Assets library within my site. The rest is packaged together and deployed as a WSP.

The Code

The solution itself consists of the following items:

• TouchTouch Gallery jQuery code and CSS files
• SharePoint Web Part definition
• Features to make it all work

The figure below details out the solution structure that I put together for this web part:

The TouchTouch Gallery jQuery and CSS files need to be deployed to the Site Assets document library of the Site Collection in order to be utilized by the web part. As a result, these files are included within a SharePoint Module and are declaratively deployed to the Site Assets library. For simplicity, there are no checks within the code to ensure that the Site Assets library exists though this would be necessary for any production deployment. The figure below details out the Elements.xml of the TouchGallerySource module within the solution.

Since we’re working with a SharePoint Sandbox solution, I decided to build out the web part using the Web Part item within Visual Studio. This web part is a simple proof of concept and because of that, there’s no real need to get too advanced and crazy with the development of the web part. For a full production install, there should be a little more thought and discovery into the creation of this web part and it’s true implementation.

In order to map the web part up to a SharePoint Picture Library, it was necessary to include a property for the web part which would allow for the dynamic configuration of the related library. For this implementation, and again to keep it simple, this property is nothing more than a simple string that is the name of the Picture Library and should be located within the site that is local to the page where the TouchTouch Web Part is displayed. My solution provides no error checking to ensure that the selected Picture Library exists, it simply does not show anything if the library is unavailable.

The solution includes two features to make this work, one SPSite scoped feature and one SPWeb scoped feature. The SPSite feature will handle the deployment of the web part to the Site Collection’s Web Part Gallery and the SPWeb scoped feature will handle the deployment of the TouchTouch JavaScript and CSS files to the Site Assets library of the root web.

The Deployment

The solution itself is deployed to the SharePoint environment as a SharePoint User Solution within the site collection. This will allow for a streamlined deployment to O365 which is what I need for this post.

The Results

In the end, we have a web part that includes and references all the necessary jQuery and CSS files, pulls images from a Picture Library within the local site, displays these images using a touch enhanced interface, and within a hosted SharePoint solution such as Office 365.

You can demo the TouchTouch Picture Gallery web part from my Cribtoso sandbox O365 site.

Future Enhancements

This solution is by no means a production ready implementation for this component. Some ideas going forward which that can be brought into this solution include the following:

• Refactor out jQuery into a standalone feature – This would allow for the simple reuse of jQuery functionality into other solutions
• Robust Picture Library Configuration – Currently, the configuration only requires the name of a SPWeb local Picture Library. A more robust configuration option would be preferred for later implementations.
• JQuery Configuration Options – Many if not all jQuery options are defined within the site asset files. These configuration options should be enabled to be set by the end user which would allow for individual usage and configuration of multiple web parts through out the site collection.

In the end, and as I mentioned before, this is not a production ready component but it does show just how easy it is to tie the latest and greatest jQuery plugins into SharePoint.