jquery image swap - for galleriffic

Question

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.

http://www.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

Answer 1

I'm not an expert on that gallery, but here's how I would tackle the problem. I would create the negative images and store them in the same folder as the main images, with a neg- added to the end of the file such as:

Painting-001.jpg

Painting-001-neg.jpg

Then add a click event handler for the the negative and positive link that would replace the current large image src with the same image, prepended with "neg-".

$("img#ID_OF_MAIN_IMAGE").src($(this).attr('src').replace('.jpg','-neg.jpg'));

And to restore it:

$("img#ID_OF_MAIN_IMAGE").src($(this).attr('src').replace('-neg.jpg','.jpg'));

You only need one instance of the positive/negative link, not one for each photo.

Let me know if this isn't clear