fancybox gallery with image rollover
I am building an image gallery with jquery fancybox to show before and after photo-retouching.
I would like to add an image rollover effect to the large image in the fancybox overlay using the script below.
When I apply the class="rollover" to the <a> tag the rollover script breaks. The script works fine when I apply the class"rollover" to the <img> tag. However this places a rollover effect on the gallery thumbnail.
Can someone point me how to achieve this rollover effect on the large image please.
//fancybox gallery item
<div class="grid-element">
<a rel="example_group" href="editorial/01_editorial_lg_off.jpg" title=""> // large image
<img id="grid-shadow" src="editorial/01_editorial_sm.jpg" alt=""/></a> //thumbnail
</div>
//rollover script
<script type="text/javascript">
$(document).ready(function() {
$("img.rollover").hover(
function() { this.src = this.src.replace("_off", "_on");
},
function() { this.src = this.src.replace("_on", "_off");
});
});
</script>
Changing the expression
$("img.rollover").hover(
to
$("a.rollover").hover(
does not work