We recently finished a brand-new website for Diablo Precision, Inc. Diablo does precision machining for major industries & consumer goods. You may have some of their parts in your home’s appliances.

Conor Kelly, the owner and CEO, likes to give visitors a tour of his manufacturing facility in Hollister. I took this tour myself; the facility is impressive! It’s extremely clean, open and well-ventilated.

It turns out that Kelly is a good photographer as well as a machinist. With the new site, he wanted to give visitors a “virtual tour” just like he does in real life. He took a large number of big high-quality photos and asked us to create a full-screen slideshow with them. Essentially turning the web browser into a big tour of Diablo Precision’s inner workings.

This kind of slideshow isn’t available in Sitefinity CMS by default. So what did we do? We created it!

The tour starts when you click this “Take Our Online Facilities Tour” thumbnail on Diablo’s Facilities page:

DiabloTour1

We’ll link you to the page in a moment. First, let’s explain how we created the slideshow.

How the Slideshow Tour Works

To create a slideshow in a CMS isn’t really difficult. We only required 3 parts:

  1. A Sitefinity image library to house the images Kelly wanted to use.
  2. A widget that we could place onto a page & activate the tour. (This is the code behind the thumbnail you saw in the screenshot above.)
  3. And a plugin to make the “slide” function work.

Kelly provided plenty of images. We coded the widget; we’ve done so for years now in Sitefinity. The plugin however was a bit of a challenge. As I said, Sitefinity doesn’t have slideshow function built in (but I don’t know of *any* CMS which does). We needed a separate plugin to make it work.

Several exist out there. After some research, we decided to use the Supersized Full Screen Image Slider jQuery plugin.

Given that it was written using jQuery, we knew Sitefinity would recognize it. But as you often find out with custom development…we hit a snag.

The Challenge: Two Display Processes Arguing

The Image Slider plugin uses jQuery to assign background images to the HTML element of a web page. That makes it tricky to use in a webpage with a user interface – like Sitefinity’s rendered pages. The plugin tried to hijack the page display mechanism!

This meant we had two elements arguing with each other – Sitefinity and the plugin. Both “knew” the right way to render images. And alone, either way would work fine. The trick was making them play nice together.

Our senior developer, Brent, arranged the solution with a little finesse. He prepared a special master page template that was void of detail, but would allow you to assign whatever elements you wanted. Essentially, the Facilities page uses a separate template than the rest of the site (even though it looks exactly the same).

Using this “empty” template, you can place the jQuery plugin on a page & configure it however you like. Sitefinity allows it to run without issue.

The Results: Working Plugin, Working Slideshow

Now that the Image Slider plugin worked, we could store the images in their library and connect the widget. A little configuration lets you determine where to collect the images from, how long you want them to display in the slideshow, and what type of transition you want (sliding over, fade-out, carousel).

The results? Very satisfying for the CMS’ administrators, and the website users who get to enjoy this tour of Diablo Precision’s machining facilities. Here’s one slide as an example:

DiabloTour2

See the full Slideshow Tour for yourself at: DiabloPrecision.com – Facilities

——

This is one example of Sitefinity customization. We have more on the blog – and more coming up!

How to Create a “Virtual Tour” Slideshow with Sitefinity and jQuery
Tagged on:                     

Leave a Reply

Your email address will not be published. Required fields are marked *