Replacing the Greek Yogurt banner with a slider.

Permalink Browser Info Environment
For my own showcase site I wanted to replace the header banner with a slider showing some of my underwater photographs. Naturally, to do this I decided to develop using a jQuickie block to do the clever stuff coupled with an HTML block for the basic DOM.

I decided to use the Awkward Slider code for its simplicity. This is not my favourite general purpose slider and is tied to a single rendering on a page, but it is easy to use with trivial markup. It is bundled with the free 'jQuickie Bundles 1' add-on because of its licence conditions.

With the banner being 960 x 212 pixels, that breaks into 3 approximately normally proportioned landscape images from an SLR camera (320 x 212 is approximately 3:2), so my slider would work in groups of 3 without having to worry about cropping.

I wanted a banner to render before the slider was ready, so the initial task was to replace the header image with an html block to show 3 images in a way that would display immediately and also serve as a template for the script to follow.

<div id="showcase" style="clear:both" class="showcase">
  <div class="showcase-slide">
    <div class="showcase-content">
      <div class="showcase-content-wrapper">
        <img src="/files/path/to/image1.jpg" width="320" height="212">
        <img src="/files/path/to/image2.jpg" width="320" height="212">
        <img src="/files/path/to/image3.jpg" width="320" height="212">

I extracted the paths of the initial image files by temporarily creating an image block.

Next I needed a listing of the images in a file set, the set that would form my banner. I used 'List files from set' by Mesuva, to create the file list with a custom template to display it. I already had a template to display a thumbnail listing and simply removed the thumbnail part from it. The list is rendered hidden using a Concrete5 block design with the css 'display:none;'.

Finally, to the jQuery that takes this list of files and turns it into a continuous slider. It breaks down into 4 main parts, but all within a single jQuickie block.

First, make a template from the existing html block and a function to replicate it with 3 new images:
var image_template =  $('#showcase .showcase-slide').last().clone();
 var add_3_images = function(img1,img2,img3){
   var next_template = $(image_template).clone();

Next, extracting the image set from the list. This is repeated 3 times as a simple way of avoiding edge cases where a list is not a perfect multiple of 3. (I also used this to randomise, but we will come back to that later). The 'List files from set' block was previously given a class of 'jl-header-set'.
var base_set = $('div.jl-header-set a').get();
var image_set = base_set.concat(base_set,base_set);

The above parts are then used to build the markup for the slider as groups of 3 images:
  img1= $(image_set.pop()).attr('href');
  img2= $(image_set.pop()).attr('href');
  img3= $(image_set.pop()).attr('href');

The actual slider is then set running. A trick for smoothest operartion is to make all the times multiples of the width of 960. That way, all the internal maths works out as nice clean integers.

  continuous: true,
  buttons: false,
  arrows: false,

On the jQuickie block Load Resources tab I selected to load jQuery in the header and Awkward Showcase in the footer. On the Options tab I deselected the 'eval' option because it would be a bit too complex for an eval to be reliable, ticked to put it in a jQuery ready handler and left the script inline (though it would also work in the header or footer, inline is easier for debugging).

You can see the results at

A final tweak was to add some shuffling of the image list.

I found a JavaScript implementation of the Fisher-Yates shuffle algorithm at The original code didn't validate with jsHint, so I added a base to the parseInt to make it respectable.
var shuffle = function(o){
  for(var j, x, i = o.length; i; j = parseInt(Math.random()*i,10), x = o[--i], o[i] = o[j], o[j] = x);
  return o;

Then the image set could be shuffled by a change to:
var image_set = shuffle(base_set).concat(shuffle(base_set),shuffle(base_set));

For convenience I also added a Front End File Uploader to allow me to add images to the set and thus to the banner whenever I wanted.

Type: Discussion
Status: New
View Replies:

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You have not specified a license for this support ticket. You must have a valid license assigned to a support ticket to request a refund.