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

Thread: Image Thumbnail Viewer II IE

  1. #1
    Join Date
    Apr 2005
    Posts
    49
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Image Thumbnail Viewer II IE

    Image Thumbnail Viewer II IE

    I am pretty new to websites and javascript and have found this site a real help.

    I have been getting to grips with the Image Thumbnail Viewer II IE script and got it working quite well with some images.

    I was wondering if anyone knew if there is a way to load a text or html file instead of an image file.

    ie one link loads an image the next link might load an html file, the next another image file etc etc.

    Hope someone who will much cleverer than me could come to my assistance.

    Thanks in advance

    Quiztoon
    Last edited by QuizToon; 04-15-2005 at 10:18 PM.

  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

    Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format for asking a question.

    Try this one out:

    Code:
    <html>
    
    <head><title>Thumb 2</title>
    <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
    * Modified here to accept external text file as well as images
    * Modified for optional captions, read all comments in top
    * of script and in HTML code below.
    * Modifications  John Davenport Scheuer - jscheuer1TAKETHISOUTTOUSEEMAIL@comcast.net
    ***********************************************/
    /*
    IMPORTANT NOTE - In most cases specifying only a small external file for display
    will yield the best results - IMPORTANT NOTE
    Specify image/text file paths and optional link (set link to "" for no link)
    set third parameter to "i" for image file, "t" for text file:                       */
    var dynimages=new Array()
    dynimages[0]=["photo1.jpg", "http://www.cnn.com", "i"]
    dynimages[1]=["photo2.jpg", "http://www.yahoo.com", "i"]
    dynimages[2]=["photo3.jpg", "http://www.google.com", "i"]
    dynimages[3]=["ext.htm", "http://www.google.com", "t"]
    
    //Set scrolling for text content if text content used("yes" or "no"):
    var scrolltext="no"
    
    //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="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"
    
    ///////No need to edit beyond here/////
    
    if (preloadimg=="yes"){
    for (x=0; x<dynimages.length; x++){
    if (dynimages[x][2]=='i'){
    var myimage=new Image()
    myimage.src=dynimages[x][0]
    }
    }
    }
    
    function returnimgcode(theimg){
    var imghtml=""
    if (theimg[1]!="")
    imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
    if (theimg[2]=="i")
    imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'
    if (theimg[2]=="t")
    imghtml+='<iframe src="'+theimg[0]+'" frameborder="'+imgborderwidth+'" height="'+document.getElementById("dynloadarea").style.height+'" scrolling="'+scrolltext+'"></iframe>'
    if (theimg[1]!="")
    imghtml+='</a>'
    return imghtml
    }
    
    function modifyimage(loadarea, imgindex){
    get_cap('');
    if (document.getElementById){
    var imgobj=document.getElementById(loadarea)
    if (imgobj.filters && window.createPopup){
    imgobj.style.filter=filterstring
    imgobj.filters[0].Apply()
    }
    //var frameheight=imgobj.style.height
    //alert(frameheight)
    imgobj.innerHTML=returnimgcode(dynimages[imgindex])
    if (imgobj.filters && window.createPopup)
    imgobj.filters[0].Play()
    return false
    }
    }
    
    function get_cap(cap){
    if (document.getElementById){
    document.getElementById('caploadarea').innerHTML=cap;}
    else if (document.all){
    document.all('caploadarea').innerHTML=cap;}
    else{
    return;}
    }
    
    </script>
    </head>
    
    <body>
    <!--Configure your links below, notice that if you add ;get_cap(this.name); to the onMouseover event
    and a name to the anchor tag, you will get a caption -->
    <a href="#" name="1st Image" onMouseover="modifyimage('dynloadarea', 0);get_cap(this.name);"><img src=thumb1.jpg width=50px height=50px border=0 alt="" title=""></a><br>&nbsp;<br>
    <a href="#" onMouseover="modifyimage('dynloadarea', 1)"><img src=thumb2.jpg width=50px height=50px border=0 alt="" title=""></a><br>&nbsp;<br>
    <a href="#" onMouseover="modifyimage('dynloadarea', 2)"><img src=thumb3.jpg width=50px height=50px border=0 alt="" title=""></a><br>&nbsp;<br>
    <a href="#" name="Above is Some Text Content" onMouseover="modifyimage('dynloadarea', 3);get_cap(this.name);">Text Content</a><p>
    <!--Configure size of display areas below -->
    <div id="dynloadarea" style="width:140px;height:225px"></div>
    <hr align=left width=140>
    <div id="caploadarea" style="width:200px;height:2em;text-align:left"></div></body>
    </html>
    - John
    ________________________

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

  3. #3
    Join Date
    Apr 2005
    Posts
    49
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Image Thumbnail Viewer II IE

    Thanks for your reply I will have a go at t and let you know the outcome.



    Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format for asking a question.


    For the above - Not sure I know where you need the link to go. I did put the title of the thread as the link to the script, I have, as yet, not uploaded anything to the web that uses this script.

    Thanks for your help

  4. #4
    Join Date
    Apr 2005
    Posts
    49
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Red face Not Sure???

    Hi again

    I have now tried out your new script and that does do what I want it to do, thanks for that.

    However, I am having a little problem in the layout size of the dynloadarea div. I have uploaded a test page

    I wondered if you could have a look at the script and see what I have done wrong.

    Incidentally, the file which isnt displaying correctly (link 2) is an html file with a table whose width is less than that of what I think I have set the div at.

    Quiztoon


    If at first you dont succeed, maybe you are stupid (I know I am)

  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 actually thought about that later, replace:
    Code:
    if (theimg[2]=="t")
    imghtml+='<iframe src="'+theimg[0]+'" frameborder="'+imgborderwidth+'" height="'+document.getElementById("dynloadarea").style.height+'" scrolling="'+scrolltext+'"></iframe>'
    with:
    Code:
    if (theimg[2]=="t"){
    scrollHeight=(document.getElementByID)?document.getElementById('dynloadarea').style.height:document.all('dynloadarea').style.height
    scrollWidth=(document.getElementByID)?document.getElementById('dynloadarea').style.width:document.all('dynloadarea').style.width
    imghtml+='<iframe src="'+theimg[0]+'" frameborder="'+imgborderwidth+'" height="'+scrollHeight+'" width="'+scrollWidth+'" scrolling="'+scrolltext+'"></iframe>'
    }
    Sorry about that.
    - John
    ________________________

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

  6. #6
    Join Date
    Apr 2005
    Posts
    49
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    That is great Thanks.

    You truly are a god in human form (or am I going a little over the top in my praise)

    Either way you are a great help, and I dont just mean to me, I have looked at all the posts you have made helping peopler sort out problems, what a star you are.

    It is refreshing to find someone who has the time and patience to help newbies.

    Regards

    Quiztoon

  7. #7
    Join Date
    Apr 2005
    Posts
    49
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Hi again

    Just one more quick question

    How do I set the initial object in the frame to be an html file instead of an image.

    I know that you put the image file here

    <div id="dynloadarea" style="width:572px;height:600px">image file goes here</div>

    but what do i need to put to display an html file instead -or is it not possible

  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

    Quote Originally Posted by QuizToon
    <div id="dynloadarea" style="width:572px;height:600px">image file goes here</div>
    You must have gotten that from another post of mine, the idea will work with an HTML file. The principle at work here is that whatever code you put between this division's tags will get overwritten when the script starts displaying things there. Here is an example of what could go there:
    HTML Code:
    <div id="dynloadarea" style="width:280px;height:225px">
    <iframe src="some.html" frameborder="1" height="225" width="280" scrolling="no">
    </iframe>
    </div>
    Notice how the height & width agree with the division's dimensions (you can play around with this but results could be odd). Scrolling should be set to the same thing as 'var scrolltext=' is set to in the script unless you want the initial scrolling behavior to be different. The frameborder should be set to same value as 'var imgborderwidth=' in the script unless you want different.
    - John
    ________________________

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

  9. #9
    Join Date
    Apr 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Help with DX9 effects

    This is in reference to the nifty script at http://dynamicdrive.com/dynamicindex4/thumbnail2.htm

    The Image Gallery II script.

    I love this thing, but have noticed some odd behavior.

    Under IE6SP1 (XP SP1) at home, the DX9 effects work fine.
    At work, with the same setup, the DX9 effects fail. You can right click on where the picture should be, and get the "Show Picture" option, which when selected does in fact show the picture.

    I don't understandwhy it works under IESP1 on one box and not another. Both IEs are using default (Medium) security settings.

    See the example at http://www.randisphotography.com/gallery2a.htm

    Any and all help is greatly appreciated.

    Thanks

    Thumbkin
    b)

  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

    Very nice pictures and site!
    Quote Originally Posted by thumbkin
    You can right click on where the picture should be, and get the "Show Picture" option, which when selected does in fact show the picture.
    I can't replicate the problem exactly. I'd check this on IE:

    Tools
    -----Internet Options
    ---------------------Advanced
    scroll down to the Multimedia section and make sure 'Show Pictures' is checked. This is not a security setting, it is a user preference. I'm not sure what DX9 is.
    - 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
  •