SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard Anat's Avatar
    Join Date
    Oct 2000
    Posts
    1,281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript to automatically display thumbnails

    i'm looking for a compact JS that I can add to an image to make it display the image as a thumbnail - any ideas where I can find one? Is that possible with JS at all? I have looked around but couldn't find anything.
    My Web Publishing Blog: B6S.net - I dofollow but don't spam!
    Follow me on Twitter
    My favorite content writer:
    Steve Snedeker

  2. #2
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Have you tried using the search button (upper right hand corner, this page) with 'thumbnail' as the criteria?

    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still

  3. #3
    SitePoint Wizard Anat's Avatar
    Join Date
    Oct 2000
    Posts
    1,281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have but all I could find was PHP snippets. I was thinking maybe someone knew of a simple JS.
    My Web Publishing Blog: B6S.net - I dofollow but don't spam!
    Follow me on Twitter
    My favorite content writer:
    Steve Snedeker

  4. #4
    SitePoint Evangelist Mr. Brownstone's Avatar
    Join Date
    May 2002
    Location
    Relative
    Posts
    452
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wrote something a while back similar to what you ask for. Heres the code:

    Code:
    function ShrinkToFit ( nMaxWidth ) {
        var nRatio, nHeight, oImg;
        for ( var i = 0 ; i < document.images.length ; i ++ ) {
            oImg = document.images [ i ];
            if ( oImg && oImg.src.match (
                    /\.(png|jpe?g|bmp|gif)$/i
                ) != null ) {
                if ( oImg.width > nMaxWidth ) {
                    oImg.alt =
                        'This image has been ' +
                        'dynamically resized to fit the page.';
                    oImg.title = oImg.alt;
                    nRatio = oImg.width / oImg.height;
                    nHeight = Math.round ( nMaxWidth / nRatio );
                    oImg.style.width = nMaxWidth + 'px';
                    oImg.style.height = nHeight + 'px';
                }
            }
        }
    }
    
    window.onload = function ( ) {
        ShrinkToFit ( 400 ); /* Maximum width of images */
    }
    If an image exceeds the specified maximum-width, it will be resized down to the maximum-width, keeping the original aspect ratio.
    Of course, that's just my opinion. I could be wrong.


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
  •