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 4 of 4
  1. #1
    Senior Coder
    Join Date
    Jul 2005
    Location
    UK
    Posts
    1,051
    Thanks
    6
    Thanked 13 Times in 13 Posts

    Modifying Pop Up Image Viewer

    Hi All,

    I'm using (what I assume is) a fairly straight forward .js pop up image viewer. The code -

    Code:


    <script type="text/javascript">
    function popImg(imageURL) {
    var imgWin = window.open('about:blank','imgWin','width=220, height=160, left=200, top=200');

    with (imgWin.document) {
    writeln('<html><head><title>Loading...</title>');
    writeln('<style type="text/css"><!-- body { margin: 0px; } --></style></head>');
    writeln('<body onload="self.focus();"><img id="pic" style="display:none" /></body></html>');
    close();
    }
    var img = new Image();
    img.onload = function() { sizeImgWin(imgWin, img) };
    img.src = imageURL;
    }

    function sizeImgWin(win, img) {
    var new_w = img.width;
    var new_h = img.height;
    var old_w = win.innerWidth || win.document.body.offsetWidth;
    var old_h = win.innerHeight || win.document.body.offsetHeight;
    if (!new_w) { new_w = old_w; }
    if (!new_h) { new_h = old_h; }
    new_w -= old_w; new_h -= old_h;
    win.resizeBy(new_w,new_h);
    win.document.title = img.src.substring(img.src.lastIndexOf("/")+1);
    var pic = win.document.getElementById('pic');
    pic.src = img.src;
    pic.style.display = 'block';
    }
    </script>






    And to view the image -

    Code:


    <a href="[image path]" onclick="popImg(this.href); return false;">See Image</a>






    As I have simply harvested this from a code site and my understanding of js is limited at best, I wondered if anybody can help me tinker with this a bit so that...

    A) The pop up window has a title defined by me. Ideally this would be definable from the <a> tag so that each image window can be called something relevant to the image, but having a universal title for the pop up defined in the js would be okay too.

    The current title using the above script is the complete image URL which just looks messy.

    B) There is no status bar on the pop up, or failing this the status bar says something a little more interesting than 'done'.

    Many thanks,
    Pennimus

  • #2
    Regular Coder
    Join Date
    May 2004
    Location
    Berkeley, California Age: 15
    Posts
    398
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Question A:
    Code:
    <a href="[image path]" onclick="popImg(this.href, this.getAttribute('title')); return false;" title="My Friends">See Image</a>
    Code:
    function popImg(imageURL, imageTitle) {
    var imgWin = window.open('about:blank','imgWin','width=220, height=160, left=200, top=200');
    
    with (imgWin.document) {
    writeln('<html><head><title>'+imageTitle+'</title>');
    writeln('<style type="text/css"><!-- body { margin: 0px; } --></style></head>');
    writeln('<body onload="self.focus();"><img id="pic" style="display:none" /></body></html>');
    close();
    }
    var img = new Image();
    img.onload = function() { sizeImgWin(imgWin, img) };
    img.src = imageURL;
    }
    BTW, why didn't it just say 'Loading...' when you open the window?

    For Question B, I'd imagine googling for 'window.open' would get the answer
    Jalenack.com .:. YWDA Founder .:. Rounded Corners Maker 1.1! .:. My Blog
    The hardest thing about teaching is not knowing the right answers, but knowing the right questions - Elisabeth Klein
    Pretty buttons does not a great website make.

  • #3
    Senior Coder
    Join Date
    Jul 2005
    Location
    UK
    Posts
    1,051
    Thanks
    6
    Thanked 13 Times in 13 Posts
    Thanks for the help Jalenack, but that doesn't seem to have worked. Let me go into a little more detail about what happens.

    In IE, your code seems to work very briefly before the title reverts to just the image name (including .gif).

    In firefox, I don't see your code working at all and the title is the entire image path (although I would guess the code does work but Firefox is working through the script too fast so I don't actually see the proper title).

    Could this be anything to do with this line in the code? -

    Code:
     win.document.title = img.src.substring(img.src.lastIndexOf("/")+1);
    Regarding your question about 'loading' - its the same deal as above, it shows briefly before changing to the path/image name.

    I'll see what I can find regarding status bars.

    Thanks
    Pennimus

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts


  •  

    Posting Permissions

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