Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,502
    Thanks
    8
    Thanked 1,089 Times in 1,080 Posts

    Simple JQuery fadein/fadeout BUT with captions

    I found so many simple JQuery galleries where you click a thumb
    and the <div> above them gets loaded with the full-size image.
    There is a fade-out, fade-in effect and it works fine.

    But here's the problem ....
    Under the full-size image, a caption needs to appear. The caption
    is a full sentence that describes the photos.

    I can't find anything anywhere that does the fade-out fade-in AND
    changes the caption as well.

    Here is the site I'm working on ... http://www.salliefindlay.com/2d.php

    This one has no fade-in fade-out effect, because if I do that, the
    caption won't change. I'm just calling a function to change the
    img src and to change the inner.HTML of another div (for the caption).

    Does anyone know where there is an example of what I'm doing ...
    exactly like that, but adding the fade-out fade-in effect?

    This is driving me bananas. I don't want LightBox, or PrettyPhoto,
    just a simple script. Thanks.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    I've done exactly that on my wife's site here:

    http://www.angelabarrow.co.uk/gallery.php

    with this script:

    Code:
    $(document).ready(function(){ 
    
    $("#gallery_thumbnails img").click(function() {
    		//read the new values for the image and the title
    		newTitle = $(this).attr("alt");									
    		newImage = $(this).attr("src").replace("/thumbnails","");
    		
    		if (newImage != $(".topImage").attr("src")){//don't fade in and out if it's the same image - webkit gets upset
    		
    			//
    			$('.topImage').after('<img class="newImage" width="334" height="500" src="'+newImage+'" alt="'+newTitle+'" title="'+newTitle+'"/>');
    		
    			//fade the top image out, replace and fade the new one in
    			$(".topImage").fadeOut(700,function() {
    				$(".topImage").remove();
    				$(".newImage").removeClass('newImage').addClass('topImage');
    			}) ;
    			
    			//fade the caption out, replace and fade the new one in
    			$("#gallerycaption").fadeOut('fast',function() {
    			$("#gallerycaption").html(newTitle);
    			$("#gallerycaption").fadeIn('fast');
    			});
    			return false;
    		}
    })
    
    });
    I'm holding the caption as the alt tag on the thumbnail.
    The script reads the alt tag, finds the new image from the thumbnail src, inserts it behind the original image and then fades the original image out to give a crossfade effect, then fades the caption out, changes it, and fades it back in again.

    It's a couple of years since I wrote this and it could probably be tidied up a bit now, but it does what you want, I think.

  • #3
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,502
    Thanks
    8
    Thanked 1,089 Times in 1,080 Posts
    Which of the four .js files are required for that part of your script?

    <script type="text/javascript" src="/javascript/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="/javascript/switchGalleryImage.js"></script>
    <script type="text/javascript" src="http://simonbattersby.com/javascript/jquery.easing.1.3.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/javascript"></script>

    So far, I've included:

    <script type="text/javascript" src="/js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="/js/switchGalleryImage.js"></script>

    Not sure if I still need to have the other two. And 1.8.2 is the newer version 1.4.2


    .
    Last edited by mlseim; 09-29-2012 at 06:07 PM.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,696
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Look whether it’s working. If it is you know that you don’t need the other scripts.

    However, by the order of inclusion I can tell you that switchGalleryImage.js is most likely not depending on the scripts that come after it. And also, I see nothing in that script that would indicate that jQuery UI or the easing plugin is used.

  • #5
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,502
    Thanks
    8
    Thanked 1,089 Times in 1,080 Posts
    SB65 and Stephan ...

    Thanks.
    I got it working OK. (but not perfect).
    I'm mean OK because I haven't figured-out how to 'fadein' after an 'addClass'.

    Here's my test page:
    http://www.salliefindlay.com/6d.php

    It now fades out OK, and then pops-in fast. Which is fine, but I wish I could
    control the fadein.

    But, thanks for letting me see your function. I modified it for my purposes, but
    it got me on the right path.

    Stephen, as you know ... PHP is my forte, not javascripting [sigh]



    .
    Last edited by mlseim; 09-29-2012 at 11:15 PM.

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    To confirm, you only need jQuery and switchGalleryImage for the fade effect. The easing and UI are used for other purposes on that page. Should have made that clearer.

    My code crossfades the images into each other - looks like you want to fade out the old and then fade in the new. Have a try making your code:

    Code:
    $(document).ready(function(){ 
    
    $("#gallery_thumbnails img").click(function() {
    		//read the new values for the image and the title
    		newTitle = $(this).attr("alt");
    		newCaption = $(this).attr("caption");		
    		newImage = $(this).attr("src").replace("T.jpg","P.jpg");
    		
    		if (newImage != $(".topImage").attr("src")){//don't fade in and out if it's the same image - webkit gets upset
    		
    			//
    			//$('.topImage').after('<img class="newImage" src="'+newImage+'" alt="'+newTitle+'" title="'+newTitle+'" />');
    		
    			//fade the top image out, replace and fade the new one in
    			$(".topImage").fadeOut(500,function() {
    				$('.topImage').after('<img class="newImage" src="'+newImage+'" alt="'+newTitle+'" title="'+newTitle+'" />');
    				$(".topImage").remove();
    				$(".newImage").removeClass('newImage').stop(true).addClass('topImage').hide();
    			    $(".topImage").fadeIn('slow');
    			}) ;
    			
    
    			
    			//fade the caption out, replace and fade the new one in
    			$("#gallerycaption").fadeOut('fast',function() {
    			$("#gallerycaption").html(newCaption);
    			
    			$("#gallerycaption").fadeIn('fast');
    			});
    			return false;
    		}
    })
    
    });
    This seems to work OK - see test page here - although it also helps if the large images are preloaded - as otherwise you can see them loading instead of the fade in. I did this on hat page by including this javascript:

    Code:
    $(document).ready(function () {
        //preload the images
    	var images = [<?php echo $allimagestring?>];
    	var imagearray = [];
    	$(images).each(function(key, value) {
    	
    		var img = new Image();
    		imagearray[key] = $(img).attr('src', value);
    	
    	
    	});
    })
    where $allimagestring is just a list of all the (large) images.

  • Users who have thanked SB65 for this post:

    mlseim (09-30-2012)

  • #7
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,502
    Thanks
    8
    Thanked 1,089 Times in 1,080 Posts
    Oh my ... that is so nice. Thank you.

    I just need to generate the list into the string (that will be easy).
    The fade effects look nice. You saved me a lot of time, and I appreciate it.


    EDIT:

    The site owner originally had made Full and Thumbnail filenames the same
    except for T.jpg and P.jpg ... but now, as I suspected, they mixed up filenames.
    So I had to figure out a way to know what the full-size filename was.

    I ended-up creating my own attributes for the thumbnail <img> tag.
    It works perfectly, but as anyone might comment, it's no longer W3C validated.
    My made-up attributes are not XHTML nor HTML compliant.
    But I don't care, because the doctype is: <!doctype html>

    Having worked on this with my desktop PC (20 inch monitor), I was a bit
    worried about rendering on iPad. But it renders nice. The layout is fluid,
    and the images shrink to fit. I have a few <div>s that don't collapse,
    but it is what it is. Such a plain site, but I wore myself out on the
    fade effects. SB65 provided the clues I needed.

    Here's the final rendering with the fade effects in-place:
    http://www.salliefindlay.com



    .
    Last edited by mlseim; 09-30-2012 at 07:11 PM.

  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Glad it helped.

    If you make your attributes data-photo instead of photo (for example) then they will validate as HTML5. HTML5 allows custom attributes provided they are in the format data-anynameyouwant.

  • #9
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,502
    Thanks
    8
    Thanked 1,089 Times in 1,080 Posts
    SB-65 ...

    Thanks again! I learn new things everyday.


  •  

    Posting Permissions

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