Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: Thumbnail Viewer II: it almost works...when mouseover on tn, you get full sized pic.

  1. #1
    Join Date
    Mar 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Thumbnail Viewer II: it almost works...when mouseover on tn, you get full sized pic.

    BTW, the code is incomplete on the page, which may take some time for the beginner to notice (it took me two days of staring at the code when I finally looked at the page source to compare the code...):

    Posted on the page for users to copy:

    <a href="#" onMouseover="modifyimage('dynloadarea', 0)">image 1 (onmouseover)</a><br>
    <a href="#" onMouseover="modifyimage('dynloadarea', 1)">image 2 (onmouseover)</a><br>
    <a href="#" onClick="return modifyimage('dynloadarea2', 2)">image 3 (onclick)</a><p>

    <div id="dynloadarea" style="width:80px;height:225px"></div>

    <div id="dynloadarea2" style="width:80px;height:200px"></div>

    Viewed source code for that same page:
    <table border="0" width="100%" cellspacing="0" cellpadding="0">
    <tr>
    <td width="20%"><a href="#" onMouseover="modifyimage('dynloadarea', 0)"><img border="0" src="thumb1.jpg" width="50" height="50" style="margin-bottom: 5px"></a><br>
    <a href="#" onMouseover="modifyimage('dynloadarea', 1)"><img border="0" src="thumb2.jpg" width="50" height="50" style="margin-bottom: 5px"></a><br>
    <a href="#" onMouseover="modifyimage('dynloadarea', 2)"><img border="0" src="thumb3.jpg" width="50" height="50" style="margin-bottom: 5px"></a></td>
    <td width="80"><!--webbot bot="HTMLMarkup" startspan --><div id="dynloadarea" style="width:50px;height:225px"></div><!--webbot bot="HTMLMarkup" endspan i-checksum="17728" --></td>
    </tr>
    </table>

    Anyways, my question is that now that I have copied the correct code (from the source), and modified it to suit my pictures...I'm having troubles with the size of the expanded view pictures...even though this code: --><div id="dynloadarea" style="width:50px;height:225px"></div> seems to be the one which controls the size of the expanded pictures, it doesn't work?! It's loading the pictures at the size in which they were originially taken?!...any suggestions?...if you cannot spot the problem, here's my code for your purusal...
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>

    <script type="text/javascript">

    /***********************************************
    * Image Thumbnail Viewer II script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
    * This notice must stay intact for legal use
    ***********************************************/

    //Specify image paths and optional link (set link to "" for no link):
    var dynimages=new Array()
    dynimages[0]=["pictures/gf.JPG", ""]
    dynimages[1]=["pictures/photo radar van/5-0 photo radar van (rear).jpg", ""]
    dynimages[2]=["photo3.jpg", ""]

    //Preload images ("yes" or "no"):
    var preloadimg="no"

    //Set optional link target to be added to all images with a link:
    var optlinktarget=""

    //Set image border width
    var imgborderwidth=0

    //Optionally, change 1.0 and 0.7 below to affect Wipe gradient size and duration in seconds in IE5.5+:
    var filterstring="progidXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"

    ///////No need to edit beyond here/////

    if (preloadimg=="yes"){
    for (x=0; x<dynimages.length; x++){
    var myimage=new Image()
    myimage.src=dynimages[x][0]
    }
    }

    function returnimgcode(theimg){
    var imghtml=""
    if (theimg[1]!="")
    imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
    imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'
    if (theimg[1]!="")
    imghtml+='</a>'
    return imghtml
    }

    function modifyimage(loadarea, imgindex){
    if (document.getElementById){
    var imgobj=document.getElementById(loadarea)
    if (imgobj.filters && window.createPopup){
    imgobj.style.filter=filterstring
    imgobj.filters[0].Apply()
    }
    imgobj.innerHTML=returnimgcode(dynimages[imgindex])
    if (imgobj.filters && window.createPopup)
    imgobj.filters[0].Play()
    return false
    }
    }

    </script>
    <title>Pimp 'n</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>

    <body><table border="0" width="100%" cellspacing="0" cellpadding="0">
    <tr>
    <td width="20%"><a href="#" onMouseover="modifyimage('dynloadarea', 0)"><img border="0" src="pictures/tn_gf.jpg" width="100" height="90" style="margin-bottom: 5px"></a><br>
    <a href="#" onMouseover="modifyimage('dynloadarea', 1)"><img border="0" src="pictures/photo radar van/thumbnails/tn_5-0 photo radar van (rear).jpg" width="100" height="90" style="margin-bottom: 5px"></a><br>
    <a href="#" onMouseover="modifyimage('dynloadarea', 2)"><img border="0" src="thumb3.jpg" width="100" height="90" style="margin-bottom: 5px"></a></td>
    <td width="80"><!--webbot bot="HTMLMarkup" startspan --><div id="dynloadarea" style="width:50px;height:225px"></div><!--webbot bot="HTMLMarkup" endspan i-checksum="17728" --></td>
    </tr>
    </table>
    </body>
    </html>

  2. #2
    Join Date
    Mar 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default I know what I'm asking is difficult...

    Anything in life that's worthwhile is difficult...are you up to the challenge?
    Do you have the cohones?

    Please take the time to let me know what's wrong with the script that it makes the original picture appear (instead of at the size we tell it to) i.e. what I'm saying here is that the code posted on the page http://www.dynamicdrive.com/dynamici...thumbnail2.htm
    is incorrect...!

    Feel free to view my page and let me know where the code is wrong...
    http://members.fortunecity.com/lanci...okeysmokey.htm

    Thanx in advance...
    Last edited by lancelot; 03-05-2005 at 09:34 PM.

  3. #3
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Hi:
    I'm a little confused- do you want the loaded images to in fact all be of the same dimensions, instead of their true dimensions? Most people actually prefer the later? Anyhow, the most straightfoward solution would be to modify the line:

    imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'

    so it reads"

    imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'" width="300px" height="300px">'

    This should cause all loaded images to be of the dimension 300x300

  4. #4
    Join Date
    Mar 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default good question...

    I guess the only reason that I would prefer that the images load to a predefined size is so that they're easier to view for the user, because their original size is huge, and bigger than the average browser window

    Thank you for the response, although, I wish it was sooner.

  5. #5
    Join Date
    Sep 2004
    Posts
    19
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Hi,

    I too noticed that there was no code for the script to re-size the larger images, so to avoid potential lose of quality, i used fireworks and manually resized all the pictures.

  6. #6
    Join Date
    Mar 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default potential loss of quality?

    Is that possible? I let I.E. resize mine...I don't think I noticed degredation of quality?...take a look at http://sirlancelotindustries.0catch....okeysmokey.htm
    hey, when you go to http://caravan.no-ip.org do you get a runtime error on line '2'?

  7. #7
    Join Date
    Mar 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default anyhoo, problem solved, thanx for the help...

    great assistance guys, thanks again.

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default Huge Images

    Just my 2 cents but, shouldn't you get those bad boys into an image program and do a bilinear resampling resize to reduce them to thier display size to save on bandwidth? It would actually make them clearer too.

  9. #9
    Join Date
    Mar 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default display size?

    I reduced them by a factor of their original size so that users wouldn't load an image that they had to scroll horizontally and vertically to see!

    So, why would I want them to be their original size? I'm confused

    maybe you viewed the old code...have a look at the new one...the original images were 1.6MB and they were 1024x800...
    Last edited by lancelot; 03-16-2005 at 05:07 PM. Reason: not complete

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default Image Size

    Well for example, on the new page the image:
    photo%20radar%20van/5-0%20photo%20radar%20van%20(front).jpg
    is:
    745016 bytes
    its display size is set to:
    533px by 400px
    its actual dimensions are:
    816px by 606px
    and even with a broadband cable modem it takes awhile to load, years for dial-up, I'd bet.

    I loaded the original (from the old page) real big one into my image program and got:
    23312 bytes
    actual dimensions:
    533px by 399px
    Even at 70% jpg quality it looks clearer. This is the image I would use.

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
  •