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

    Tricks of coding an enlarge thumbnail code

    hi,

    What is the secrets or tricks of coding an enlarge thumbnail code?

    This is what I came out with so far...

    Code:
    <script language="JavaScript">
    function enlarge(target)
    	{
    	var element = document.getElementById(target);
    	for(i = 0; i <= 10; i++) 
    		{
    		element.height=23+i;
    		element.width=60+i;
    		}
    	}
    	
    function delarge(target)
    	{
    	var element = document.getElementById(target);
    	element.height=23;
    	element.width=60;
    	}
    </script>
    
    <img src="images/pic1.png" width="60" height="23" id="myImage" onMouseOver="enlarge('myImage');" onMouseOut="delarge('myImage');">
    I would like to do the enlarging effect like this,
    http://www.magictoolbox.com/magicthumb/

    Thanks,
    Lau

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,516
    Thanks
    77
    Thanked 4,379 Times in 4,344 Posts
    I hope you can do better than they do!

    You know, you won't be enlarging the image very much! Only moving from 23x60 pixels to 33x70. Barely noticable.

    Anyway, the trick is timing:

    This is *100%* off the top of my head, but give it a shot:
    Code:
    var growBy = 1.05; // grow by 5% each time...adjust as you'd like
    var targetImg, targetH, targetW;
    
    function enlarge( target, multiplier )
    {
        targetImg = target;
        targetH = Math.round( target.height * multiplier );
        targetW = Math.round( target.width * multiplier );
        doEnlarge( );
    }
    
    function doEnlarge( )
    {
        var h = Math.round( targetImg.height * growBy );
        var w = Math.round( targetImg.width * growBy );
        if ( h > targetH || w > targetW ) 
        {
             targetImg.height = targetH;
             targetImg.width  = targetW;
             return; // quit when we reach or exceed
        }
        targetImg.height = h;
        targetImg.width  = w;
        setTimeout( "doEnlarge( )", 50 ); // grow every 50 milliseconds??  adjust as needed
    }
    One caveat: You should *start* with the FULL SIZED image in your supposed thumbnail. Otherwise, it will look pretty bad if you blow up a tiny image.

    One easy thing: You do *NOT* need to give the initial height *AND* width. If you give just one, the browser will automatically scale the other.

    So say you have an image that is 400px by 300px.

    You might code it thus:
    Code:
    <img src="My400x300image.jpg" width=100 onclick="enlarge(this,4);">
    So by multiplying the starting size, 100, by 4 you end up back at the original size.

    If this doesn't work, tell me.

  • Users who have thanked Old Pedant for this post:

    lauthiamkok (05-29-2009)

  • #3
    Regular Coder
    Join Date
    Dec 2008
    Posts
    117
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    If this doesn't work, tell me.
    hi there, it works perfectly thanks for the help.

    two things,

    1. how do i 'reverse' this code if i want the enlarged image to go back to the original size when we omouseout or onclick the enlarge image?

    Code:
    <img src="images/pic1.png" onMouseOver="enlarge(this,4);" onMouseOut="delarge('myImage');" longdesc="images/pic1_large.png">
    2. i notice that i was silly to enlarge the same image, how if i want to call a new larger image when the thumbnail is triggered? for instance, if the source of that larger image, let's say is in the image tag like this,

    Code:
    longdesc="images/pic1_large.png"
    thanks again,
    Lau

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,516
    Thanks
    77
    Thanked 4,379 Times in 4,344 Posts
    Code:
    var growBy = 1.05; // grow by 5% each time...adjust as you'd like
    var targetImg, targetH, targetW;
    var originalSrc, originalH, originalW;
    var timer = null;
    
    function enlarge( target, multiplier, replace )
    {
        cancelTimeout(timer);
        targetImg = target;
        originalSrc = target.src;
        originalH = target.height;
        originalW = target.width;
        targetH = Math.round( target.height * multiplier );
        targetW = Math.round( target.width * multiplier );
        target.src = replace;
        doEnlarge( );
    }
    
    function doEnlarge( )
    {
        var h = Math.round( targetImg.height * growBy );
        var w = Math.round( targetImg.width * growBy );
        if ( h > targetH || w > targetW ) 
        {
             targetImg.height = targetH;
             targetImg.width  = targetW;
             return; // quit when we reach or exceed
        }
        targetImg.height = h;
        targetImg.width  = w;
        timer = setTimeout( "doEnlarge( )", 50 ); // grow every 50 milliseconds??  adjust as needed
    }
    
    function shrink( )
    {
        cancelTimeout(timer);
        var h = Math.round( targetImg.height / growBy );
        var w = Math.round( targetImg.width / growBy );
        if ( h <= originalH || w <= originalW ) 
        {
             targetImg.height = originalH;
             targetImg.width  = originalW;
             targetImg.src = originalSrc;
             return; // quit when we reach or exceed
        }
        targetImg.height = h;
        targetImg.width  = w;
        timer = setTimeout( "shrink( )", 50 ); 
    }
    
    ...
    <img src="images/pic1.png" 
      onMouseOver="enlarge(this,4,'images/pic1_large.png);"
      onMouseOut="shrink( );"
    >
    Still 100% NOT TESTED. Use at own risk.

  • Users who have thanked Old Pedant for this post:

    lauthiamkok (05-29-2009)

  • #5
    Regular Coder
    Join Date
    Dec 2008
    Posts
    117
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Still 100% NOT TESTED. Use at own risk.
    hi thanks again, i have tested and this is the refine version,

    Code:
    var growBy = 1.05; // grow by 5% each time...adjust as you'd like
    var targetImg, targetH, targetW;
    var originalSrc, originalH, originalW;
    var timer = null;
    
    function enlarge( target, multiplier, replace )
    {
        //cancelTimeout(timer);
        targetImg = target;
        originalSrc = target.src;
        originalH = target.height;
        originalW = target.width;
        targetH = 300;
        targetW = 300;
        target.src = replace;
        doEnlarge( );
    }
    
    function doEnlarge( )
    {
        var h = Math.round( targetImg.height * growBy );
        var w = Math.round( targetImg.width * growBy );
        if ( h > targetH || w > targetW ) 
        {
             targetImg.height = targetH;
             targetImg.width  = targetW;
             return; // quit when we reach or exceed
        }
        targetImg.height = h;
        targetImg.width  = w;
        timer = setTimeout( "doEnlarge( )", 50 ); // grow every 50 milliseconds??  adjust as needed
    }
    
    function shrink( )
    {
        //cancelTimeout(timer);
        var h = Math.round( targetImg.height / growBy );
        var w = Math.round( targetImg.width / growBy );
        if ( h <= originalH || w <= originalW ) 
        {
             targetImg.height = originalH;
             targetImg.width  = originalW;
             targetImg.src = originalSrc;
             return; // quit when we reach or exceed
        }
        targetImg.height = h;
        targetImg.width  = w;
        timer = setTimeout( "shrink( )", 50 ); 
    }

    note that it only work if I took out this line
    Code:
    cancelTimeout(timer);
    (dont know why)

    and I have to determine the targeted height and width beforehand like this,

    Code:
    targetH = 300;
    targetW = 300;
    however, it will cause some bug, if i trigger the onmouseout function before the image is finished enlarging to the targeted size. have a look at the link at the bottom here,

    http://lauthiamkok.net/tmp/enlarge/

    thanks,
    L

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,516
    Thanks
    77
    Thanked 4,379 Times in 4,344 Posts
    SORRY! Should be clearTimeout(timer) !!

    And you *need* that in there to get rid of the bug in onmouseout.

    Yeah, I see the problem with targetH and targetW. It's because we are now changing which image is explanded. You could pass those into the function, *instead* of multiplier, but if it works well enough for you, happiness.

  • Users who have thanked Old Pedant for this post:

    lauthiamkok (05-29-2009)

  • #7
    Regular Coder
    Join Date
    Dec 2008
    Posts
    117
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    SORRY! Should be clearTimeout(timer) !!

    And you *need* that in there to get rid of the bug in onmouseout.

    Yeah, I see the problem with targetH and targetW. It's because we are now changing which image is explanded. You could pass those into the function, *instead* of multiplier, but if it works well enough for you, happiness.
    it is now working perfectly. thank you very much. I will spend sometime on this code to further developing it. thanks!

    by the way, i have posted another thread earlier on about multiple dock menu, but it seems nobody can answer it, would u be able to look at it?

    Multiple lines dock menu

    Many thanks!
    Lau


  •  

    Posting Permissions

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