adapting jquery gallery with image swap - galleriffic

[samslystone]

Hi all

I have bit of a fiddly one here but I am basically attempting to put an image swap function into Galleriffic. I have been adapting the jquery Galleriffic image gallery to fit a client's needs and all is going well apart from this one function that I need to add.

susanyounganimation.com/test/drawings/carnival.html

Beneath the large image on the left is the text 'negative/positive'. The client wants the user to have the option to see a negative i.e. inverted version of the image when one clicks on 'negative' and then the image to revert back to the original when they click positive'. I have every image in the gallery as a negative version (exactly the same dimensions etc) so what I need to do is simply replace the current image with another when one clicks on the negative or positive text beneath.

Hope this all makes sense. Can anyone help me with some script that will enable this? Any comments welcome as I am at my wits end with this one!

All the best

S

[jscheuer1]

Something like:

http://home.comcast.net/~jscheuer1/s...sanyoung-h.htm

Note: I didn't know where the negative images were so I used the second image as a place holder for it, except for the second image, where I used the first image as a placeholder.

Use your browser's "view source" to get the code.

The base tag can be removed once the page is in its proper location.

Also Note: The version of jQuery used is too low to support the jQuery fade transition I'm familiar with. I updated to 1.4.4, but others would probably also work. The thing when picking a jQuery version for something like this is you generally want the latest sub version that doesn't break your existing code. And likewise the latest sub sub version. But 1.4.4 seems fine, so there's no need to worry about it unless a problem occurs.

The speed of the fade in for the negative/positive images is set here (from the added on page script code):

				$(document).click(function(e){
					if($(e.target).parent('.caption').size()){
						var $curimg = $('.image-wrapper.current img').stop(true).eq(0), o = $curimg.position();
						$('.image-wrapper.current img').not($curimg).remove();
						$curimg.after(
							$('<img style="position: absolute; top: 0; left: 0">')
								.attr('src', e.target.href).css({top: o.top, left: o.left, opacity: 0})
								.animate({opacity: 1}, {duration: 1500, complete: function(){$curimg.remove();}})
						);
						e.preventDefault();
					}
				});

Any questions - just ask.

[samslystone]

JOHN JOHN JOHN!

You are a life saver! Thank you so much not only for the solution but for your clarity. It works beautifully (and ends a week of asking the same question in multiple forums to no avail).

All the best

Samuel