Results 1 to 6 of 6

Thread: Image Thumbnail Viewer II

  1. #1
    Join Date
    Jun 2005
    Location
    Columbia, SC, USA
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Image Thumbnail Viewer II

    Image Thumbnail Viewer II. Cannot see larger image fade across, onmouseover. Dynamic Drive Code page is: http://www.dynamicdrive.com/dynamici...thumbnail2.htm
    Here is part of my HTML. Thank you.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html><head>
    /***********************************************
    * 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):
    <!--This is my array of images, the large ones that should fade across as they are revealed on mouseover of a smaller thumbnail picture. I don't want to link them.-->
    var dynimages=new Array()
    dynimages[0]=["BUSINESS_PLAZA.jpg", ""]
    dynimages[1]=["BUSSTOP.jpg", ""]
    dynimages[2]=["CAPSTONE.jpg", ""]
    dynimages[3]=["COLONIAL_CENTER.jpg", ""]
    dynimages[4]=["CREPE_GATE.jpg", ""]
    dynimages[5]=["DANCE2.jpg", ""]
    dynimages[6]=["DANCE.jpg", ""]
    dynimages[7]=["DORM.jpg", ""]
    dynimages[8]=["FALL.jpg", ""]
    dynimages[9]=["GATE.jpg", ""]
    dynimages[10]=["GIBBES_GREEN.jpg", ""]
    dynimages[11]=["GRAD_CHILD.jpg", ""]
    dynimages[12]=["INSIDE_STROM.jpg", ""]
    dynimages[13]=["KOGER_CENTER.jpg", ""]
    dynimages[14]=["LAW.jpg", ""]
    dynimages[15]=["LECTURER.jpg", ""]
    dynimages[16]=["LONGSTREET.jpg", ""]
    dynimages[17]=["MCKISSICK.jpg", ""]
    dynimages[18]=["MED_SCHOOL.jpg", ""]
    dynimages[19]=["MELTON_DAVIS.jpg", ""]
    dynimages[20]=["MORNING_SHOE.jpg", ""]
    dynimages[21]=["PETTIGRU.jpg", ""]
    dynimages[22]=["PIANOMAN.jpg", ""]
    dynimages[23]=["PLAY1.jpg", ""]
    dynimages[24]=["PORTRAIT.jpg", ""]
    dynimages[25]=["PRES.jpg", ""]
    dynimages[26]=["SHANNON.jpg", ""]
    dynimages[27]=["SPORTS.jpg", ""]
    dynimages[28]=["STROM_NIGHT.jpg", ""]
    <!--ETC. More images through [35} -->
    //Preload images ("yes" or "no"):
    var preloadimg="yes"
    //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>
    </head><body>
    <!--Mytable with small thumbnails and the number of the larger array image.-->
    table width="315" height="502" border="0"><tr>
    <td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 0)"
    <img src="../images/smBUSINESS_PLAZA.jpg" width="72" height="48"(onmouseover)></a></td>
    <td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 1)">
    <img src="../images/smBUSSTOP.jpg" width="72" height="48"(onmouseover)></a></td>
    <td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 2)">
    <div align="center"><img src="../images/smCAPSTONE.jpg" width="36" height="48"(onmouseover)></div></a></td>
    <td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 3)">
    <img src="../images/smCOLONIAL_CENTER.jpg" width="72" height="48"(onmouseover)></a></td></tr>
    <tr><td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 4)">
    <img src="../images/smCREPE_GATE.jpg" width="72" height="48"(onmouseover)></a></td>
    <td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 5)">
    <img src="../images/smDANCE2.jpg" width="72" height="48"(onmouseover)></a></td>
    <td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 6)">
    <img src="../images/smDANCE.jpg" width="72" height="48"(onmouseover)></a></td>
    <td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 7)">
    <img src="../images/smDORM.jpg" width="72" height="48"(onmouseover)></a></td>
    </tr>
    <tr><td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 8)">
    <img src="../images/smFALL.jpg" width="72" height="48"(onmouseover)></a></td>
    <td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 9)">
    <img src="../images/smGATE.jpg" width="72" height="48"(onmouseover)></a></td>
    <td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 10)">
    <img src="../images/smGIBBES_GREEN.jpg" width="72" height="48"(onmouseover)></a></td>
    <td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 11)">
    <img src="../images/smGRAD_CHILD.jpg" width="72" height="48"(onmouseover)></a></td>
    </tr>
    <tr><td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 12)">
    <img src="../images/smINSIDE_STROM.jpg" width="72" height="48"(onmouseover)></a></td>
    <td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 13)">
    <img src="../images/smKOGER_CENTER.jpg" width="72" height="48"(onmouseover)></a></td>
    <td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 14)">
    <img src="../images/smLAW.jpg" width="72" height="48"(onmouseover)></a></td>
    <td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 15)">
    <img src="../images/smLECTURER.jpg" width="72" height="48"(onmouseover)></a></td>
    </tr>
    <tr><td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 16)">
    <img src="../images/smLONGSTREET.jpg" width="72" height="48"(onmouseover)></a></td>
    <td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 17)">
    <img src="../images/smMCKISSICK_TOP.jpg" width="72" height="48"(onmouseover)></a></td>
    <td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 18)">
    <img src="../images/smMED%20SCHOOL.jpg" width="72" height="48"(onmouseover)></a></td>
    <td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 19)">
    <img src="../images/smMELTON_DAVIS.jpg" width="72" height="48"(onmouseover)></a></td>
    </tr>
    <tr><td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 20)">
    <img src="../images/smMORNING_SHOE.jpg" width="72" height="48"(onmouseover)></a></td>
    <td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 21)">
    <img src="../images/smPETTIGRU.jpg" width="72" height="48"(onmouseover)></a></td>
    <td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 22)">
    <img src="../images/smPIANOMAN.jpg" width="72" height="48"(onmouseover)></a></td>
    <td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 23)">
    <img src="../images/smPLAY1.jpg" width="72" height="48"(onmouseover)></a></td>
    </tr>
    <tr><td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 24)">
    <img src="../images/smPORTRAIT.jpg" width="72" height="48"(onmouseover)></a></td>
    <td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 25)">
    <div align="center"> <img src="../images/smPRES.jpg" width="39" height="48"(onmouseover)></div></a></td>
    <td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 26)">
    <img src="../images/smSHANNON.jpg" width="72" height="48"(onmouseover)></a></td>
    <td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 27)">
    <div align="center"><img src="../images/smSPORTS.jpg" width="32" height="48"(onmouseover)></div></a></td>
    </tr>
    <tr><td width="72" height="52"><a onMouseover="modifyimage('dynloadarea', 28)">
    <!--ETC. this has the rest of the small photos from the table-->
    </tr></table></div>
    <!--My div tag to display the large image on the page.--><div id="dynloadarea" style="width:320px; height:514px;"></div>
    </table></body></html>

  2. #2
    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

    You don't see the larger images fade across or you don't see them at all? If you don't see them at all - this:
    Code:
    <!--This is my array of images, the large ones that should fade across as they are revealed on mouseover of a smaller thumbnail picture. I don't want to link them.-->
    is an html comment, it doesn't belong inside a script. If you have any of these inside your actual script, they will probably break it. A javascript comment looks either like this:
    Code:
    // This is a one line comment
    or like this:
    Code:
    /*this is
    a multiline
    comment*/
    Also if you missed any of these empty quotes (highlight red):
    Code:
    dynimages[5]=["DANCE2.jpg", ""]
    or the comma's that precede them, it will break the script. To really diagnose a script of this nature I need a working (or not working) demo. The snippet you provide, although extensive, is insufficient to determine what the problem might actually be. The best thing is:

    PLEASE: Include the URL to your problematic webpage that you want help with.
    - John
    ________________________

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

  3. #3
    Join Date
    Jun 2005
    Location
    Columbia, SC, USA
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Image Thumbnail Viewer II

    Thanks for your reply. I checked the empty quotes and the commas, they were all there. On the actual URL I did not have the comment statements in there, I only added them to the email to send the request for help, to try to identify parts for anybody who tried to help. This will help more, here is the URL for the page I am trying to use the Thumbnail View on:
    http://www.sc.edu/~bwilson/uis/media...ces/photo.html

    If anybody can offer help on why you can't see the large image when you mouseover the small thumbnails, please let me know. Thanks
    bwilson

  4. #4
    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

    That did help! This might not be the whole problem but, must be corrected first and probably is the only thing:

    Where the script is looking for the larger images, they are not there. Change all of these:
    Code:
    dynimages[0]=["BUSINESS_PLAZA.jpg", ""]
    to look more like this:
    Code:
    dynimages[0]=["../images/BUSINESS_PLAZA.jpg", ""]
    - John
    ________________________

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

  5. #5
    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

    I discovered another problem. Due to your layout, the images still will not display. You also need to change this:

    HTML Code:
    	     <!--webbot bot="HTMLMarkup" startspan --><div id="dynloadarea" style="width:320px; height:514px;"></div><!--webbot bot="HTMLMarkup" endspan i-checksum="17728" -->
    to this:

    HTML Code:
    <div id="dynloadarea" align="center" style="width:320px;height:514px;float:right;z-index:200;position:relative;top:300px;left:-2px!important;left:-3px;overflow:hidden"></div>
    Also, even with the corrected paths I mentioned in my previous post, two large images are still unavailable:

    MCKISSICK.jpg

    and

    WB_STADIUM.jpg

    Make sure these actually exist and are named & located properly in the code.

    One other thing, you might want to crop 3px off the left edge of:

    CREPE_GATE.jpg

    It has a 3px black line running down it there.
    Last edited by jscheuer1; 06-21-2005 at 07:36 PM.
    - John
    ________________________

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

  6. #6
    Join Date
    Jun 2005
    Location
    Columbia, SC, USA
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks so much John, I really appreciate you taking the time to make some recommendations to make the Image Thumbnail Viewer II work on my URL. I can't express how great this looks and works now. Couldn't have pulled it off without your input. Thank you, thank you, thank you.
    Becky

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
  •