OK, I give up... re: Full size image scroll bars

[BradInOKC]

Our gallery is at http://www.builderbobs.com/gallery/outdoors . 

From this page: http://www.builderbobs.com/gallery/outdoors/displayimage.php?album=8&pid=66#top_display_media when I click on the picture to view it full-size, the window that pops up is too small for the image and there is a scroll bar.  Is there not a way for the window to either be maximized automatically, or for it to be the same size as the full-size image?  I've looked through the forum and docs and just didn't see anything specifically about this, but maybe I was looking for the wrong thing?  Thanks for any advice you may have.

Brad

[François Keller]

what browser do you use ?
I have no problem with Firefox 3.6.3 on Mac OSx

[BradInOKC]

It's happening in IE with 1024 x 768 and 800 x 600

[Joachim Müller]

What version of IE? There's a reason why applications have version numbers.
It's not very surprising for me that the full-size pop-up doesn't fit into the screen if you have a screen resolution of only 800 x 600 pixels, when the pure image http://www.builderbobs.com/gallery/outdoors/albums/userpics/10001/200812_PST_12x15_Barn_-_side_doors.jpg is 768 x 512 pixels: add the chrome of the browser and you'll run into space limitations. If you want your images resized dynamically, taka a look at the visual enhancements like enlargeIt or similar. If that's nbot an option, then specify a max dimension for full-size pics that will work for your low-res machine.

[Αndré]

Configuration → Picture and thumbnail settings → Horizontal padding for full-size pop-up
Configuration → Picture and thumbnail settings → Vertical padding for full-size pop-up

[Outlaw]

This is not a resolution problem (I use 1900x1200), this problem exists only in IE. I have this in alle IE Versions (eg IE 8 in IE7 and IE8 mode).

In FF it is ok, so it is an IE problem.

[phill104]

Strange. It is not theme related as water_drop gives the same.

[Joe Carver]

This looks to be another case of "IE being IE".
Last night I once again wasted time in trying to find an IE workaround, but could not achieve any viable solution.

The person who wrote displayimage.fullsize.js was aware of the scollbar being shown and even made a note about it.

// Vert Scrollbar Always On in DOCMODE.

The .js command window.resizeTo is not very well respected for the height setting in IE. Safari and Chrome also showed some "quirks" with the scrollbar, FF and Opera did not. The quirks could be adjusted out somewhat, but to address/fix the issue for IE seemed to be another exercise in futility.

So until standards are actually standardized I would concur with Joachim that users try EnlargeIt or LightBox or something else if they want more aesthetically pleasing full sized images for the visitors using IE.

[Joachim Müller]

Thanks for your review. After all, users who still use IE show they don't care, so why bother about the cosmetical issue of a scroll bar that shows without any need? I don't think that IE users will sue gallery owners for the scroll bar appearing. They should be used by now to their browser "acting up".

[mireillesan]

This worked for me.

Add this to your theme.php

Code Select Expand

/******************************************************************************
** Section <<<theme_display_fullsize_pic>>> - START
******************************************************************************/
// Display the full size image
function theme_display_fullsize_pic()
{
    global $CONFIG, $THEME_DIR, $FORBIDDEN_SET, $LINEBREAK, $pid;
    global $lang_errors, $lang_fullsize_popup, $lang_charset;

    $superCage = Inspekt::makeSuperCage();

    if (!USER_ID && $CONFIG['allow_unlogged_access'] <= 2) {
        printf($lang_errors['login_needed'],'','','','');
        die();
    } elseif (USER_ID && USER_ACCESS_LEVEL <= 2) {
        printf($lang_errors['access_intermediate_only'],'','','','');
        die();
    }
    if ($superCage->get->keyExists('picfile')) {
        if (!GALLERY_ADMIN_MODE) {
            cpg_die(ERROR, $lang_errors['access_denied'], __FILE__, __LINE__);
        }
        //$picfile = $_GET['picfile'];
        //$picfile = $superCage->get->getPath('picfile'); // doesn't work with HTML entities
        $matches = $superCage->get->getMatched('picfile', '/^[0-9A-Za-z\/_.-]+$/');
        $picfile = $matches[0];
        $picname = $CONFIG['fullpath'] . $picfile;
        $imagesize = @getimagesize($picname);
        $imagedata = array('name' => $picfile, 'path' => path2url($picname), 'geometry' => $imagesize[3]);
    } elseif ($pid) {
        $sql = "SELECT filepath, filename, url_prefix, pwidth, pheight FROM {$CONFIG['TABLE_PICTURES']} AS p " . "WHERE pid='$pid' $FORBIDDEN_SET";
        $result = cpg_db_query($sql);
        if (!mysql_num_rows($result)) {
            cpg_die(ERROR, $lang_errors['non_exist_ap'], __FILE__, __LINE__);
        }
        $row = mysql_fetch_assoc($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);
    }
    if ((!USER_ID && $CONFIG['allow_unlogged_access'] <= 2) || (USER_ID && USER_ACCESS_LEVEL <= 2)) {
        // adjust the size of the window if we don't have to catter for a full-size pop-up, but only a text message
        $row['pwidth'] = 200;
        $row['pheight'] = 100;
    }

    $charset = ($CONFIG['charset'] == 'language file' ? $lang_charset : $CONFIG['charset']);
    $fullsize_html = <<<EOT
<!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=$charset" />
        <title>{$CONFIG['gallery_name']}: {$lang_fullsize_popup['click_to_close']}</title>
        <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; width:{$row['pwidth']}px; height:{$row['pheight']}px; border-collapse:collapse}
            td { vertical-align: middle; text-align:center; }
        </style>

        <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
        <script type="text/javascript" src="js/jquery.dimensions.pack.js"></script>
        <script type="text/javascript" src="js/displayimage.fullsize.js"></script>
    </head>
    <body style="margin:0px; padding:0px; background-color: gray;">

EOT;
    if ($CONFIG['transparent_overlay'] == 0) {
        $fullsize_html .= <<<EOT
        <table cellpadding="0" cellspacing="0" align="center" style="padding:0px;">
            <tr>

EOT;
        $fullsize_html .=  '<td align="center" valign="middle" background="' . htmlspecialchars($imagedata['path']) . '" ' . $imagedata['geometry'] . ' class="image">';
        $fullsize_html .=  '<div id="content">';
        $fullsize_html .=  '<a href="javascript: window.close()" style="border:none"><img src="images/image.gif?id='
                . floor(rand()*1000+rand())
                . '&amp;fullsize=yes" '
                . $imagedata['geometry']
                . ' alt="'
                . htmlspecialchars($imagedata['name'])
                . '" title="'
                . htmlspecialchars($imagedata['name'])
                . $LINEBREAK . $lang_fullsize_popup['click_to_close']
                . '" /></a><br />' . $LINEBREAK;
        $fullsize_html .=  <<<EOT
                    </div>
                </td>
            </tr>
        </table>

EOT;
    } else {
        $fullsize_html .=  '        <div id="content">'.$LINEBREAK;
        $fullsize_html .=  '<a href="javascript: window.close()"><img src="'
        . htmlspecialchars($imagedata['path']) . '" '
        . $imagedata['geometry']
        . 'id="fullsize_image" alt="'
        . htmlspecialchars($imagedata['name'])
        . '" title="'
        . htmlspecialchars($imagedata['name'])
        . $LINEBREAK . $lang_fullsize_popup['click_to_close']
        . '" /></a><br />' . $LINEBREAK
        . '        </div>'.$LINEBREAK;
    }
    $fullsize_html .= <<<EOT
  </body>
</html>

EOT;

    $fullsize_html = CPGPluginAPI::filter('fullsize_html', $fullsize_html);
    echo $fullsize_html;
}
/******************************************************************************
** Section <<<theme_display_fullsize_pic>>> - END
******************************************************************************/
?>

Simply by changing the 1 to 0 (transparent_overlay) would solve the problem.

Code Select Expand

EOT;
    if ($CONFIG['transparent_overlay'] == 1) {
        $fullsize_html .= <<<EOT

Code Select Expand

EOT;
    if ($CONFIG['transparent_overlay'] == 0) {
        $fullsize_html .= <<<EOT

[emma]

i have a similar problem so i add what you said in theme.php
but there is a problem, visitors can't download the pictures which open in pop-up

[Αndré]

It's a (sorry) stupid solution. It just switches the setting of the transparent overlay. You could also just change the appropriate config value

If you want a 'real' solution, change the code of

Code Select Expand

if ($CONFIG['transparent_overlay'] == 0) { ..... }

[Joachim Müller]

However, you should not have hijacked this thread. The link in your signature is not correct neither, so you should have posted a link to your gallery. Locking. If you have a question, start a thread of your own, doing as suggested per board rules.