Want hover effect in image gallery that is setup with Fancybox plugin
I have Fancybox running fine and the gallery thumbnails themselves are styled using standard CSS external file with something like:
#gallery img {
border: 1px #ccc solid;
background-color: #FCFCFC;
padding: 2px;
}
What I want is for the border and background to change on hover. So, I wrote an extended function of the existing Fancybox function to try and 'toggle' the class. Here's what I have, but it doesn't work:
- $("a[rel=gallery]").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
$(this).hover(function() {
toggleClass('galleryhover');
});
});
My addition starts with the $(this) which refers to the $("a[rel=gallery]") selector. Any help would be appreciated. You can see the gallery at Gallery View
Be sure to click on Gallery in the menu (it's set up with an Ajax load).