Dartway Interactive

Recently I’ve found this jQuery plugin and I build a menu for a worpdress blog. This plugin is thought for a cool thumbnail gallery and not for a menu, ‘cause the elements haven’t a link.

So, here I explain you how to add one on every image.

I open the jquery.capSlide.js and on line 16 where it was:

$this.css({'width':w , 'height':h, 'border':o.border});
$this.hover(

I added a line:

$this.css({'width':w , 'height':h, 'border':o.border});
$this.click(function(){window.open(o.url,'_self');});
$this.hover(

If you want to open the url in an other page change ‘_self’ with ‘_blank’.

In addition on line 42 where it was the default values:

$.fn.capslide.defaults = {
    caption_color : 'white',
    caption_bgcolor : 'black',
    overlay_bgcolor : 'blue',
    border : '1px solid #fff',
    showcaption : true
};

just add the ‘url’ value:

$.fn.capslide.defaults = {
    caption_color : 'white',
    caption_bgcolor : 'black',
    overlay_bgcolor : 'blue',
    border : '1px solid #fff',
    showcaption : true,
    url: 'http://www.dartway.com'
};

So, you’re ready to add the url variables in the plugin usage:

$("#capslide_img_cont").capslide({
    caption_color : 'white',
    caption_bgcolor : 'black',
    overlay_bgcolor : 'black',
    border : '',
    showcaption : false,
    url: 'http://www.dartway.com'
});

If you wanna add a cursor pointer when roll over the image just add:

cursor:pointer;

on ‘css/style.css’ in the ‘overlay’ and ‘ic_caption’ css class.

For any suggestion or support to implement this feature on jCapSlide jQuery Plugin, write us!!