SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Nov 2002
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    multiple pop up windows

    Hi,
    I have a web page with several thumbnail images displayed. These are linked to the full size images that appear in pop up windows.
    I have two questions:
    Firstly, is it possible to size the pop up windows the same dimensions of the images within? If not, how can I center the image displayed in the pop ups?
    Also, I have tried and failed to get the pop up to appear in the centre of the screen. Can anyone help?
    Thanks in advance,
    Dee

  2. #2
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could try something like...
    Code:
          function popupImage(imgUrl)
          {    
            var settings = 'top=0,left=0,width=1,height=1';
            var win = window.open('','', settings);
            var html = '<html>';
            html += '<body style=\'margin: 0px;\'>';
            html += '<img src=\\'' + imgUrl +'\\'/>';
            html += '</body>';
            html += '</html>';
            win.document.write(html);
            var w = win.document.images[0].width;
            var h = win.document.images[0].height;
            var x = (screen.width - w) / 2;
            var y = (screen.height - h) / 2;
            win.resizeTo(w, h);
            win.moveTo(x, y);
          }
    Or just "popup" the image inside the same document...
    Code:
          var imgPopup = null;
          function popupImage2(imgUrl)
          {
            try
            {
              document.body.removeChild(imgPopup);
            }
            catch(e){}
            imgPopup = document.createElement('img');
            imgPopup.src = imgUrl;
            var x = (document.body.clientWidth - imgPopup.width) / 2;
            var y = (document.body.clientHeight - imgPopup.height) / 2;
            imgPopup.style.position = 'absolute';
            imgPopup.style.left = x + 'px';
            imgPopup.style.top = y + 'px';
            imgPopup.style.zIndex = 100;
            imgPopup.style.border = '4px ridge #ffffff';
            imgPopup.onclick = function(){document.body.removeChild(imgPopup);};
            document.body.appendChild(imgPopup);
          }
    I think the latter method is easier, faster and less annoying than opening a new window

    Edit: Fixed this incorrect line:
    html += '<img src=\'' + imgUrl +'\'/>';
    to
    html += '<img src=\\'' + imgUrl +'\\'/>';
    Last edited by jofa; Nov 28, 2002 at 14:07.

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2001
    Location
    UK, London
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    would it not be simplier to have something like this, or is that too basic?

    Code:
    function popUpWindow() 
    
    {	     var popup = window.open("imagelocation","imagename","left=100,top=100,height=500,width=650,menubar=no,scrollbars=no");
                 popup.focus();
            }
    If you can talk, you can sing, if you can walk, you can dance!!

  4. #4
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by cjdesigns
    would it not be simplier to have something like this, or is that too basic?

    Code:
    function popUpWindow() 
    
    {	     var popup = window.open("imagelocation","imagename","left=100,top=100,height=500,width=650,menubar=no,scrollbars=no");
                 popup.focus();
            }
    The questions were:
    1. How to size the window for different images
    2. Center the popup window

    Your example is only correct if the image size is 650x500 and the screen size is 850x700

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2001
    Location
    UK, London
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i stand corrected!
    If you can talk, you can sing, if you can walk, you can dance!!

  6. #6
    SitePoint Zealot Egghead's Avatar
    Join Date
    Feb 2002
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I like your code jofa.

    Utilising cjdesigns "simple" function, this may be useful...
    Code:
    function popUpWin(win, name, wd, ht)
    {
      var lft = Math.floor((screen.width - wd) / 2);
      var tp = Math.floor((screen.height - ht) / 2);
      var wname = name;
      var wstat = 'menubar=no,scrollbars=no,width='+wd+',height='+ht+',left='+lft+',top='+tp;
      var w = window.open(win,wname,wstat);
    }
    Open a popup window showing "image.jpg" with whatever width and height (example using 600x400):

    <a href="javascript:popUpWin('image.jpg','win_name',600,400)">Open popup</a>

    If you incorporate jofa's use of "win.document.images[0].width/height;" you can do away with having to specify the image width and height.

    Regards,
    Egghead


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
  •