Results 1 to 8 of 8

Thread: image thumbnail viewer II (set image sizes, default image)

  1. #1
    Join Date
    Jun 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question image thumbnail viewer II (set image sizes, default image)

    1) Script Title: Image Thumbnail Viewer II

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...thumbnail2.htm

    3) Describe problem: I would like for this script to use a large default image in the 'loadarea' div when the page is loaded (the first thumb). I would also like to know how to set the max-width and height of the large image when it's thumb is moused over.

    Please help. Did a search for this but couldn't find it. Thanks.

    Justin

  2. #2
    Join Date
    Sep 2006
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hey, I'm not a .js programmer - so, there may be a better way to do this. But, for what it's worth...

    To set a default image I created a style (this way I can change the default image in the future) and added the style to the div tag...

    <div id="loadarea" style="width:340px; height: 220px" class="Slideshow">

    The style adds a background image...

    .Slideshow {
    background: url(IMAGES/Image1.jpg) no-repeat;
    }

    It seems to work. (For what it's worth ;-)

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,920
    Thanks
    43
    Thanked 3,187 Times in 3,151 Posts
    Blog Entries
    12

    Default

    That will work out nicely, especially if you are using:

    Code:
    hideimgmouseout: true, //Hide enlarged image when mouse moves out of anchor link? (if enlarged image is hyperlinked, always set to false!)
    and you want it to return to your default image onmouseout.

    However, if the above is set to false and you want a more robust default content, simply put it in the loadarea division:

    HTML Code:
    <div id="loadarea" style="width: 600px"><a href="some.htm"><img src="default.jpg" border="0" alt="Default Image" title="Whatever"></a><br>Some default Caption</div>
    Once someone activates a larger image via click or mouseover, the above content will be overwritten.

    Now, about a max size for the larger images. These are entirely under your control via an image editing program. In other words, just resize your images to be the size that you want them to be.

    Many image editing programs allow for batch processing of images to 'fit in a box', or you can do this one image at a time in almost any image editing software.

    The bottom line here is that you want to avoid using the browser to resize your images for you. That leads to both extra bandwidth and processor overhead, not to mention load time, transfer bytes, and disk space consumed by your page.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Jun 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    SOLUTION: thanks john, the default image worked.

    PROBLEM: the reason I need to set width/height limits in the javascript is because they are hyperlinked from image upload sites and I don't have control over the originals.

    any ideas on that?

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,920
    Thanks
    43
    Thanked 3,187 Times in 3,151 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by ramtanion View Post
    the reason I need to set width/height limits in the javascript is because they are hyperlinked from image upload sites and I don't have control over the originals.

    any ideas on that?
    Well, it is still a bad idea. If there is any way to get the servers on those upload sites to resize the images or to refuse images that are beyond the allowed dimensions, that would be the way to go. Either of these are possible but are beyond the realm of both this script and javascript in general. However, it does require sufficient access to the servers. You might not have that.

    If it must be done by the browser though, virtually all current version (this includes IE 7 but not IE 6) browsers will allow for this type of styling (goes in the head before the script call):

    Code:
    <style type="text/css">
    #loadarea img {
    max-width:600px;
    max-height:350px;
    }
    </style>
    where loadarea is the id of the element that will hold the larger image. This id is also used as the rev attribute of the link in this script or as the first part of the rev attribute, if the image is linked.

    Now, I did some testing locally and this worked out for IE 6 (goes right after the above style):

    Code:
    <!--[if IE]>
    <script type="text/javascript">
    function ie6getdims(img, mw, mh){
    var w=img.width, h=img.height, rw='auto', rh='auto';
    if(w>mw){
    rw=mw+'px';
    rh='auto';
    img.style.width=rw;
    img.style.height=rh;
    h=img.height;
    }
    if(h>mh){
    rw='auto';
    rh=mh+'px';
    }
    img.style.width=rw;
    img.style.height=rh;
    }
    </script>
    <style type="text/css">
    * html #loadarea img {
    width:expression(ie6getdims(this, 600, 350));
    }
    </style>
    <![endif]-->
    However, it depends upon the browser knowing the actual height and width of the image. This is virtually instantaneous with local images, but IE in general, and IE 6 is no exception, is one of the best browsers at getting this information from an image early in the image loading process. Add to that the fact that using the expression technique in style will usually cause the operation to be repeated over and over, and there is a good chance that this will also work out well live. If it doesn't, don't use it - you can still set the width for IE 6 only:

    Code:
    <style type="text/css">
    * html #loadarea img {
    width:600px;
    }
    </style>
    In the above example, all images will then be 600px wide and their height will scale proportionally to that.

    Added later: I have now actually tested this IE 6 method with a remotely hosted image, and it worked fine.
    Last edited by jscheuer1; 06-20-2007 at 03:06 PM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Apr 2008
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default setting size for IE 7

    Is there something that needs to be done to set the size for IE7, I tried the IE6 fix that you provided but IE 7 just ignores it and shows the full size of the image instead of the size specified.

  7. #7
    Join Date
    Apr 2008
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default Figured it out..

    For those who need it, the following will work for IE7

    <!--[if IE]>
    <style type="text/css">
    #loadarea img {
    width: expression(this.width > 300 ? 300: true);
    }
    </style>
    <![endif]-->

    That is where "loadarea" is your id for your div and 300 is your max width

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,920
    Thanks
    43
    Thanked 3,187 Times in 3,151 Posts
    Blog Entries
    12

    Default

    max-width and max-height work in IE 7, so if your conditional is set properly, no extra code for IE 7 is required. Ex:

    Code:
    <style type="text/css">
    style for all browsers except for IE 6 and lesser IE versions to IE 5
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
    style for IE 5 through and including 6
    </style>
    <![endif]-->
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •