iSkip Expanse Template Tutorial

With iSkip, another jQuery plugin from Ian Tearle, being released for FREE today, here is a nice little tutorial on how to get it to work within your Expanse templates.

Obviously the first thing to do is to add jQuery and the iskip.js files to your javascript folder, and reference it within your header.tpl.html file. Once done you will probably need to head to your gallery.tpl.html file, unless of course you are adding the iSkip to another page. Start by adding a small piece of script within the content loop of your page.

$(function() {# { #} var arr = [ 
 {loop:image_set} 
 '{thumbnail}'{set:_not_last},{/set} 
 {/loop}]; 
 $("#mousemove").iskip({#{images:arr, method:'mousemove', 'cycle':3}#}); 
 {# } #});

For the example, and for my purposes I am using the image set (additional images) of the page to display the images.

Note the use of using special characters within the template.

Next you will need to add the Key image for the set in your image_set loop, this will give the initial image that loads, allowing the javascript to load the other images in the set hidden in the background.

{loop:image_set}
 <div id="image_set"> 
 {set:_first}<img src="{thumbnail}" id="mousemove" />{/set} 
 </div> 
 {/loop}

Now iSkip will work seamlessly inside your templates. There will be an additional tutorial once the jQuery iSkip project allows links on indiviual images.

 

Posted On: Friday, June 26th, 2009 @ 6:10 pm by Ian Tearle

---

0 Comments

There are no comments on this entry. You should add one below.