/    Sign up×
Community /Pin to ProfileBookmark

thumbnails

Copy linkTweet thisAlerts:
Jan 03.2005

I am creating a web site and on 1 of my pages to i need to put several images on it. Eventually, I am considering to use thumbnails for these .jpgs so that the page can load faster. However, before working on this page I have some queries which i would like to have feedback on, so that i will do it the correct way.

  • 1.

    Is it better that for each image I will use 2 jpgs … a resized one for the thumbnail, and another with the normal size.

  • 2.

    I was thinking to use an onMouseOver event on the thumbnail to display the image in larger size, and then use the onMouseOut to get back the size of the thumbnail … are there any pitfalls with this approach ?

  • 3.

    If the above is not an ideal way, and it would be better to use the onClick event to open another window with the actual size image, do I have to create an .html page for each image I am using ?

    • I would appreciate any feedback regarding the above, or maybe other suggestions which may be more suitable to adopt.

    Thank You

    to post a comment
    HTML

    8 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @David_HarrisonJan 03.2005 — [i]Originally posted by Cassius [/i]

    [B]1. Is it better that for each image I will use 2 jpgs ... a resized one for the thumbnail, and another with the normal size.[/b][/quote]    Yes, that way the user only has to load a few small previews rather than all of the large images.

    [i]Originally posted by Cassius [/i]

    [B]2. I was thinking to use an onMouseOver event on the thumbnail to display the image in larger size, and then use the onMouseOut to get back the size of the thumbnail ... are there any pitfalls with this approach ?[/b][/quote]    Yes, the image re-sizing from small to large would cause everything on your page to shift and jump around.

    [i]Originally posted by Cassius [/i]

    [B]3. If the above is not an ideal way, and it would be better to use the onClick event to open another window with the actual size image, do I have to create an .html page for each image I am using ?[/b][/quote]    Yeah, onclick would be a lot better, but no you don't need to create an HTML page for every image. I've attached a pop-up image gallery script that creates the pop-up's on the fly, it also side-steps pop-up blockers and still works for users who have JavaScript disabled (a very important feature as no web-page should ever be JavaScript dependent).

    [upl-file uuid=77a46689-92d2-4938-b5f5-2a564198f480 size=6kB]pop-upwindows.zip[/upl-file]
    Copy linkTweet thisAlerts:
    @pj59Jan 03.2005 — [i]Originally posted by Cassius [/i]

    [B]1. Is it better that for each image I will use 2 jpgs ... a resized one for the thumbnail, and another with the normal size.

    [/B]    [/QUOTE]    Use a small file (smaller file size and image dimensions) for the thumbnails.[B]2. I was thinking to use an onMouseOver event on the thumbnail to display the image in larger size, and then use the onMouseOut to get back the size of the thumbnail ... are there any pitfalls with this approach ?[/B][/QUOTE]Yes, because that will only work for users with javascript available. Besides that, most users will expect that they have to click a thumbnail.[B]3. If the above is not an ideal way, and it would be better to use the onClick event to open another window with the actual size image, do I have to create an .html page for each image I am using ?[/B][/QUOTE]No! Browsers with the capability of displaying images will be able to do so, if the windows url is the image's path. Simply use anchor tags with the images' paths and filenames as the href and target="_blank". If you want to specify the windows' properties, add an onclick to the anchors opening a new window. Example:

    <a href="blah.gif" target="_blank" onclick="window.open('blah.gif','myImg','[COLOR=blue]properties like width, height, enable scrollbars etc. go here[/COLOR]');return false"><img src="blah_small.gif" alt="&nbsp;This is blah&nbsp;" border=0></a>

    Regards PJ

    Edit: Ooops! Too slow. :p
    Copy linkTweet thisAlerts:
    @CassiusauthorJan 03.2005 — Thank you very much for your prompt replies, and for that sample ... it gave me a much clear understanding of how should i go about it.

    My last query which i have is that i am planning that i will have about 6 or 7 thumbnails in one row, what is the best way to put them in: table, div or as in your sample li's

    Thank You
    Copy linkTweet thisAlerts:
    @David_HarrisonJan 03.2005 — Use the markup that you consider most appropriate, then use CSS to position everything. I would consider an unordered list to be the most appropriate markup in this case because you have a list of links.
    Copy linkTweet thisAlerts:
    @CassiusauthorJan 03.2005 — thank you very much for your confirmation. Actually, i have to decided to use an ul as you suggested, and i thought of using the float: left property, so that it will display the images in one row according to the screen resolution.

    Thank you very much.
    Copy linkTweet thisAlerts:
    @David_HarrisonJan 20.2005 — This is an updated version of the script which includes a workaround for IE. It seems that IE wasn't allowing the pop-up to scroll when the image was bigger than the window. Kudos to JohnWorfin for finding that out.

    Well, I've fixed it now with some manipulation of the overflow property and IE seems to be able to fall in line.

    To show that the overflows are doing their job I've set the first image to appear four times actual size in the pop-up, much bigger than the window is, therefore you get scrollbars.

    [upl-file uuid=98a35476-9286-4a06-a4e4-ca2485ab53fd size=6kB]pop-upwindows.zip[/upl-file]
    Copy linkTweet thisAlerts:
    @CassiusauthorJan 20.2005 — thank you for informing me, of your update to that script. I have tested it with IE 6, and now it seems that the scroll bars are working to perfection ?
    Copy linkTweet thisAlerts:
    @JohnWorfinJan 20.2005 — Thank you sooooo much lavalamp!

    It worked perfectly!
    ×

    Success!

    Help @Cassius spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.18,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...