Results 1 to 3 of 3

Thread: Popup Images?

  1. #1
    SeK612's Avatar Poster BT Rep: +10BT Rep +10
    Join Date
    Nov 2002
    Location
    UK
    Posts
    718
    How do you do pop up images (using Javascript) and is it easy?

    At the moment I have galleries of images and each one opens in a new window using the _blank target frame. I have been looking for a way to pop the images up in a smaller window as often the image does not fill the whole blank page. Is this easy to do (in terms of amount of extra coding needed and whether new pages are needed to be made) and is it necessary for the type of page I'm making?

    You can see one of the pages here

    Thanks

    SeK 612

  2. Internet, Programming and Graphics   -   #2
    Poster
    Join Date
    Jun 2003
    Location
    Yet to be determined
    Posts
    993
    Code:
    ==============================================================
    Script:     Auto-Sizing Image Popup Window
    
    Functions:  Use this script to launch a popup window that
                automatically loads an image and resizes itself
                to fit neatly around that image. The script also
                places a title you set in the titlebar of the 
                popup window. Any number of images can be launched
                from a single instance of the script.
                
    Browsers:   NS6-7 & IE4 and later
                [Degrades functionally in NS4]
    
    Author:     etLux
    ==============================================================
    
    
    
    STEP 1.
    Inserting the JavaScript <script> In Your Page
    
    Insert the following script in the <head>...</head> part
    of your page. Take special care not to break any of the lines;
    they must be exactly as shown.
    
    Set the variables as per the instructions in the script.
    
    
    
    <script>
    
    // Script Source: CodeLifter.com
    // Copyright 2003
    // Do not remove this notice.
    
    // SETUPS:
    // ===============================
    
    // Set the horizontal and vertical position for the popup
    
    PositionX = 100;
    PositionY = 100;
    
    // Set these value approximately 20 pixels greater than the
    // size of the largest image to be used (needed for Netscape)
    
    defaultWidth  = 500;
    defaultHeight = 500;
    
    // Set autoclose true to have the window close automatically
    // Set autoclose false to allow multiple popup windows
    
    var AutoClose = true;
    
    // Do not edit below this line...
    // ================================
    if (parseInt(navigator.appVersion.charAt(0))>=4){
    var isNN=(navigator.appName=="Netscape")?1:0;
    var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}
    var optNN='scrollbars=no,width='+defaultWidth+',height='+defaultHeight+',left='+PositionX+',top='+PositionY;
    var optIE='scrollbars=no,width=150,height=100,left='+PositionX+',top='+PositionY;
    function popImage(imageURL,imageTitle){
    if (isNN){imgWin=window.open('about:blank','',optNN);}
    if (isIE){imgWin=window.open('about:blank','',optIE);}
    with (imgWin.document){
    writeln('<html><head><title>Loading...</title><style>body{margin:0px;}</style>');writeln('<sc'+'ript>');
    writeln('var isNN,isIE;');writeln('if (parseInt(navigator.appVersion.charAt(0))>=4){');
    writeln('isNN=(navigator.appName=="Netscape")?1:0;');writeln('isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}');
    writeln('function reSizeToImage(){');writeln('if (isIE){');writeln('window.resizeTo(100,100);');
    writeln('width=100-(document.body.clientWidth-document.images[0].width);');
    writeln('height=100-(document.body.clientHeight-document.images[0].height);');
    writeln('window.resizeTo(width,height);}');writeln('if (isNN){');       
    writeln('window.innerWidth=document.images["George"].width;');writeln('window.innerHeight=document.images["George"].height;}}');
    writeln('function doTitle(){document.title="'+imageTitle+'";}');writeln('</sc'+'ript>');
    if (!AutoClose) writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()">')
    else writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()" onblur="self.close()">');
    writeln('<img name="George" src='+imageURL+' style="display:block"></body></html>');
    close();  
    }}
    
    </script>
    
    
    
    ==============================================================
    
    
    
    STEP 2.
    Calling the Image Popup from Links in Your Page
    
    This is the form of the function:
    
    popImage("url_of_image","title_of_image")
    
    Use the relative or absolute path of the image where we show
    url_of_image.  This is the url of the image you wish to show
    in the auto-sizing popup window.
    
    Use any text you wish where we show title_of_image. This is 
    the title that will appear in the titlebar of the popup. (Note:
    do not use single- or double-quotes within a title.)
    
    Caution:  Be careful to place both values within quotes.
    See the samples below.
    
    
    Example 1:  Launching from a text link
    
    <a href="javascript:popImage('http://SomeSite.com/SomeImage.gif','Some Title')">
    Click Here
    </a>
    
    
    Example 2:  Launching from an image link
    
    <a href="javascript:popImage('http://SomeSite.com/SomeImage.gif','Some Title')">
    <img src="YourImage.gif" border="0">
    </a>
    
    
    Example 3:  Launching from a form button
    
    <form>
    <input type="button" value="Click Here" onClick="popImage('SomeImage.gif','Some Title')">
    </form>
    
    
    
    ============================[end]=============================

  3. Internet, Programming and Graphics   -   #3
    SeK612's Avatar Poster BT Rep: +10BT Rep +10
    Join Date
    Nov 2002
    Location
    UK
    Posts
    718
    Thanks. The images do a weird pre loading thing though (a small box pops up at first while the image loads and then the full image appears). Its not so bad on Broadband but it might get annoying. I guess it doesn't matter too much.

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
  •