Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help to fix the code-Popup Window

    Hi,
    I desperately need help after hours of reading 1000s of forums just to be able to have a thumbnail which will enlarge in a new window.
    I've found this script in one of the forums, and I am trying to apply it to my page. But when I click on a thumbnail, although it's opening a pop-up window, it also enlarges the image in the current browser. How should I fix this?
    I also need to do the same thing with a .swf file. How can I have a flash movie enlarge when clicked?

    Any help is appreciated thanks in advance!!

    <HTML>
    <Head>
    <Script type="text/javascript">

    var largerView = "";
    var winToggle = false;

    function openFullSize(Pix,isDesc){

    if (winToggle){largerView.close()}
    document.getElementById('nullIMG').src = Pix;
    var wStr = document.getElementById('nullIMG').width;
    var offsetW = wStr;
    wStr = wStr+20;
    wStr = "width="+wStr;
    var hStr = document.getElementById('nullIMG').height;
    var offsetH = hStr;
    hStr = hStr+20;
    hStr = "height="+hStr;
    var lStr = (screen.width-50-offsetW)/2;
    lStr = "left="+lStr;
    var tStr = (screen.availHeight-50-offsetH)/2;
    tStr = "top="+tStr;
    largerView = window.open(Pix,"FullSize","toolbar=0,status=0,"+tStr+","+lStr+","+wStr+","+hStr+"");
    largerView.document.title = isDesc;
    winToggle = true;
    }

    function buildSupport(){

    var styleStr = "<style>.thumb{cursorointer;border:solid blue 2px}</style>"
    var divStr = "<Div style='Position:Absolute;Top:-2000'><IMG ID='nullIMG'>&nbsp</Div>"
    document.write(divStr);
    document.write(styleStr);
    }

    buildSupport();

    window.onunload=function(){

    if (winToggle && !largerView.closed){largerView.close()}
    }
    </Script>
    </Head>
    <Body>
    <Img Src='1/Any.jpg' width='120' height='90' class='thumb' onclick="openFullSize(this.src,'This is a description')" alt='Click to enlarge'>
    <Img Src='1/Some.jpg' width='120' height='90' class='thumb' onclick="openFullSize(this.src,'This is another description')" alt='Click to enlarge'>
    <!-- The following line must be the LAST line in the Body -->
    <Script> document.getElementById('nullIMG').src = document.images[1].src </Script>
    </Body>
    </HTML>

    I've changed the last part to:
    <Img Src='images/Any.jpg' width='120' height='90' class='thumb' onclick="openFullSize(this.src,'This is a description')" alt='Click to enlarge'>
    <Img Src='images/Some.jpg' width='120' height='90' class='thumb' onclick="openFullSize(this.src,'This is another description')" alt='Click to enlarge'>
    <!-- The following line must be the LAST line in the Body -->
    <Script> document.getElementById('nullIMG').src = document.images.src </Script>
    </Body>
    </HTML>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,191
    Thanks
    80
    Thanked 4,562 Times in 4,526 Posts
    This makes no sense:
    Code:
    <Script> document.getElementById('nullIMG').src = document.images.src </Script>
    document.images is an *ARRAY*. There's no such thing as a .src property of an array.

    The code just seems way overly complex. And, too, when you use the full size image for your thumbnail, as you are doing, it means that *ALL* the full size images have to load into the main page. If they are really large images, and if you have several of them, this can take a very long time for a user with a slow connection. If at all possible, you really ought to supply both full size image files and thumbnails.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,191
    Thanks
    80
    Thanked 4,562 Times in 4,526 Posts
    Here's my version of that:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    var largerView = null;
    
    function openFullSize(pix)
    {
        if ( largerView != null ) largerView.close();
        var hidden = document.getElementById('nullIMG');
        hidden.src = pix.src;
        var pixw = hidden.width;
        var pixh = hidden.height;
        var lStr = (screen.width-50-pixw)/2; // may not work right in all browsers?
        var tStr = (screen.availHeight-50-pixh)/2;
        var props = "toolbar=0,status=0,width="+(pixw+20)+",height="+(pixh+20)
                  + ",left="+lStr+",top="+tStr;
        largerView = window.open( pix.src,"FullSize", props );
        largerView.document.title = pix.alt;
    }
    </script>
    <style type="text/css">
    div#NOSHOW {
        position:absolute; 
        top=-2000px; 
        visibility: hidden;
    }
    img.thumb {
        height: 90px;
        width: 120px;
    }
    </style>
    </head>
    <body>
    <div id="NOSHOW">
    <img id="nullIMG" alt=""/>
    </div>
    <img src="pic1.jpg"  class="thumb" alt="This is the 'ANY' picture" onclick="openFullSize(this)" />
    <img src="pic2.jpg" class="thumb" alt="This is the 'SOME' picture" onclick="openFullSize(this)" />
    </body>
    </html>
    (Images changed to match what I had available.)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •