jquery 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.

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

 

[Markbnj]

$('#the_link_element_id').click( function() {
$('#the_image_element').attr('src', 'the url to the negative image');
});

You'll have to add code to make this a toggle, but that's the basic idea.

 

[samslystone]

Hi Mark,

Thank you for your response. Unfortunately I'm not sure how to code the toggle!

S

 

[Markbnj]

Hi Mark,

Thank you for your response. Unfortunately I'm not sure how to code the toggle!

S

Assume you want the label on the link/button to toggle between "Original" and "Negative." The toggle could be as simple as:

$('#the_link_element_id').click( function(event) {
    event.preventDefault();
    if ($(this).html() == 'Negative') {
        $('#the_image_element_id').attr('src', 'the url to the negative image');
        $('this').html('Original');
    } else {
        $('#the_image_element_id').attr('src', 'the url to the original image');
        $('this').html('Negative');
    }
});

 

[PhatoseAlpha]

Might be simpler to just have both images there all the time, one positioned on top of the other, then hide/show the top one as needed.

 

[Markbnj]

Might be simpler to just have both images there all the time, one positioned on top of the other, then hide/show the top one as needed.

True, and that would allow you to use a transition effect when switching between them.

 

[samslystone]

Thank you Mark. Trying to tweak it as we speak. However, I do love the idea from Phatose of having both the positive and the negative images load on the page and have them hide/show. Any ideas on how I could incorporate that into the current page?

S

 

[samslystone]

Hi Mark,

I have tried your code and it still doesn't seem to work. Any ideas?

All the best

S

 

[Markbnj]

Post the code you wrote and a description of what's happening on the page (errors, etc.) and we'll see what's what.