Click doesnt quite work like hover where you can have the mouse over and mouse out functions.

I would suggest using something like:

jQuery(function(){
     var c=1, x=1;
    $(".img-swap").click(function(){
        c = x == 5 ? -1 : c;
	c = x == 1 ? 1 : c;
        y = x + c;
        this.src = this.src.replace("_"+x,"_"+y);
	x = y;
    });
});

Change the “5″ to whatever number of images you want to use. The above code will sequentially increase the image number until 5 and then descend back to 1

I’m trying to alter this script to go thru a series of images on a click instead of a hover. the first click to go to image 2 works, but then that is it. When I use hover instead of click, the mouseover gets me to 2, and the mouseout gets me to 3 but then that is it. Can anyone see what I am missing?

<script type="text/javascript">
jQuery(function(){
     $(".img-swap").click(
          function(){this.src = this.src.replace("_1","_2");},
          function(){this.src = this.src.replace("_2","_3");},
		  function(){this.src = this.src.replace("_3","_4");},
		  function(){this.src = this.src.replace("_4","_5");},
          function(){this.src = this.src.replace("_5","_1");
     });
});
</script>

Here is the CSS for the single image sprite

.close_win {
	 position: absolute;
	 left: 280px;
	 top: 256px;
	 width: 26px;
	 height: 13px;
	 background: url(../images/modal-close-icon.png) 0 0 no-repeat;
}

Here’s the jQuery where I tried using two images, but I don’t know to write it for the One image. (The code below didn’t work, I’m doing something wrong. I tried

[/toggle

” as well, nothing. But I don’t want to use two images anyway.)

$(document).ready(function(){
	$(".close_win").hover(function() {
		$(this).attr("src","modal-close-icon_off.png");
			}, function() {
		$(this).attr("src","modal-close-icon_on.png");
 });

}); 

Here’s my HTML:

 <h2 class="nf_h2822">BOOKS AVAILABLE&nbsp;&nbsp;&nbsp;<a id="popupClose" class="close_win"><!--<span ></span> --></a></h2>

Since I’m just learning this and I know I’m missing something probably simple, but would you mind revising/rewriting/deleting the code above so that it will work?

Thank you
Chris

Animate the image using a top margin of -13px and then animate back to a margin of zero.

If you are using this method though with an image sprite you dont need CSS and are better just adding the image as a background image and change the background position by 13px on hover.

The image is within an anchor tag since it closes a modal box onClick. Thanks!!!

Unfortunately using this code its not possible to fade in and fade out at the same time since there is only one image. The closest I have come so far is to just fade out then fade back in:

jQuery Demo: Image Swap Crossover Fade

What is the code that you inserted into the page?

There should be just the jquery code, which you can add to the header.php file and then the images, which have class “img-swap” and end with _off

Thanks for any help.

If you want to change the CSS class of the div tags you can use the following:

$(".div").hover(function(){
    $(this).toggleClass('hover');
});

Where “.div” is the class of your div tags and “hover” is the CSS class that you want to add – See demo

Not quite sure how you want to apply it to Galleriffic but you could change the selector for the hover function to select the Gallerific images – e.g. $(‘.image-wrapper a img’)

Very nice script and most solid swap image solution that I came across – thank you!
I am new to jQuery, and have trouble to implement this function to Galleriffic image gallery: Displayed image HTML is dynamically produced so I am uncertain where in code to apply “img-swap” class? Any tips would be appreciated? Thank you!