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
    New Coder
    Join Date
    Jun 2009
    Posts
    63
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Fade IN/OUT images onClick

    I'm new to jquery so I hope you'll forgive my ignorance...

    I have a div on a page that I'm hoping can contain multiple images that would fade in and replace an out-going image based on an onClick event.

    Each image is dedicated to it's a href (there are about 30) and they would all be initially hidden...

    I've given the images id's:
    Code:
    <div id="creditTray" class="fadeThis3"> 
    <img id="zs1" class="movtitle" src="directors/dir_resources/zs/zs_t1.png" /> 
    <img id="zs2" class="movtitle" src="directors/dir_resources/zs/zs_t2.png" /> 
    </div>
    the a href's have a class name:
    Code:
    <a class="title" href="javascript:document.movie.SetURL('mov1.mov');" onclick="$('#mediaPlayer').fadeIn(1500);">
    And, because I want to display a title for each one...

    I've been working with:
    Code:
    $(document).ready(function() { 
       $(".title a").click(function() { 
        // do something... 
       }); 
     });
    but I can't seem to get anything to work... any help would be much appreciated!

  • #2
    Senior Coder o0O0o.o0O0o's Avatar
    Join Date
    Jan 2008
    Location
    C:\Windows\System32
    Posts
    1,018
    Thanks
    19
    Thanked 9 Times in 9 Posts
    try using

    PHP Code:
    $("a.title").click(function() { 
    not

    Code:
    $(".title a").click(function() {
    Please de-reputate me
    0o0o0o0

    Its better to rule in Hell then to serve in Heaven

  • #3
    New Coder
    Join Date
    Jun 2009
    Posts
    63
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Ah, right - yes thanks ...

    But actually the problem I'm really having is with the code for hiding all the images I don't want to see... I can fade in an image onclick with $("foo").fadeIn("slow"); but I can't figure out how to fade out the existing image, as there are about 30 links on the page and I won't know which was previously clicked by a user.

  • #4
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    I'm not sure I understand what you're trying to do, it would be easier if we could see the whole page code - is this live anywhere we can see it? I think, if I understand you right, that I'd either fade everything out and then fade in the one you want, or set a flag class (ie: "current") to an image when you fade it in. Or something.

  • #5
    New Coder
    Join Date
    Jun 2009
    Posts
    63
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Hi Spudhead, thx for taking the time to look at my post :]

    I do have a page online but it doesn't have all the images/code for this particular issue as I'm trying to figure it out in advance - you're welcome to take a look at: http:///amls.tv/amls/directorsamls.html (it does, tho', have #creditTray and the anchors from my earlier post).

    Basically what I'm trying to do is something like:

    Code:
    <img1 />
    <img2 />
    <img3 />
    etc
    
    <a onclick= fadeIn(img1).fadeOut(all other img's) />
    <a onclick= fadeIn(img2).fadeOut(all other img's) />
    <a onclick= fadeIn(img3).fadeOut(all other img's) />
    etc
    if that makes any sense.

  • #6
    Senior Coder o0O0o.o0O0o's Avatar
    Join Date
    Jan 2008
    Location
    C:\Windows\System32
    Posts
    1,018
    Thanks
    19
    Thanked 9 Times in 9 Posts
    Try assigning class active and inactive.

    Then onClick --->
    Code:
    this.addClass('active').removeclass('inactive).fadeIN()
    and then
    Code:
    $(.inactive).fadeOut()
    Not proper code but idea
    Please de-reputate me
    0o0o0o0

    Its better to rule in Hell then to serve in Heaven

  • #7
    New Coder
    Join Date
    Jun 2009
    Posts
    63
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Umm... would that work if the link I'm clicking is not the image itself (as the image I want to show is elsewhere on the page...)? Or would it have to be some kind of code like:

    Code:
    $(document).ready(function() {
       $('a').click(function(){
       $('img').addClass('active').removeclass('inactive).fadeIN()
       });
       });
       $(.inactive).fadeOut()
     });
    'cept the above would add .active to all images, right?
    Last edited by piers; 07-15-2009 at 02:26 PM.

  • #8
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    Sort of.

    Each href has a corresponding img, right? So you need something in that href tag to tell it which img to fade in. Currently you're getting round it by calling the function straight from an onclick handler in the href tag itself - that's not ideal.

    What I usually do is give each set of related elements an ID based around a unique value - usually an incrementing number. So you end up with something like this:

    Code:
    <a href="#" id="title_1" class="title">Read More</a>
    <a href="#" id="title_2" class="title">Read More 2</a>
    
    <div id="imageContainer">
    
    	<img id="movtitle_1" src="directors/dir_resources/zs/zs_t1.png" width="264" height="192" />
    	<img id="movtitle_2" src="directors/dir_resources/zs/zs_t2.png" width="264" height="192" />
    
    </div>
    You'll presumably want to hide all your images at first, so do that with CSS:

    Code:
    <style type="text/css">
    #imageContainer img{display:none;}
    </style>
    Now your javascript can identify the images from their respective hrefs, and flag the active ones with classes:

    Code:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
    <script type="text/javascript"> 
    
    $(document).ready(function() {
    	
    	$('a.title').click(function(){
    		
    		// get the ID of the image to fade in
    		var targetID = $(this).attr("id").replace("title_", "movtitle_");
    
    		
    		// if there are any active images in the container
    		if ($('#imageContainer img.active').length > 0){
    		
    			// fade them out (and remove the flag)
    			$('#imageContainer img.active').fadeOut('normal', function(){
    			
    				// when the fade out is done, fade in the new image and flag it
    				$('#'+targetID).fadeIn('normal').addClass('active');
    			
    			}).removeClass('active');
    		
    		
    		//	if there aren't any active images
    		}else{
    			
    			// just fade in the target image and flag it
    			$('#'+targetID).fadeIn('normal').addClass('active');
    			
    		}
    
    	});
    	
    });
    
    </script>

  • #9
    New Coder
    Join Date
    Jun 2009
    Posts
    63
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Yes, of course.... thank you Spudhead - works perfectly :]

    I learned a couple of things here: how to use $().length and a working example of .(attr).replace(), thanks for that too..

    I hope you don't mind my going a little off topic but if you have the time (or the inclination) I've been wrestling with a thorny (for me) cross-browser issue, and your use of the (attr).replace maybe showed me that was one avenue that I was using to attack the problem might not have been the way to go..

    As briefly as possible - the page in question has a QT_WriteOBJECT_XHTML embedded with js (to play multiple Quicktime movies), with the src=mov1.mov and autoplay=true. The div it embeds into is hidden at (document).ready with
    Code:
     $("div.class").css('display', 'none')
    The QT Object can be controlled by javascript, so at my thumbnails I have
    Code:
    <a id="t_1" class="t" href="javascript:document.movie.SetURL('mov2.mov');" onclick="$('#div').fadeIn(1500);">
    So that onclick the QuickTime plugin is instantiated, fades in, and the source of the plugin is changed from mov1.mov to mov2.mov and plays....

    Great - no problems in Safari.

    However in FF, Opera and IE (as far as I've been able to test) onclick results in mov1.mov (the original source) being played instead of mov2.mov - it's only after a second click that these browsers catch up and play mov2.mov.

    I think the reason is that these browsers optimization is configured to void the QT Object when it is hidden.

    Now since a fast doubleclick, even, will bypass the problem (although the user would expect a single click for this event) I've been exploring a couple of options - you can tell me if I'm barking up the wrong tree :]

    Do you think it's possible to use jquery to create a doubleclick from a single click event? Like:
    Code:
    $(document).ready(function () {
     $("a").click(function () { 
          $(this).click();
          delayedClick(); 
        });
    });
     function delayedClick()
            {
               var t=setTimeout("$(this).click();",500)
            }
    or:
    Code:
    $('#mediaPlayer').fadeIn(1500);
       $(function() {
               // to get which ever movie the browser wants to play to 'do something'
                document.movie.Rewind();
       });
               // then when it has 'done something' and is instantiated
               $('#mediaPlayer').queue(function () {
                     // change the plugin source to mov2.mov
                     $(function() {
                        document.movie.SetURL(mov2.mov);
                });
    });
    Probably you can see I'm very new to this - thanks for your patience :]
    Last edited by piers; 07-16-2009 at 12:39 AM.


  •  

    Posting Permissions

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