SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery Image Replacement not working

    Hello,

    I have a big image and several small thumbnails. Every time the user clicks on one of the thumbs, I want the big image to update. This is my code:
    Code:
    $("#thumbs a").click(function() {
    		var largePath = $(this).attr("href");
    		$("#largeImg").attr(src: largePath);
    		return false;
    	});
    And the HTML:
    Code:
    <ul id="thumbs">
    	<li><a href="images/01.jpg"><img src="images/thumbs/01.jpg" /></a></li>
    	<li><a href="images/01.jpg"><img src="images/thumbs/02.jpg" /></a></li>
    	<li><a href="images/01.jpg"><img src="images/thumbs/03.jpg" /></a></li>
    </ul>
    <div>
    	<img id="largeImg" src="" />
    </div>
    Although, the thumb image gets always displayed in an empty window, as if there is no "return false". If I click Back in the browser, I see that the big image has been indeed changed just before the link executed. Why is my "return false" not firing and preventing the browser from following the link?

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,700
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by petz_e View Post
    Hello,

    I have a big image and several small thumbnails. Every time the user clicks on one of the thumbs, I want the big image to update. This is my code:
    Code:
    $("#thumbs a").click(function() {
    		var largePath = $(this).attr("href");
    		$("#largeImg").attr(src: largePath);
    		return false;
    	});
    And the HTML:
    Code:
    <ul id="thumbs">
    	<li><a href="images/01.jpg"><img src="images/thumbs/01.jpg" /></a></li>
    	<li><a href="images/01.jpg"><img src="images/thumbs/02.jpg" /></a></li>
    	<li><a href="images/01.jpg"><img src="images/thumbs/03.jpg" /></a></li>
    </ul>
    <div>
    	<img id="largeImg" src="" />
    </div>
    Although, the thumb image gets always displayed in an empty window, as if there is no "return false". If I click Back in the browser, I see that the big image has been indeed changed just before the link executed. Why is my "return false" not firing and preventing the browser from following the link?
    That happens when the links don't have the click event attached to them. Why would that happen? It happens when you attempt to add a click event when no body content yet exists.

    If that is the cause, you need to place your jQuery code in a callback, so that jQuery can then execute your code after the body content becomes available.

    Code javascript:
    $(function () {
        // your jQuery code in here
    });

    If it's not due to that, then we'll need to see a test page that demonstrates the problem, so that the fuller context can be examined in which to find the actual cause.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your reply!

    I have put the JS in the document.ready event like this:
    Code:
    $(document).ready(function() {
    	
    	$.fn.preload = function() {
    	    this.each(function(){
    	        $('<img/>')[0].src = this;
    	    });
    	}
    	
    	var imgSwap = [];
    	$(".for_preload").each(function() {
    		imgUrl = this.href;
    		imgSwap.push(imgUrl);
    	});
    	$(imgSwap).preload();
    	
    	$("#viewImage_thumbs a").click(function() {
    		var largePath = $(this).attr("href");
    		var largeAlt = $(this).attr("title");
    		$("#largeImg").attr({ src: largePath, alt: largeAlt });
    
    		if ($(this).css("border-top-width") == "0px") {
    			$("#viewImage_thumbs a").animate({borderTop: "0"}, 160);
    			$(this).animate({borderTop: "5px solid #fac400"}, 400);
    		}
    		return false;
    	});
    })
    Is this what you mean by callback?

    Patrick

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,700
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by petz_e View Post
    Is this what you mean by callback?
    Yes, that's right.

    Have you tried jQuery's preventDefault method, instead of return false?

    If that doesn't help, there might be something elsewhere helping to cause the problem.
    A test page that demonstrates the problem will help us to trace the issue down to its root cause.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •