scale full size images to match window/display?

[faramir66103]

Hi All, I'm new to all this, but am enjoying it a great deal.  Coppermine is a great replacement for building so many html pages more or less by hand!  My only trouble is that my full size images are bigger than my the window they open in, and my monitor for that matter.  I really don't want to have to scale down my images before I upload them because then my end users don't get as large an image as possible.  Is there a way to modify Coppermine so that the window that opens is a particular size (say 640x480) with the full size image scaled to fit and with that little magnifying glass that allows you to see the full size image? 

Many Thanks,
Adam

[Hein Traag]

Did a quick search but could not find anything which does automatic scaling of fullsize images to fit on the screen of the visiting user.

Would be a nice option though, not sure if this can be coded or not.

[Nibbler]

That's a browser feature. You should be able to do that by making the image open by itself instead of inside the fullsize window that pops up.

[faramir66103]

Nibbler, thanks for the info.  I'm new to a lot of this coding stuff.  Could you tell me which file to modify and how it should be changed?  I really appreciate your help.

Thanks,
Adam

[glenc]

check out HighSlide plugin By BMossavari I cant find the link tho

[Joachim Müller]

Highslide (Skip Intermediate Page and show full image ), although it's not what the thread starter requested.

[faramir66103]

Ok, if the little magnifying glass cursor isn't really an option as that's a browser feature, how about just having the image in the full size window scaled to fit that window when it opens?  Could that image resize as the window is resized by the end user?  I'm thinking about something like using a height or width attribute set to 100%. 

Thanks,
Adam

[Joachim Müller]

Edit themes/yourtheme/theme.php, find

Code Select Expand

function theme_display_fullsize_pic()and modify as suggested below. If the function definition doesn't exist in your custom theme, copy

Code Select Expand

// 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
}
from themes/sample/theme.php into a new line before

Code Select Expand

?>of the file themes/yourtheme/theme.php

Basically, you'll need to modify the width and height attributes of the image tag. Sadly, you can't use a percentage, but only a pixel value. You'll need to look into

Code Select Expand

              <?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";
               ?>, this should give you an idea what to modify: the width and height attributes are being inserted using the $imagedata['geometry']-section. So basically, find the section that defines this var:

Code Select Expand

$geom = 'width="' . $row['pwidth'] . '" height="' . $row['pheight'] . '"';is the line you need to modify. Add some by-case code that checks if the width and height are greater than a certain limit (e.g. 1024/768 pixels) and re-scale the values accordingly.

[Nibbler]

If you want to try my suggestion, then change this line

Code Select Expand

$pic_html = "<a href=\"javascript:;\" onclick=\"MM_openBrWindow('displayimage.php?pid=$pid&amp;fullsize=1','" . uniqid(rand()) . "','scrollbars=yes,toolbar=no,status=no,resizable=yes,width=$winsizeX,height=$winsizeY')\">";


to

Code Select Expand


$pic_html = '<a href="' . get_pic_url($CURRENT_PIC_DATA, 'fullsize') . '">';


in your theme's theme.php. If you don't have it then copy the theme_html_picture() function from the sample theme and modify your copy.

[glenc]

Hello all, I had recommened Highslide because on
my cpg it does what I thought was asked. When a thumb is clicked it opens to the size of window if big enough. If bigger, when I put my mouse over it, it shows a button to go full image.

[faramir66103]

glenc, I looked at your site, and I think that the Highslide plugin may accomplish the goal.  I think I was getting too hung up on methodology and loosing sight of that.  I went to the Highslide homepage, and downloaded the files, but am confused as to which files to actually upload to the Coppermine pluging folder. Could you tell me which files I need to upload, or do I need to code something?

Thanks,
Adam

[Nibbler]

http://coppermine-gallery.net/demo/cpg14x/docs/index.htm#plugin

[faramir66103]

I feel like a real fool, but I just can't seem to get this to work  .  I downloaded the Highslide .zip from here http://vikjavev.no/highslide/.  I tried both upload methods described in the documentation and it doesn't show up in the Plugin Manager using either method.  I tried refreshing the page and logging out and logging in again, but still no joy.  Have I downloaded the wrong file perhaps?

Thanks for all the help and patience,
Adam

[Nibbler]

You need to download the plugin that is attached to this thread: http://coppermine-gallery.com/forum/index.php?topic=36558.0

[faramir66103]

Nibbler, thank you so much.  I missed the attached version of Highslide when I read that thread.  I really appreciate your help and patience.  I'm loving Coppermine and it's going to make managing and sharing pics for my friends and family quick and easy. 

Thanks,
Adam