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.
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:
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'.
The above parts are then used to build the markup for the slider as groups of 3 images:
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.
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.
Then the image set could be shuffled by a change to:
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.
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:
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: | Archived |
