valign="middle" image in pop-up window

smile · November 12, 2006, 01:38:44 AM

After the user has clicked the intermediate sized image,
how can I get the full-size image to valign="middle" in the pop-up window?

Also, how can I change the background color in that pop-up window?

TIA,
smile

Nibbler · November 12, 2006, 03:06:33 AM

Copy the theme_display_fullsize_pic() function from themes/sample/theme.php into your theme.php and modify it however you see fit.

Code Select


// Display the full size image
function theme_display_fullsize_pic()
{
    global $CONFIG, $THEME_DIR, $ALBUM_SET;
    global $lang_errors, $lang_fullsize_popup, $lang_charset;

    if (isset($_GET['picfile']))
    {
        if (!GALLERY_ADMIN_MODE) cpg_die(ERROR, $lang_errors['access_denied'], __FILE__, __LINE__);

    $picfile = $_GET['picfile'];
    $picname = $CONFIG['fullpath'] . $picfile;
    $imagesize = @getimagesize($picname);
    $imagedata = array('name' => $picfile, 'path' => path2url($picname), 'geometry' => $imagesize[3]);
    }
    elseif (isset($_GET['pid']))
    {
    $pid = (int)$_GET['pid'];
    $sql = "SELECT * " . "FROM {$CONFIG['TABLE_PICTURES']} " . "WHERE pid='$pid' $ALBUM_SET";
    $result = cpg_db_query($sql);

    if (!mysql_num_rows($result)) cpg_die(ERROR, $lang_errors['non_exist_ap'], __FILE__, __LINE__);

    $row = mysql_fetch_array($result);
    $pic_url = get_pic_url($row, 'fullsize');
    $geom = 'width="' . $row['pwidth'] . '" height="' . $row['pheight'] . '"';
    $imagedata = array('name' => $row['filename'], 'path' => $pic_url, 'geometry' => $geom);
    }

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=<?php echo $CONFIG['charset'] == 'language file' ? $lang_charset : $CONFIG['charset'] ?>" />
  <title><?php echo $CONFIG['gallery_name'] ?>: <?php echo $lang_fullsize_popup['click_to_close'];
      ?></title>
  <script type="text/javascript" src="scripts.js"></script>
  <style type="text/css">
  body { margin: 0; padding: 0; background-color: gray; }
  img { margin:0; padding:0; border:0; }
  #content { margin:0 auto; padding:0; border:0; }
  table { border:0; height:100%; width:100%; border-collapse:collapse}
  td {         vertical-align: middle; text-align:center; }
  </style>
  </head>
  <body>
    <script language="JavaScript" type="text/JavaScript">
      adjust_popup();
    </script>
    <table>
      <tr>
            <td>
          <div id="content">
              <?php     echo  '<a href="javascript: window.close()"><img src="'
                . htmlspecialchars($imagedata['path']) . '" '
                . $imagedata['geometry']
                . 'alt="'
                . htmlspecialchars($imagedata['name'])
                . '" title="'
                . htmlspecialchars($imagedata['name'])
                . "\n" . $lang_fullsize_popup['click_to_close']
                . '" /></a><br />' ."\n";
               ?>
          </div>
        </td>
      </tr>
    </table>
  </body>
</html>
<?php
}

smile · November 12, 2006, 04:03:23 AM

Thanks, Nibbler.

I pasted the code you provided from themes/sample/theme.php below the existing code in my theme.php and got the following error:

Parse error: syntax error, unexpected $end in /home/regsinte/public_html/smilinganimals/albums/themes/fruity/theme.php on line 114

line 114 was the last line: <?php

What am I doing wrong?

Nibbler · November 12, 2006, 01:27:45 PM

Look at the code I posted, <?php is not the last line.

smile · November 12, 2006, 02:16:49 PM

Sorry, Nibbler, I'm still not getting it.
I do have the closing curly bracket "}" after <?php,
but I'm still getting the same Parse error.

If the code below is what is currently on the page,
how would it integrate with the snippet you provided?
What would the whole of the code look like for this file?

Code Select


<?php
/*************************
  Coppermine Photo Gallery
  ************************
  Copyright (c) 2003-2006 Coppermine Dev Team
  v1.1 originally written by Gregory DEMAR

  This program is free software; you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation; either version 2 of the License, or
  (at your option) any later version.
  ********************************************
  Coppermine version: 1.4.9
  $Source$
  $Revision: 3125 $
  $Author: gaugau $
  $Date: 2006-06-16 08:48:03 +0200 (Fr, 16 Jun 2006) $
**********************************************/

// ------------------------------------------------------------------------- //
// The theme "Fruity" has been done by GauGau (http://gaugau.de/) based on   //
// the framed template of studicasa.nl (their website has gone down, so I    //
// guess no one will care). The usage of this theme is free for personal     //
// use, not for commercial use (according to the disclaimer of studiocasa)!  //
// ------------------------------------------------------------------------- //

define('THEME_HAS_RATING_GRAPHICS', 1);
define('THEME_HAS_NAVBAR_GRAPHICS', 1);
define('THEME_IS_XHTML10_TRANSITIONAL',1);  // Remove this if you edit this template until
                                            // you have validated it. See docs/theme.htm.

// HTML template for main menu
$template_sys_menu = <<<EOT
                <div class="topmenu">
                     {BUTTONS}
                </div>
EOT;

// HTML template for template sys_menu spacer
$template_sys_menu_spacer ='';

?>

Nibbler · November 12, 2006, 05:04:02 PM

Code Select


<?php
/*************************
  Coppermine Photo Gallery
  ************************
  Copyright (c) 2003-2006 Coppermine Dev Team
  v1.1 originally written by Gregory DEMAR

  This program is free software; you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation; either version 2 of the License, or
  (at your option) any later version.
  ********************************************
  Coppermine version: 1.4.9
  $Source$
  $Revision: 3125 $
  $Author: gaugau $
  $Date: 2006-06-16 08:48:03 +0200 (Fr, 16 Jun 2006) $
**********************************************/

// ------------------------------------------------------------------------- //
// The theme "Fruity" has been done by GauGau (http://gaugau.de/) based on   //
// the framed template of studicasa.nl (their website has gone down, so I    //
// guess no one will care). The usage of this theme is free for personal     //
// use, not for commercial use (according to the disclaimer of studiocasa)!  //
// ------------------------------------------------------------------------- //

define('THEME_HAS_RATING_GRAPHICS', 1);
define('THEME_HAS_NAVBAR_GRAPHICS', 1);
define('THEME_IS_XHTML10_TRANSITIONAL',1);  // Remove this if you edit this template until
                                            // you have validated it. See docs/theme.htm.

// HTML template for main menu
$template_sys_menu = <<<EOT
                <div class="topmenu">
                     {BUTTONS}
                </div>
EOT;

// HTML template for template sys_menu spacer
$template_sys_menu_spacer ='';

// Display the full size image
function theme_display_fullsize_pic()
{
    global $CONFIG, $THEME_DIR, $ALBUM_SET;
    global $lang_errors, $lang_fullsize_popup, $lang_charset;

    if (isset($_GET['picfile']))
    {
        if (!GALLERY_ADMIN_MODE) cpg_die(ERROR, $lang_errors['access_denied'], __FILE__, __LINE__);

    $picfile = $_GET['picfile'];
    $picname = $CONFIG['fullpath'] . $picfile;
    $imagesize = @getimagesize($picname);
    $imagedata = array('name' => $picfile, 'path' => path2url($picname), 'geometry' => $imagesize[3]);
    }
    elseif (isset($_GET['pid']))
    {
    $pid = (int)$_GET['pid'];
    $sql = "SELECT * " . "FROM {$CONFIG['TABLE_PICTURES']} " . "WHERE pid='$pid' $ALBUM_SET";
    $result = cpg_db_query($sql);

    if (!mysql_num_rows($result)) cpg_die(ERROR, $lang_errors['non_exist_ap'], __FILE__, __LINE__);

    $row = mysql_fetch_array($result);
    $pic_url = get_pic_url($row, 'fullsize');
    $geom = 'width="' . $row['pwidth'] . '" height="' . $row['pheight'] . '"';
    $imagedata = array('name' => $row['filename'], 'path' => $pic_url, 'geometry' => $geom);
    }

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=<?php echo $CONFIG['charset'] == 'language file' ? $lang_charset : $CONFIG['charset'] ?>" />
  <title><?php echo $CONFIG['gallery_name'] ?>: <?php echo $lang_fullsize_popup['click_to_close'];
      ?></title>
  <script type="text/javascript" src="scripts.js"></script>
  <style type="text/css">
  body { margin: 0; padding: 0; background-color: gray; }
  img { margin:0; padding:0; border:0; }
  #content { margin:0 auto; padding:0; border:0; }
  table { border:0; height:100%; width:100%; border-collapse:collapse}
  td {         vertical-align: middle; text-align:center; }
  </style>
  </head>
  <body>
    <script language="JavaScript" type="text/JavaScript">
      adjust_popup();
    </script>
    <table>
      <tr>
            <td>
          <div id="content">
              <?php     echo  '<a href="javascript: window.close()"><img src="'
                . htmlspecialchars($imagedata['path']) . '" '
                . $imagedata['geometry']
                . 'alt="'
                . htmlspecialchars($imagedata['name'])
                . '" title="'
                . htmlspecialchars($imagedata['name'])
                . "\n" . $lang_fullsize_popup['click_to_close']
                . '" /></a><br />' ."\n";
               ?>
          </div>
        </td>
      </tr>
    </table>
  </body>
</html>
<?php
}

?>

smile · November 13, 2006, 03:24:39 AM

Thanks, Nibbler.

The code parses now.

Unfortunately, after trying everything I could think of, the image is still stuck at the top,
it just won't vertical align for me.

Thanks for trying though.

Sami · November 13, 2006, 05:16:03 AM

can you post a link to your gallery ?

smile · November 14, 2006, 01:09:30 AM

Here it is Sami:
http://www.smilinganimals.com/albums

Sami · November 14, 2006, 05:35:47 AM

I don't see the Nibbler's code there
Also I don't understand why you want to align the image verticaly since height of the pop-up window is fit to the image !

smile · November 14, 2006, 10:26:08 PM

Sami, I pasted Nibbler's code into the Frutiy theme.php

I want the image to be valigned when you open the pop-up window to it full size.

Sami · November 15, 2006, 06:35:35 AM

Then rename your theme.php to theme.txt and attach it to this thread by using additional options

smile · November 17, 2006, 02:43:49 AM

Ok, Sami ... my theme.txt file is attached.
Thanks!

Sami · November 17, 2006, 07:44:33 AM

Try the new one (attached)
As I said before I can't understand why you trying to align the image this way ! cause the pop-up window comes with actual height that fit to the image size and there is no room for image to align any other way !
Can you give us a screen shot of what you want ?

smile · November 18, 2006, 03:31:36 PM

Thanks for trying Sami, but same results.
The image is stuck to the top when the window is opened all the way,
which I like to do to have more "mat" around the image within the browser "frame".

Gizmo · November 18, 2006, 04:16:36 PM

If you are trying to accomplish what I did in the attached image (popup.jpg), you'll need to also edit the script.js file in the root directory.

In the script.js, find

Code Select


        w = Math.min(w,screen.availWidth);
        h = Math.min(h,screen.availHeight);

change to

Code Select


        w = Math.min(w,screen.availWidth) + 40;
        h = Math.min(h,screen.availHeight) + 40;

In the function theme_display_fullsize_pic(), find

Code Select

#content { margin:0 auto; padding:0; border:0; }

change to,

Code Select

#content { margin:0 auto; padding:20px 20px 20px 20px; border:0; }

This adds a 20px padding around the photo which you can then add a background if you wish. I've already edited the files in the attached zip folder for you. Place the theme.php in your theme directory and the script.js file in the root directory of your gallery installation.

smile · November 18, 2006, 04:34:05 PM

Thanks, Gizmo. But I'd rather center the image than just add padding.
Here, as an example of what I'm after, click this image of Ginger cat,
then open the pop-up window all the way:
http://www.miraz.info/mine/displayimage.php?album=1&pos=4

Gizmo · November 18, 2006, 05:22:32 PM

The only way to get that "feature" is to downgrade to Coppermine Photo Gallery 1.3.3 which is what that link you gave is using. I would think the popup javascript that was used in 1.3.3 was fixed so that the image appeared without scrollbars in an appropriate sized window because I think it's quite annoying to have to expand the window or use scrollbars if the image will fit in the screen in the first place.

coppermine-gallery.com/forum

News:

valign="middle" image in pop-up window

smile

Nibbler

smile

Nibbler

smile

Nibbler

smile

Sami

smile

Sami

smile

Sami

smile

Sami

smile

Gizmo

smile

Gizmo