July 11, 2015

Easy cross-site slide-show

Table of Contents

I recently implemented a small slide-show banner for showcasing products, in this case books, that works across sites. I did it with a nice JQuery slideshow plugin and iframes. I happened to be inserting it into Wordpress pages.

The Problem

My client has three separate websites he uses for distinct blogs, but as an author he wants to showcase the books he’s published on each of them. It will be a major problem to implement three distinct solutions, even if they are identical, for each blog, and update each one whenever something changes (such as a new book coming out). Since all sites were Wordpress, one option was to migrate to a multi-site wordpress install and use a common plug-in. But this would require a tremendous amount of server shuffling for a single piece of shared content and seemed like overkill.

My Solution

I chose a different route; have you noticed how YouTube gives you nifty sharing code to embed a video on any site? This code uses an iframe to insert your favorite YouTube cat video. In principle, if I could find a suitable stand-alone slideshow application, I could host it independently and then embed it just as you embed a YouTube video; that way, any changes can just be made on the original file and all sites that are calling it will immediately reflect the changes. It went together slickly (and I used only a fraction of the functionality available) and it was a breeze to embed. You can see how it works below, followed by the steps to produce it.

Your browser does not support iframes.

1. Javascript / jQuery Slideshow solution: Jssor Slider

After some looking around the web I found the perfect solution, the impressive Jssor Slider. This slider allows for both jQuery and non-jquery solutions, meets our requirement for stand-alone functionality, and has a wide range of supported slide-show types; it even allows for custom in-slideshow animations. Buzzing through the available slideshow styles I decided the best match was the full width slider, which would save me any trouble of fiddling with custom widths as I developed my simple slideshow. It is also well-designed, supporting responsive mobile-first design and allowing for touch- and mouse-sliding.

2. Set up a server

Next step: decide upon a place to host your slide show from where the end-points will request it. To do this I just quickly logged in to my hosting provider’s (I use Bluehost) CPanel and added a sub-domain to one of my domains, sliders.orys.us.

3. Build your slideshow & upload

Since it’s a javascript solution and not an online plug-in, Jssor makes for easy off-line development. I downloaded the Jssor code and started checking out the demos and examples; finally, I made myself a copy of the full-width slider and got to playing with it, adding my own images. Because the slide show I was producing was very minimal, I chopped out all the animations and captions and disabled the index images, as well as the back-ground images. I did a little custom styling, using CSS :before tags to implement non-image right- and left-navigation arrows when you hover over the image:

.jssora21l:before, .jssora21r:before {
    font-size:4em;
    font-weight:bold;
    color: #999;
}
.jssora21l:hover:before, .jssora21r:hover:before {
    color: #222;
}
.jssora21l:before {
    content: "←";
}
.jssora21r:before {
    content: "→";
}

by avoiding the use of images, I can more flexibly control the size and/or color of the navigation arrows.

Jssor lets you put just about anything you want in to a slide, so making the book images link to the appropriate Amazon.com page was not hard. Finally, once I’d developed everything off-line to my heart’s content, I uploaded them to my server at sliders.orys.us in the appropriate location. Be sure to upload the entire file structure of your development, so you have all the images and script files you need to make it work.

4. Embed and serve

Once we’ve uploaded the sliders it’s time to embed them on each of the client Wordpress sites; this is the only part of the process that bears repetition, and needs be done only once unless you make some drastic alterations to the slideshow (like changing its intended viewing dimensions). This can be performed on any (or no) platform; for example, my target sites use wordpress while this blog is Drupal, but the solution is the same. All you need is a place that allows you to insert HTML code.

For Wordpress the solution is to create a text widget in the appropriate location (for me, it was one of the sidebars); then, just insert the few lines of iframe embed code into that location:

<iframe src="https://sliders.orys.us/Sliders/tca-amazon-img_slider.html" width="90%" scrolling="no" style="border: 0;">
    Your browser does not support iframes. 
</iframe>

And… voila! All done. However, Wordpress made it easy to add one more nifty feature that met my client’s needs.

With this sort of a promo display it is desirable to make it a fixed floater, meaning that it will stay with the viewer as they scroll down and read an article. Wordpress has a nice little plug-in that makes this a breeze: Q2W3 Fixed Widget (Sticky Widget) . Once you’ve installed this on your Wordpress install, the little text widget you made in step 4 will have a “fixed widget” checkbox; check that guy and suddenly you have a widget that will stick when the user scrolls by, precisely as we desired! Note that if your site has other floating/sticky elements, you may need to go to the Fixed Widget settings and change the top border to control the position at which it sticks.

And that’s all there is to it! Of course, with all the options that Jssor gives, I may decide soon to revisit my slide show and explore advanced options. In the meanwhile, you can see it in glorious cross-site glory in the following locations, remembering that after adding the text widget and the fixed widget, I can edit the base slider in one place and the changes will be displayed everywhere.

Published Sites (home-page and example sub-page)

Scroll down through the sub-page posts to see the slider in action.