Results 1 to 3 of 3

Thread: adapting jquery gallery with image swap - galleriffic

  1. #1
    Join Date
    Feb 2013
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default adapting jquery gallery with image swap - galleriffic

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    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):

    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.
    Last edited by jscheuer1; 02-14-2013 at 05:54 PM. Reason: minor code update
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Feb 2013
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

Similar Threads

  1. jQuery Drop Line Tabs down arrow image swap
    By tim.chadwick in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 09-02-2009, 06:06 PM
  2. Resolved swap image and swap text
    By DIYPARTYHIRE in forum HTML
    Replies: 1
    Last Post: 08-13-2009, 02:31 PM
  3. CMotion Image Gallery Help - Swap Image Problem
    By jessicabunnythomas in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 04-07-2008, 11:13 AM
  4. Adapting the Image Thumbnail Viewer II to work with html image maps
    By Dare in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 07-05-2007, 07:44 AM
  5. Adapting Image Thumbnail Viewer II
    By Missy in forum Dynamic Drive scripts help
    Replies: 7
    Last Post: 02-07-2007, 09:11 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •