Replacing the Greek Yogurt banner with a slider.

Permalink Browser Info Environment
For my own showcase site http://www.c5magic.co.uk/ 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">
      </div>
    </div>
  </div>
</div>


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,http://www.concrete5.org/marketplace/addons/list-files-from-set... to create the file list with a custom template to display it. I already had a template to display a thumbnail listing http://www.concrete5.org/marketplace/addons/list-files-from-set/for... 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();
 $('#showcase').css('height',212);
 var add_3_images = function(img1,img2,img3){
   var next_template = $(image_template).clone();
   $(next_template).find('img').eq(0).attr('src',img1);
   $(next_template).find('img').eq(1).attr('src',img2);
   $(next_template).find('img').eq(2).attr('src',img3);
   $('#showcase').append(next_template);
};


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:
while(image_set.length>2){
  img1= $(image_set.pop()).attr('href');
  img2= $(image_set.pop()).attr('href');
  img3= $(image_set.pop()).attr('href');
  add_3_images(img1,img2,img3);
}


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.

$("#showcase").awShowcase({
  content_width:960,
  content_height:212,
  interval:4800,
  transition_speed:960,
  transition_delay:0,
  auto:true,
  continuous: true,
  buttons: false,
  arrows: false,
  pauseonover:true,
  thumbnails:false,
  dynamic_heigh:false,
  loading:true
});


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 athttp://www.c5magic.co.uk/

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

I found a JavaScript implementation of the Fisher-Yates shuffle algorithm at http://dzone.com/snippets/array-shuffle-javascript.... 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 http://www.concrete5.org/marketplace/addons/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
JohntheFish
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.