SitePoint Sponsor

User Tag List

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

    popup with size of picture

    Hello i'm new here so if i'm not at the right spot please tell me so.

    My problem has to do with making a propper link that opens a popup that has the size of it's content, in this case a picture. I use Gallery2 i real neat server side php powered gallery. On the photo page i use smal versions which need to become links to this magical popup.

    Here's what i've came up with;
    Code:
    <a href="{g->url arg1="view=core.DownloadItem" arg2="itemId=`$theme.item.id`"}" target="_blank" onclick="popImage(this.href, '{$theme.item.title|escape:"quotes"}'); return false;" title="Full Size">
    The link just opens a new page with the picture inside, and gives a error on page warning (at the lower left in the browser window).
    I need to work with the arg thingies because of the language used in the gallery templates. They direct the link to the picture. I can not use fixed size because this popup-link will be be imported and used for all images, this is the reason why the popup must sense (if this is possible) the size of the picture.

    Here is a link to my site so you can see for yourselfe; http://greyburn.net/gallery/main.php?g2_itemId=293

    I hope you can help me.
    Kind greeting,
    Mo.

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi imogeen, Welcome to SPF!

    Have a look at this article:
    http://www.sitepoint.com/article/res...it-images-size

  3. #3
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi MikeFoster, thank you, verry kind of you.

    I have only one problem with the script and i forgot to mension it in my question; i can't use the head section because it is just not there. I need to implement the link for the popup in a template page that has no head. this template will be read by another page called main.php but i can't find any head section there either.. i failed to locate a page that has a head section and reads the template. there probably is one, but it's a mystery to me.

    is there a way other?

    ciao
    mo.

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi imogeen,

    I like your work


    Put the following into your gallery html - at the end of the file.
    Code:
    <script type='text/javascript'>
    function popImage(sUrl, sTitle)
    {
      window.open(
        'photowin.html' + '?t=' + sTitle + 'u=' + sUrl,
        'GreyBurnPhoto', 'resizeable=1,height=200,width=200');
    }
    </script>
    Save the following as a file named 'photowin.js':
    Code:
    /*
    The following functions are part of X,
    a Cross-Browser Javascript Library,
    Distributed under the terms of the GNU LGPL
    */
    function xGetURLArguments()
    {
      var idx = location.href.indexOf('?');
      var params = new Array();
      if (idx != -1) {
        var pairs = location.href.substring(idx+1, location.href.length).split('&');
        for (var i=0; i<pairs.length; i++) {
          nameVal = pairs[i].split('=');
          params[i] = nameVal[1];
          params[nameVal[0]] = nameVal[1];
        }
      }
      return params;
    }
    function xClientWidth()
    {
      var v=0,d=document,w=window;
      if(d.compatMode == 'CSS1Compat' && !w.opera && d.documentElement && d.documentElement.clientWidth)
        {v=d.documentElement.clientWidth;}
      else if(d.body && d.body.clientWidth)
        {v=d.body.clientWidth;}
      else if(xDef(w.innerWidth,w.innerHeight,d.height)) {
        v=w.innerWidth;
        if(d.height>w.innerHeight) v-=16;
      }
      return v;
    }
    function xClientHeight()
    {
      var v=0,d=document,w=window;
      if(d.compatMode == 'CSS1Compat' && !w.opera && d.documentElement && d.documentElement.clientHeight)
        {v=d.documentElement.clientHeight;}
      else if(d.body && d.body.clientHeight)
        {v=d.body.clientHeight;}
      else if(xDef(w.innerWidth,w.innerHeight,d.width)) {
        v=w.innerHeight;
        if(d.width>w.innerWidth) v-=16;
      }
      return v;
    }
    function xDef()
    {
      for(var i=0; i<arguments.length; ++i){if(typeof(arguments[i])=='undefined') return false;}
      return true;
    }
    // end of X library functions
    
    var args = xGetURLArguments();
    if (args['u'].length == 0) {
      alert('The image URL was not specified!');
      window.close();
    }
    window.onload = function()
    {
      if (args['t'].length > 0) {
        document.title = args['t'];
      }
      var i = document.images['photo'];
      var w = i.width - xClientWidth();
      var h = i.height - xClientHeight();
      window.resizeBy(w, h);
    }
    Save the following as a file named 'photowin.html':
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Grey Burn Photography</title>
    <style type='text/css'>
    body {
      margin: 0;
      padding: 0;
      background-color: #FFF;
    }
    #container {
      margin: 0;
      padding: 0;
    }
    #photo {
      margin: 0;
      padding: 0;
      border: none;
    }
    </style>
    <script type='text/javascript' src='photowin.js'></script>
    </head>
    <body>
    <div id='container'><script type='text/javascript'>document.write("<img id='photo' name='photo' src='" + args['u'] + "' alt='" + args['t'] + "'>");</script></div>
    </body>
    </html>
    I haven't tested it. Let me know how it goes

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh by the way... on your home page, please don't say "Best viewed in..." because the gallery works fine for me in Opera 9.02 and probably works fine in most other browsers.

  6. #6
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, i am planning on putting much more on the site, as soon as this popup thing works out.

    a few questions,

    1) where to put the first code that i should paste in the gallery.html? in the <body>? or between </body> and </html> , or after </html>? (now i put it behind the </html> tag.)

    2) These files i made, where should i save them? same folder as gallery.html?

    3) The link that should open the popup, does it stay the same?
    Code:
    <a href="{g->url arg1="view=core.DownloadItem" arg2="itemId=`$theme.item.id`"}" target="_blank" onclick="popImage(this.href, '{$theme.item.title|escape:"quotes"}'); return false;" title="Full Size">
    because if this is the case, nothing happens. it just keeps on opening a normal window.

    And i don't know if this is important but gallery.html (which is actually called theme.tpl) is not the file with the popup link. but i think it does read the popuplink-file.

  7. #7
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    haha oke i'll remove it

  8. #8
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1. It can actually go just about anywhere in the body, but I suggest putting the script element right before the </body>...
    Code:
    <script>
    ...
    </script>
    </body>
    2. Yes.

    3. Yes.

    Did you upload the new files to your site? Because when I look at the source of that page the popImage script is not there. Also the files 'photowin.js' and 'photowin.html' are not in any of the directories given in the source.

    What directory is your file in?

    Here's an idea to try. Find this file: "themes/floatrix/functions.js"
    and put the following in that file.
    Code:
    function popImage(sUrl, sTitle)
    {
      window.open(
        'photowin.html' + '?t=' + sTitle + 'u=' + sUrl,
        'GreyBurnPhoto', 'resizeable=1,height=200,width=200');
    }
    In what directory are you saving "photowin.js" and "photowin.html"?
    Are you uploading those files to your site?

  9. #9
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What version of "Gallery" are using?
    I found the site and am looking at the docs

  10. #10
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks like the feature you are wanting to add is already included.
    For example, this file: "fitToWindow.js.php".

    Where did the calls to popImage() come from? Did you add that?


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
  •