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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Dec 2008
    Posts
    117
    Thanks
    14
    Thanked 0 Times in 0 Posts

    jquery: an error fromcreating image caption from alt

    Hi,

    I made this code to create image caption from the alt sometime ago. But recently I notice there is a bug or an error.

    The width of the div of the image caption should be following the width of the individual image. It picks up the width of each images successfully. But it only take the width of the last image when the code has ran completely.

    This is the html code,

    Code:
    <div id="content">
    
    <p><img src="bw1.jpg" alt="Ut wisi enim ad minim veniam" width="300" /></p>
    <p><img src="bw2.jpg" alt="pic 2" width="550"/></p>
    <p><img src="lights1.jpg" alt="pic 3" width="500"/></p>
    
    </div>
    this is the jquery,

    Code:
    $(document).ready(function(){
    
    $("#content img").each(function () {
    	var imgwidth = $(this).width();
    	var title = $(this).attr("title");
    	var alt = $(this).attr("alt");
    	alert(imgwidth);
    	
    	$("<div class='image_description'>"+"<span class='image_title'>"+ title +"</span>"+"<span class='image_alt'>"+ alt +"</span>"+"</div>").insertAfter(this);
    	$('.image_description').css({
    		color: '#666666',
    		fontSize: '11px',
    		margin: '0px 0px 0px 0px',
    		clear: 'both',
    		width: imgwidth
    		});
    	
    	$('.image_title').css({
    		fontStyle: 'italic'
    		});
    	
    	});
    	
    });
    this is the live link,

    http://lauthiamkok.net/tmp/jquery/jquery.image_caption/

    Many thanks if u know why...

    Thanks,
    Lau

  • #2
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    Hmm. Something very strange is going on with jQuery's width() function. In my FF3.5, it's returning 675 for that top image, and 26 for the other two. I'm not sure what's happening here.

    However, css("width") does return the correct value. And with the added bonus that it's got the "px" on the end - you don't have this when you use the width to set the CSS of the image_description div, and I think that may have caused you problems.

    Anyhow, using the css width seems to sort it out.

  • #3
    Regular Coder
    Join Date
    Dec 2008
    Posts
    117
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Spudhead View Post
    Hmm. Something very strange is going on with jQuery's width() function. In my FF3.5, it's returning 675 for that top image, and 26 for the other two. I'm not sure what's happening here.

    However, css("width") does return the correct value. And with the added bonus that it's got the "px" on the end - you don't have this when you use the width to set the CSS of the image_description div, and I think that may have caused you problems.

    Anyhow, using the css width seems to sort it out.
    hey thanks i have fixed it - just need to chain the function like this,

    Code:
    $("<div class='image_description'>"+"<span class='image_title'>"+ title +"</span>"+"<span class='image_alt'>"+ alt +"</span>"+"</div>").insertAfter(this).css({
    		color: '#666666',
    		fontSize: '11px',
    		margin: '0px 0px 0px 0px',
    		clear: 'both',
    		width: imgwidth
    		});


  •  

    Posting Permissions

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