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 = [ 
$("#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.

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

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 @ 5:10 pm by Ian Tearle


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

Leave a comment

Be kind

If you would like to discuss anything about this post, please be polite and add your comments below.



No HTML is allowed. All links, and new lines will be automagically converted to HTML for you.
Notice to spammers, all links will be sanitized with rel="nofollow".

Contact Me

Get In Touch

If you would like to discuss anything about your next project please drop me a line.



Projects start at £99.00 per month
We normally book 2–3 months in advance.


No matter how small your project is, or if the prices above scare you, please do get in touch, I shall always listen and will advise freely alternative ideas or solutions. If you are a charity, let's talk!

Find Me On