open / popup window dynamic size based on large image

Discussion in 'Javascript' started by ryanoasis, Feb 11, 2008.

  1. ryanoasis

    ryanoasis Guest

    Have thumbnail images and clicking on image opens new window with a
    different image (larger version) but each large version is a different
    size and I dont want to hardcode the size of the new window to match
    each larger version.

    I hope that made sense.
    This code works fine in IE but I have to click the thumbnail twice in
    Firefox for the new window to be properly sized and three times in
    safari for it to be proper size. However if I have an alert('');
    before opening the new window it will size fine.

    This code is definitely inefficient (because I was trying different
    things to try to make it work).

    function popupCenter1(strImage) {

    var strImageTitleTemp = new Image();
    strImageTitleTemp.lowsrc = strImage.src.replace("sm",
    "").replace("SM", "").toString();
    strImageTitleTemp.src = strImage.src.replace("sm", "").replace("SM",
    "").toString();
    var h = strImageTitleTemp.height;
    var w = strImageTitleTemp.width;
    var strImageTitle = new Image(w,h);
    strImageTitle.src = strImageTitleTemp.src;
    var strSize = "";
    if(strImageTitleTemp.width < 300) {
    strSize = "style='font-size: 8pt'";
    }
    var cW = (screen.availWidth / 2) - (w / 2);
    var cH = (screen.availHeight / 2) - (h / 2);

    var page="<html><head><title>Image: " + strImageTitle.alt + "</
    title><link rel='stylesheet' href='css/styles.css' type='text/css'></
    head><body style='background-image: none;' leftmargin='0'
    rightmargin='0' topmargin='0' bottommargin='0'><div
    align='center'><table border='0' cellpadding='0' cellspacing='0'
    width='100%'><tr><td class='header'><img src='images/site/
    left_corner_top.gif' align='top'></td><th align='left' class='header'"
    + strSize + ">Image: " + w + ' X ' + h + "</th><td class='header'
    align='right'><img src='images/site/right_corner_top.gif'
    align='top'></td></tr><tr><th colspan='3'><img src='" +
    strImageTitle.src + "'></tr><tr><th align='left' class='header'><img
    src='images/site/left_corner_bottom.gif' align='top'></th><td
    class='header' " + strSize + "><a style='color: #E3E3E3;'
    href='javascript:window.close();'>Close Window</a></td><td
    class='header' align='right'><img src='images/site/
    right_corner_bottom.gif' align='top'></td></tr></table></div></body></
    html>";
    alert(''); //
    <-------------------------------------------------------------- Having
    this allows FF to have window correct size somehow
    var msgWindow = window.open('','','Width=' + (w) + ',Height=' + (h
    + 60) + ',left='+cW+',top='+cH
    +'toolbar=no,menubar=no,location=no,directories=no,status=no,scrollbars=auto,resizable=no,copyhistory=no');
    msgWindow.document.clear();
    msgWindow.document.open();
    msgWindow.document.write(page);
    msgWindow.document.close();
    }

    Hope this formats okay.. I don't know how to do the formatting on
    here. something like
    Code:
     ?
    
    Thanks
     
    ryanoasis, Feb 11, 2008
    #1
    1. Advertising

  2. ryanoasis

    SAM Guest

    ryanoasis a écrit :
    > Have thumbnail images and clicking on image opens new window with a
    > different image (larger version) but each large version is a different
    > size and I dont want to hardcode the size of the new window to match
    > each larger version.
    >
    > I hope that made sense.
    > This code works fine in IE but I have to click the thumbnail twice in
    > Firefox for the new window to be properly sized and three times in
    > safari for it to be proper size. However if I have an alert('');
    > before opening the new window it will size fine.



    popup.htm
    =========
    <html><title>viewer</title>
    <script type="text/javascript">
    window.onload = function() {
    document.images[0].src = self.location.toString().split('?')[1];
    }
    var ww = screen.width, wh = screen.height;
    function newSize(myImg) {
    if(myImg.src != 'empty.gif') {
    var h=myImg.height+20, w=myImg.width+20;
    sefl.moveTo((ww-w)/2, (wh-h)/2);
    self.resizeTo(w, h);
    }
    }
    </script><body style="margin:0">
    <img src="empty.gif" onload="newSize(this)" alt="">
    </html>

    gallery.htm
    ===========
    <html><title>album</title>
    <script type="text/javascript">
    var pop=false;
    function popup(what) {
    what = escape(what.href);
    if(!pop || pop.closed)
    pop=window.open('','','width=300,height=300,scrollbars=1,resizable=1');
    pop.location = 'popup.htm?'+what;
    pop.focus();
    return false;
    }
    </script><body>
    <a href="SM/1.jpg" onclick="return popup(this);"><img src="sm/1.jpg"
    alt=""></a>
    <a href="SM/2.jpg" onclick="return popup(this);"><img src="sm/2.jpg"
    alt=""></a>
    <a href="SM/3.jpg" onclick="return popup(this);"><img src="sm/3.jpg"
    alt=""></a>
    </html>



    > This code is definitely inefficient (because I was trying different
    > things to try to make it work).



    var cW, cH, h, w, strSize, titel, msgWindow=false;

    > function popupCenter1(strImage) {


    var strImageTitle = new Image();
    strImageTitle.onload = function() {
    h = strImageTitleTemp.height;
    w = strImageTitleTemp.width;
    cW = (screen.availWidth - w)/2;
    cH = (screen.availHeight - h)/2;
    if( w > 300) strSize = "style='font-size: 8pt'";
    titel = strImage.alt;
    thePopUp();
    }
    strImageTitle.src = strImage.src.toString().replace("sm","SM");
    }

    function thePopUp() {

    var page="<html><head><title>Image: " + titel + "</

    > title><link rel='stylesheet' href='css/styles.css' type='text/css'></
    > head><body style='background-image: none;' leftmargin='0'
    > rightmargin='0' topmargin='0' bottommargin='0'><div
    > align='center'><table border='0' cellpadding='0' cellspacing='0'
    > width='100%'><tr><td class='header'><img src='images/site/
    > left_corner_top.gif' align='top'></td><th align='left' class='header'"
    > + strSize + ">Image: " + w + ' X ' + h + "</th><td class='header'
    > align='right'><img src='images/site/right_corner_top.gif'
    > align='top'></td></tr><tr><th colspan='3'><img src='" +
    > strImageTitle.src + "'></tr><tr><th align='left' class='header'><img
    > src='images/site/left_corner_bottom.gif' align='top'></th><td
    > class='header' " + strSize + "><a style='color: #E3E3E3;'
    > href='javascript:window.close();'>Close Window</a></td><td
    > class='header' align='right'><img src='images/site/
    > right_corner_bottom.gif' align='top'></td></tr></table></div></body></
    > html>";


    if(msgWindow && !msgWindow.closed) msgWindow.close();

    msgWindow =
    window.open('','','width='+w',Height='+(+h+60)+',left='+cW+',top='+cH+

    > 'toolbar=no,menubar=no,location=no,directories=no,status=no,scrollbars=auto,resizable=no,copyhistory=no');
    > msgWindow.document.clear();
    > msgWindow.document.open();
    > msgWindow.document.write(page);
    > msgWindow.document.close();
    > }



    Nota :
    - visitor can choose to open popups in a tab
    - Fx by default doesn't accept to resize a window

    --
    sm
     
    SAM, Feb 12, 2008
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. tshad
    Replies:
    2
    Views:
    453
    tshad
    Feb 8, 2007
  2. Jens Peter Hansen
    Replies:
    7
    Views:
    591
    Randy Webb
    Jun 19, 2004
  3. Raffi
    Replies:
    4
    Views:
    260
    Dr John Stockton
    Aug 12, 2004
  4. Berlin  Brown

    Selection; open popup or open a new window

    Berlin Brown, Jun 26, 2006, in forum: Javascript
    Replies:
    0
    Views:
    135
    Berlin Brown
    Jun 26, 2006
  5. Jimmy
    Replies:
    1
    Views:
    342
    Thomas 'PointedEars' Lahn
    Oct 6, 2007
Loading...

Share This Page