Results 1 to 6 of 6

Thread: Image Thumbnail Viewer in iFrame Show Across Whole Window?

  1. #1
    Join Date
    Mar 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Image Thumbnail Viewer in iFrame Show Across Whole Window?

    Re: http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

    Is there a way I can get this script to have its clickable thumbnails on a page in an iFrame but the large images to appear over the whole window (so appearing in the _top or _parent target)?

    I'm normally good with this, but couldn't figure this out today when trying.

    Thanks!

    -- DynoDog

  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

    On the page inside the iframe, use this version of the script:

    Code:
    <script type="text/javascript">
    
    /***********************************************
    * Image Thumbnail viewer-  Dynamic Drive (www.dynamicdrive.com)
    * Last updated Sept 26th, 03'. This notice must stay intact for use
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    var ie=document.all
    var ns6=document.getElementById&&!document.all
    
    function ietruebody(){
    return (document.compatMode && document.compatMode!="BackCompat" && !window.opera)? document.documentElement : document.body
    }
    
    function enlarge(which, e, position, imgwidth, imgheight){
    if (ie||ns6){
    crossobj=document.getElementById? parent.document.getElementById("showimage") : parent.document.all.showimage
    if (position=="center"){
    pgyoffset=ns6? parseInt(parent.pageYOffset) : parseInt(parent.ietruebody().scrollTop)
    horzpos=ns6? parent.pageXOffset+parent.window.innerWidth/2-imgwidth/2 : parent.ietruebody().scrollLeft+parent.ietruebody().clientWidth/2-imgwidth/2
    vertpos=ns6? pgyoffset+parent.window.innerHeight/2-imgheight/2 : pgyoffset+parent.ietruebody().clientHeight/2-imgheight/2
    if (window.opera && window.innerHeight) //compensate for Opera toolbar
    vertpos=pgyoffset+parent.window.innerHeight/2-imgheight/2
    vertpos=Math.max(pgyoffset, vertpos)
    }
    else{
    var horzpos=ns6? parent.pageXOffset+e.clientX : parent.ietruebody().scrollLeft+event.clientX
    var vertpos=ns6? parent.pageYOffset+e.clientY : parent.ietruebody().scrollTop+event.clientY
    }
    crossobj.style.left=horzpos+"px"
    crossobj.style.top=vertpos+"px"
    
    crossobj.innerHTML='<div align="right" id="dragbar"><span id="closetext" onClick="bud.closepreview()">Close</span> </div><img src="'+which+'">'
    crossobj.style.visibility="visible"
    return false
    }
    else //if NOT IE 4+ or NS 6+, simply display image in full browser window
    return true
    }
    
    function closepreview(){
    crossobj.style.visibility="hidden"
    }
    
    function drag_drop(e){
    if (ie&&dragapproved){
    crossobj.style.left=tempx+event.clientX-offsetx+"px"
    crossobj.style.top=tempy+event.clientY-offsety+"px"
    }
    else if (ns6&&dragapproved){
    crossobj.style.left=tempx+e.clientX-offsetx+"px"
    crossobj.style.top=tempy+e.clientY-offsety+"px"
    }
    return false
    }
    
    function initializedrag(e){
    if (ie&&event.srcElement.id=="dragbar"||ns6&&e.target.id=="dragbar"){
    offsetx=ie? event.clientX : e.clientX
    offsety=ie? event.clientY : e.clientY
    
    tempx=parseInt(crossobj.style.left)
    tempy=parseInt(crossobj.style.top)
    
    dragapproved=true
    document.onmousemove=drag_drop
    }
    }
    
    document.onmousedown=initializedrag
    document.onmouseup=new Function("dragapproved=false")
    
    </script>
    Just for the fun of it and so that the page can be tested independantly (only the close part won't work), include the style section and the:

    HTML Code:
    <div id="showimage"></div>
    as per the instructions on the demo page. Your activating links, of course, also belong on this page.

    Now, on the top page, use the style section and the showimage division as well. Also include your iframe (which for this to work, must be named 'bud') and some bootstrap code, here is a demo top page:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    
    #showimage{
    position:absolute;
    visibility:hidden;
    border: 1px solid gray;
    }
    
    #dragbar{
    cursor: hand;
    cursor: pointer;
    background-color: #EFEFEF;
    min-width: 100px; /*NS6 style to overcome bug*/
    }
    
    #dragbar #closetext{
    font-weight: bold;
    margin-right: 1px;
    }
    </style>
    </head>
    <body>
    <div id="showimage"></div>
    <iframe name="bud" src="thumb_1.htm" width="100" height="150" scrolling="no" frameborder="0"></iframe>
    <script type="text/javascript">
    var ie=document.all
    var ns6=document.getElementById&&!document.all
    
    function ietruebody(){
    return (document.compatMode && document.compatMode!="BackCompat" && !window.opera)? document.documentElement : document.body
    }
    
    function drag_drop(e){
    if (ie&&dragapproved){
    bud.crossobj.style.left=tempx+event.clientX-offsetx+"px"
    bud.crossobj.style.top=tempy+event.clientY-offsety+"px"
    }
    else if (ns6&&dragapproved){
    bud.crossobj.style.left=tempx+e.clientX-offsetx+"px"
    bud.crossobj.style.top=tempy+e.clientY-offsety+"px"
    }
    return false
    }
    
    function initializedrag(e){
    if (ie&&event.srcElement.id=="dragbar"||ns6&&e.target.id=="dragbar"){
    offsetx=ie? event.clientX : e.clientX
    offsety=ie? event.clientY : e.clientY
    
    tempx=parseInt(bud.crossobj.style.left)
    tempy=parseInt(bud.crossobj.style.top)
    
    dragapproved=true
    document.onmousemove=drag_drop
    }
    }
    document.onmousedown=initializedrag
    document.onmouseup=new Function("dragapproved=false")
    </script>
    </body>
    </html>
    Added Info: You can configure your iframe to suit, as long as it is named 'bud'.
    Last edited by jscheuer1; 03-12-2006 at 06:54 PM. Reason: add info
    - John
    ________________________

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

  3. #3
    Join Date
    Mar 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Thanks & One More Q

    Ah, now I know where I went wrong. Thanks!!

    It works great - had to change the iFrame from "bud", of course, since that's not my iFrame name - and has no bugs (at least in IE6).

    There's one thing I didn't think about before, though: I have a CSS menu on the main page and the menu is the frontmost layer. I forgot about this and so the images are appearing below the menu. I'm too tired right now to think of a way to make the images over the menu?

    Thanks again for the good script alteration!

    -- DynoDog

  4. #4
    Join Date
    Mar 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up Found the Z-Index

    Never mind my previous question; I finally found my z-index for my CSS menu. It was set to 999999, which is why all the lower numbers weren't working *grin*. Now my images are at 1000000 so are above the menu.

  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

    As long as you are mentioning z-indexes, it is worth noting that, as far as I can tell in the Opera browser, the iframe itself will always be on top of the images, no matter what type of z-index ordering is set-up for them. Even with the display division following the iframe in the document's stacking order would not prevent this and that is usually the normal way (without using z-index) to resolve something like that. So, unless someone knows how to get absolutely positioned content over an iframe in Opera, this scheme will have that one drawback in that browser.
    - John
    ________________________

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

  6. #6
    Join Date
    Feb 2008
    Location
    Perth, AUS
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I'm stuck on this also... please advise.

    I am using your exact demo top page code and here is the code to my iFrame page named thumb_1.htm:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>iFrame Thumbnail Viewer</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript">
    
    /***********************************************
    * Image Thumbnail viewer-  Dynamic Drive (www.dynamicdrive.com)
    * Last updated Sept 26th, 03'. This notice must stay intact for use
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    var ie=document.all
    var ns6=document.getElementById&&!document.all
    
    function ietruebody(){
    return (document.compatMode && document.compatMode!="BackCompat" && !window.opera)? document.documentElement : document.body
    }
    
    function enlarge(which, e, position, imgwidth, imgheight){
    if (ie||ns6){
    crossobj=document.getElementById? parent.document.getElementById("showimage") : parent.document.all.showimage
    if (position=="center"){
    pgyoffset=ns6? parseInt(parent.pageYOffset) : parseInt(parent.ietruebody().scrollTop)
    horzpos=ns6? parent.pageXOffset+parent.window.innerWidth/2-imgwidth/2 : parent.ietruebody().scrollLeft+parent.ietruebody().clientWidth/2-imgwidth/2
    vertpos=ns6? pgyoffset+parent.window.innerHeight/2-imgheight/2 : pgyoffset+parent.ietruebody().clientHeight/2-imgheight/2
    if (window.opera && window.innerHeight) //compensate for Opera toolbar
    vertpos=pgyoffset+parent.window.innerHeight/2-imgheight/2
    vertpos=Math.max(pgyoffset, vertpos)
    }
    else{
    var horzpos=ns6? parent.pageXOffset+e.clientX : parent.ietruebody().scrollLeft+event.clientX
    var vertpos=ns6? parent.pageYOffset+e.clientY : parent.ietruebody().scrollTop+event.clientY
    }
    crossobj.style.left=horzpos+"px"
    crossobj.style.top=vertpos+"px"
    
    crossobj.innerHTML='<div align="right" id="dragbar"><span id="closetext" onClick="bud.closepreview()">Close</span> </div><img src="'+which+'">'
    crossobj.style.visibility="visible"
    return false
    }
    else //if NOT IE 4+ or NS 6+, simply display image in full browser window
    return true
    }
    
    function closepreview(){
    crossobj.style.visibility="hidden"
    }
    
    function drag_drop(e){
    if (ie&&dragapproved){
    crossobj.style.left=tempx+event.clientX-offsetx+"px"
    crossobj.style.top=tempy+event.clientY-offsety+"px"
    }
    else if (ns6&&dragapproved){
    crossobj.style.left=tempx+e.clientX-offsetx+"px"
    crossobj.style.top=tempy+e.clientY-offsety+"px"
    }
    return false
    }
    
    function initializedrag(e){
    if (ie&&event.srcElement.id=="dragbar"||ns6&&e.target.id=="dragbar"){
    offsetx=ie? event.clientX : e.clientX
    offsety=ie? event.clientY : e.clientY
    
    tempx=parseInt(crossobj.style.left)
    tempy=parseInt(crossobj.style.top)
    
    dragapproved=true
    document.onmousemove=drag_drop
    }
    }
    
    document.onmousedown=initializedrag
    document.onmouseup=new Function("dragapproved=false")
    
    </script>
    </head>
    <body>
    <a href="../images/example.jpg" rel="thumbnail"><img src="../images/thmb_example.jpg" border="0"></a>
    <script type="text/javascript" src="./thumbnailviewer.js"></script>
    </body>
    </html>
    Am i meant to include the js and css files in this page? I have tried every combination and can't get it to work.

    It still won't open on top of the parent window

    Thanks

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
  •