GreyBox Popup Window for Fullsize Images

[Gizmo]

I've adapated the GreyBox popup window script to work with Coppermine when viewing the fullsized image. You can check it out here by clicking on an intermediate image - http://www.bullseyephotos.com/gallery/index.php?theme=OrangeSky_GB. GreyBox is similar to LightBox-JS but with a couple of twists. One, it was easier to make work with CPG and two, it looks like a Mac OS X popup window. I've attached the 2 functions that needed to be changed, function theme_html_picture() and function theme_display_fullsize_pic() so all you have to do is paste them into your theme.php. If you made some modifcations to these functions, you'll have to make sure they work alongside these changes.

The main changes were:
in function theme_html_picture():
changed-

Code Select Expand


    if ($mime_content['content']=='image') {
        if (isset($image_size['reduced'])) {
            $winsizeX = $CURRENT_PIC_DATA['pwidth']+5;  //the +'s are the mysterious FF and IE paddings
            $winsizeY = $CURRENT_PIC_DATA['pheight']+3; //the +'s are the mysterious FF and IE paddings
            $pic_html = "<a href=\"javascript:;\" onclick=\"MM_openBrWindow('displayimage.php?pid=$pid&amp;fullsize=1','" . uniqid(rand()) . "','scrollbars=yes,toolbar=yes,status=yes,resizable=yes,width=$winsizeX,height=$winsizeY')\">";
            $pic_title = $lang_display_image_php['view_fs'] . "\n==============\n" . $pic_title;
            $pic_html .= "<img src=\"" . $picture_url . "\" class=\"image\" border=\"0\" alt=\"{$lang_display_image_php['view_fs']}\" /><br />";
            $pic_html .= "</a>\n";
        } else {


to-

Code Select Expand


    if ($mime_content['content']=='image') {
        if (isset($image_size['reduced'])) {
    $pic_title = $CURRENT_PIC_DATA['title'];
            $winsizeX = $CURRENT_PIC_DATA['pwidth']+5;  //the +'s are the mysterious FF and IE paddings
            $winsizeY = $CURRENT_PIC_DATA['pheight']+3; //the +'s are the mysterious FF and IE paddings
            $pic_html = "<a href=\"displayimage.php?pid=$pid&amp;fullsize=1\" onclick=\"return GB_show('$pic_title', this.href, $winsizeY, $winsizeX)\">";
            $pic_html .= "<img src=\"" . $picture_url . "\" class=\"image\" border=\"0\" alt=\"{$lang_display_image_php['view_fs']}\" /><br />";
            $pic_html .= "</a>\n";
        } else {


in function theme_display_fullsize_pic():
changed-

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";
               ?>


to-

Code Select Expand


              <?php     echo  '<img src="'
                . htmlspecialchars($imagedata['path']) . '" '
                . $imagedata['geometry']
                . 'alt="'
                . htmlspecialchars($imagedata['name'])
                . '" title="'
                . htmlspecialchars($imagedata['name'])
                . "\n"
                . '" /></a><br />' ."\n";
               ?>


Now, I'm far (very far sometimes) from being a PHP coder and not always completely understanding how Coppermine works, so I'm hoping one of the Devs will take a look at the code changes and suggest the better way of handling things but it works great for me. The steps are:

Step 1: Download the files needed for GreyBox version 3.46 here - http://orangoo.com/labs/GreyBox/Download/ and follow the setup instructions on the documentation tab. The only error I came across was a script name change from

Code Select Expand

<script type="text/javascript" src="http://yoursever.com/greybox/AmiJS.js"></script>

to this:

Code Select Expand

<script type="text/javascript" src="http://yoursever.com/greybox/AJS.js"></script>

Mine look like this:

Code Select Expand


<link href="http://www.bullseyephotos.com/test/greybox/greybox.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="http://www.bullseyephotos.com/test/greybox/AJS.js"></script>
<script type="text/javascript" src="http://www.bullseyephotos.com/test/greybox/greybox.js"></script>
<script type="text/javascript">
  var GB_IMG_DIR = "http://www.bullseyephotos.com/test/greybox/";
  GreyBox.preloadGreyBoxImages();
</script>
</head>


Step 2: Copy the functions from the attached file and paste them into your theme.php at the end before ?>.
Step 3: Upload

I think this is a cool alternative to the fullsize popup in Coppermine, so have a go at it since it's a pretty simple hack.

Cheers,

Gizmo 

[saisrini85]

doesnt this work for the 'classic' theme?

i dont see anything to replace in the theme.php file in my classic theme folder?

[Gizmo]

You have to copy the corresponding functions from the sample theme.php file and paste them into your theme.php. Copy the below fucntions, paste into your theme.php and make the above changes.

Code Select Expand

// Displays a picture
function theme_html_picture()
{
    global $CONFIG, $CURRENT_PIC_DATA, $CURRENT_ALBUM_DATA, $USER;
    global $album, $comment_date_fmt, $template_display_media;
    global $lang_display_image_php, $lang_picinfo;

    $pid = $CURRENT_PIC_DATA['pid'];
    $pic_title = '';

    if (!isset($USER['liv']) || !is_array($USER['liv'])) {
        $USER['liv'] = array();
    }
    // Add 1 to hit counter
    if (!USER_IS_ADMIN && !in_array($pid, $USER['liv']) && isset($_COOKIE[$CONFIG['cookie_name'] . '_data'])) {
        add_hit($pid);
        if (count($USER['liv']) > 4) array_shift($USER['liv']);
        array_push($USER['liv'], $pid);
    }

    if($CONFIG['thumb_use']=='ht' && $CURRENT_PIC_DATA['pheight'] > $CONFIG['picture_width'] ){ // The wierd comparision is because only picture_width is stored
      $condition = true;
    }elseif($CONFIG['thumb_use']=='wd' && $CURRENT_PIC_DATA['pwidth'] > $CONFIG['picture_width']){
      $condition = true;
    }elseif($CONFIG['thumb_use']=='any' && max($CURRENT_PIC_DATA['pwidth'], $CURRENT_PIC_DATA['pheight']) > $CONFIG['picture_width']){
      $condition = true;
    }else{
     $condition = false;
    }

    if ($CURRENT_PIC_DATA['title'] != '') {
        $pic_title .= $CURRENT_PIC_DATA['title'] . "\n";
    }
    if ($CURRENT_PIC_DATA['caption'] != '') {
        $pic_title .= $CURRENT_PIC_DATA['caption'] . "\n";
    }
    if ($CURRENT_PIC_DATA['keywords'] != '') {
        $pic_title .= $lang_picinfo['Keywords'] . ": " . $CURRENT_PIC_DATA['keywords'];
    }

    if (!$CURRENT_PIC_DATA['title'] && !$CURRENT_PIC_DATA['caption']) {
        template_extract_block($template_display_media, 'img_desc');
    } else {
        if (!$CURRENT_PIC_DATA['title']) {
            template_extract_block($template_display_media, 'title');
        }
        if (!$CURRENT_PIC_DATA['caption']) {
            template_extract_block($template_display_media, 'caption');
        }
    }

    $CURRENT_PIC_DATA['menu'] = html_picture_menu(); //((USER_ADMIN_MODE && $CURRENT_ALBUM_DATA['category'] == FIRST_USER_CAT + USER_ID) || ($CONFIG['users_can_edit_pics'] && $CURRENT_PIC_DATA['owner_id'] == USER_ID && USER_ID != 0) || GALLERY_ADMIN_MODE) ? html_picture_menu($pid) : '';

    if ($CONFIG['make_intermediate'] && $condition ) {
        $picture_url = get_pic_url($CURRENT_PIC_DATA, 'normal');
    } else {
        $picture_url = get_pic_url($CURRENT_PIC_DATA, 'fullsize');
    }

    $image_size = compute_img_size($CURRENT_PIC_DATA['pwidth'], $CURRENT_PIC_DATA['pheight'], $CONFIG['picture_width']);

    $pic_title = '';
    $mime_content = cpg_get_type($CURRENT_PIC_DATA['filename']);


    if ($mime_content['content']=='movie' || $mime_content['content']=='audio') {

        if ($CURRENT_PIC_DATA['pwidth']==0 || $CURRENT_PIC_DATA['pheight']==0) {
            $CURRENT_PIC_DATA['pwidth']  = 320; // Default width

            // Set default height; if file is a movie
            if ($mime_content['content']=='movie') {
                $CURRENT_PIC_DATA['pheight'] = 240; // Default height
            }
        }

        $ctrl_offset['mov']=15;
        $ctrl_offset['wmv']=45;
        $ctrl_offset['swf']=0;
        $ctrl_offset['rm']=0;
        $ctrl_offset_default=45;
        $ctrl_height = (isset($ctrl_offset[$mime_content['extension']]))?($ctrl_offset[$mime_content['extension']]):$ctrl_offset_default;
        $image_size['whole']='width="'.$CURRENT_PIC_DATA['pwidth'].'" height="'.($CURRENT_PIC_DATA['pheight']+$ctrl_height).'"';
    }

    if ($mime_content['content']=='image') {
        if (isset($image_size['reduced'])) {
            $winsizeX = $CURRENT_PIC_DATA['pwidth']+5;  //the +'s are the mysterious FF and IE paddings
            $winsizeY = $CURRENT_PIC_DATA['pheight']+3; //the +'s are the mysterious FF and IE paddings
            $pic_html = "<a href=\"javascript:;\" onclick=\"MM_openBrWindow('displayimage.php?pid=$pid&amp;fullsize=1','" . uniqid(rand()) . "','scrollbars=yes,toolbar=yes,status=yes,resizable=yes,width=$winsizeX,height=$winsizeY')\">";
            $pic_title = $lang_display_image_php['view_fs'] . "\n==============\n" . $pic_title;
            $pic_html .= "<img src=\"" . $picture_url . "\" class=\"image\" border=\"0\" alt=\"{$lang_display_image_php['view_fs']}\" /><br />";
            $pic_html .= "</a>\n";
        } else {
            $pic_html = "<img src=\"" . $picture_url . "\" {$image_size['geom']} class=\"image\" border=\"0\" alt=\"\" /><br />\n";
        }
    } elseif ($mime_content['content']=='document') {
        $pic_thumb_url = get_pic_url($CURRENT_PIC_DATA,'thumb');
        $pic_html = "<a href=\"{$picture_url}\" target=\"_blank\" class=\"document_link\"><img src=\"".$pic_thumb_url."\" border=\"0\" class=\"image\" /></a>\n<br />";
    } else {
        $autostart = ($CONFIG['media_autostart']) ? ('true'):('false');

        $players['WMP'] = array('id' => 'MediaPlayer',
                                'clsid' => 'classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" ',
                                'codebase' => 'codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" ',
                                'mime' => 'type="application/x-mplayer2" ',
                               );
        $players['RMP'] = array('id' => 'RealPlayer',
                                'clsid' => 'classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" ',
                                'codebase' => '',
                                'mime' => 'type="audio/x-pn-realaudio-plugin" '
                               );
        $players['QT']  = array('id' => 'QuickTime',
                                'clsid' => 'classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" ',
                                'codebase' => 'codebase="http://www.apple.com/qtactivex/qtplugin.cab" ',
                                'mime' => 'type="video/x-quicktime" '
                               );
        $players['SWF'] = array('id' => 'SWFlash',
                                'clsid' => ' classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" ',
                                'codebase' => 'codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" ',
                                'mime' => 'type="application/x-shockwave-flash" '
                               );
        $players['UNK'] = array('id' => 'DefaultPlayer',
                                'clsid' => '',
                                'codebase' => '',
                                'mime' => ''
                               );

        if (isset($_COOKIE[$CONFIG['cookie_name'].'_'.$mime_content['extension'].'player'])) {
            $user_player = $_COOKIE[$CONFIG['cookie_name'].'_'.$mime_content['extension'].'player'];
        } else {
            $user_player = $mime_content['player'];
        }

                // There isn't a player selected or user wants client-side control
        if (!$user_player) {
            $user_player = 'UNK';
        }

        $player = $players[$user_player];

        $pic_html  = '<object id="'.$player['id'].'" '.$player['classid'].$player['codebase'].$player['mime'].$image_size['whole'].'>';
        $pic_html .= "<param name=\"autostart\" value=\"$autostart\" /><param name=\"src\" value=\"". $picture_url . "\" />";
        $pic_html .= '<embed '.$image_size['whole'].' src="'. $picture_url . '" autostart="'.$autostart.'" '.$player['mime'].'></embed>';
        $pic_html .= "</object><br />\n";
    }

    $CURRENT_PIC_DATA['html'] = $pic_html;
    $CURRENT_PIC_DATA['header'] = '';
    $CURRENT_PIC_DATA['footer'] = '';

    $CURRENT_PIC_DATA = CPGPluginAPI::filter('file_data',$CURRENT_PIC_DATA);

    $params = array('{CELL_HEIGHT}' => '100',
        '{IMAGE}' => $CURRENT_PIC_DATA['header'].$CURRENT_PIC_DATA['html'].$CURRENT_PIC_DATA['footer'],
        '{ADMIN_MENU}' => $CURRENT_PIC_DATA['menu'],
        '{TITLE}' => bb_decode($CURRENT_PIC_DATA['title']),
        '{CAPTION}' => bb_decode($CURRENT_PIC_DATA['caption']),
        );

    return template_eval($template_display_media, $params);
}


and

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>
  <title><?php echo $CONFIG['gallery_name'] ?>: <?php echo $lang_fullsize_popup['click_to_close'];
      ?></title>
  <meta http-equiv="content-type" content="text/html; charset=<?php echo $CONFIG['charset'] == 'language file' ? $lang_charset : $CONFIG['charset'] ?>" />
  <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
}


[zac]

Hmmm... sounds neat.. but not simple for me    I followed your directions explicitly but no go.... I noticed that it is not working on your demo either so... should I just give up ?

[Gizmo]

I tried the above instructions again on a new theme and they worked for me. Sorry about the gallery the above link pointed to, I had changed the gallery name but you can see the modification here - Greybox Test. If you're looking for something different to use with your gallery, you can try this Highslide Plugin that Sami put together. Plugins are much easier to use that code modifications.

If you want I can take a look at it if you zip up and attach your theme.

[zac]

Yea.. I really like yours better.  Wish I could get it to work   Here is the code I put in if you have time to help..:
In the head of template.html:

Code Select Expand


<head>
<script type="text/javascript" src="http://www.folkphotography.com/gallery/box/greybox/AJS.js"></script>
<script type="text/javascript" src="http://www.folkphotography.com/gallery/box/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="http://www.folkphotography.com/gallery/box/greybox/gb_scripts.js"></script>
<script type="text/javascript">
  var GB_IMG_DIR = "http://www.folkphotography.com/gallery/box/";
  GreyBox.preloadGreyBoxImages();
</script>
<meta http-equiv="Content-Type" content="text/html; charset={CHARSET}" />
<meta name="mssmarttagspreventparsing" content="true" />
<title>{TITLE}</title>
{META}
<link rel="stylesheet" href="http://www.folkphotography.com/mainstyle2.css" type="text/css" />
<script type="text/javascript" src="scripts.js"></script>
</head>

and at bottom of my very hacked up theme:

Code Select Expand

// Displays a picture
function theme_html_picture()
{
    global $CONFIG, $CURRENT_PIC_DATA, $CURRENT_ALBUM_DATA, $USER;
    global $album, $comment_date_fmt, $template_display_media;
    global $lang_display_image_php, $lang_picinfo;

    $pid = $CURRENT_PIC_DATA['pid'];
    $pic_title = '';

    if (!isset($USER['liv']) || !is_array($USER['liv'])) {
        $USER['liv'] = array();
    }
    // Add 1 to hit counter
    if (!USER_IS_ADMIN && !in_array($pid, $USER['liv']) && isset($_COOKIE[$CONFIG['cookie_name'] . '_data'])) {
        add_hit($pid);
        if (count($USER['liv']) > 4) array_shift($USER['liv']);
        array_push($USER['liv'], $pid);
    }

    if($CONFIG['thumb_use']=='ht' && $CURRENT_PIC_DATA['pheight'] > $CONFIG['picture_width'] ){ // The wierd comparision is because only picture_width is stored
      $condition = true;
    }elseif($CONFIG['thumb_use']=='wd' && $CURRENT_PIC_DATA['pwidth'] > $CONFIG['picture_width']){
      $condition = true;
    }elseif($CONFIG['thumb_use']=='any' && max($CURRENT_PIC_DATA['pwidth'], $CURRENT_PIC_DATA['pheight']) > $CONFIG['picture_width']){
      $condition = true;
    }else{
     $condition = false;
    }

    if ($CURRENT_PIC_DATA['title'] != '') {
        $pic_title .= $CURRENT_PIC_DATA['title'] . "\n";
    }
    if ($CURRENT_PIC_DATA['caption'] != '') {
        $pic_title .= $CURRENT_PIC_DATA['caption'] . "\n";
    }
    if ($CURRENT_PIC_DATA['keywords'] != '') {
        $pic_title .= $lang_picinfo['Keywords'] . ": " . $CURRENT_PIC_DATA['keywords'];
    }

    if (!$CURRENT_PIC_DATA['title'] && !$CURRENT_PIC_DATA['caption']) {
        template_extract_block($template_display_media, 'img_desc');
    } else {
        if (!$CURRENT_PIC_DATA['title']) {
            template_extract_block($template_display_media, 'title');
        }
        if (!$CURRENT_PIC_DATA['caption']) {
            template_extract_block($template_display_media, 'caption');
        }
    }

    $CURRENT_PIC_DATA['menu'] = html_picture_menu(); //((USER_ADMIN_MODE && $CURRENT_ALBUM_DATA['category'] == FIRST_USER_CAT + USER_ID) || ($CONFIG['users_can_edit_pics'] && $CURRENT_PIC_DATA['owner_id'] == USER_ID && USER_ID != 0) || GALLERY_ADMIN_MODE) ? html_picture_menu($pid) : '';

    if ($CONFIG['make_intermediate'] && $condition ) {
        $picture_url = get_pic_url($CURRENT_PIC_DATA, 'normal');
    } else {
        $picture_url = get_pic_url($CURRENT_PIC_DATA, 'fullsize');
    }

    $image_size = compute_img_size($CURRENT_PIC_DATA['pwidth'], $CURRENT_PIC_DATA['pheight'], $CONFIG['picture_width']);

    $pic_title = '';
    $mime_content = cpg_get_type($CURRENT_PIC_DATA['filename']);


    if ($mime_content['content']=='movie' || $mime_content['content']=='audio') {

        if ($CURRENT_PIC_DATA['pwidth']==0 || $CURRENT_PIC_DATA['pheight']==0) {
            $CURRENT_PIC_DATA['pwidth']  = 320; // Default width

            // Set default height; if file is a movie
            if ($mime_content['content']=='movie') {
                $CURRENT_PIC_DATA['pheight'] = 240; // Default height
            }
        }

        $ctrl_offset['mov']=15;
        $ctrl_offset['wmv']=45;
        $ctrl_offset['swf']=0;
        $ctrl_offset['rm']=0;
        $ctrl_offset_default=45;
        $ctrl_height = (isset($ctrl_offset[$mime_content['extension']]))?($ctrl_offset[$mime_content['extension']]):$ctrl_offset_default;
        $image_size['whole']='width="'.$CURRENT_PIC_DATA['pwidth'].'" height="'.($CURRENT_PIC_DATA['pheight']+$ctrl_height).'"';
    }

    if ($mime_content['content']=='image') {
        if (isset($image_size['reduced'])) {
        $pic_title = $CURRENT_PIC_DATA['title'];
            $winsizeX = $CURRENT_PIC_DATA['pwidth']+5;  //the +'s are the mysterious FF and IE paddings
            $winsizeY = $CURRENT_PIC_DATA['pheight']+3; //the +'s are the mysterious FF and IE paddings
            $pic_html = "<a href=\"displayimage.php?pid=$pid&amp;fullsize=1\" onclick=\"return GB_show('$pic_title', this.href, $winsizeY, $winsizeX)\">";
            $pic_html .= "<img src=\"" . $picture_url . "\" class=\"image\" border=\"0\" alt=\"{$lang_display_image_php['view_fs']}\" /><br />";
            $pic_html .= "</a>\n";
        } else {
            $pic_html = "<img src=\"" . $picture_url . "\" {$image_size['geom']} class=\"image\" border=\"0\" alt=\"\" /><br />\n";
        }
    } elseif ($mime_content['content']=='document') {
        $pic_thumb_url = get_pic_url($CURRENT_PIC_DATA,'thumb');
        $pic_html = "<a href=\"{$picture_url}\" target=\"_blank\" class=\"document_link\"><img src=\"".$pic_thumb_url."\" border=\"0\" class=\"image\" /></a>\n<br />";
    } else {
        $autostart = ($CONFIG['media_autostart']) ? ('true'):('false');

        $players['WMP'] = array('id' => 'MediaPlayer',
                                'clsid' => 'classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" ',
                                'codebase' => 'codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" ',
                                'mime' => 'type="application/x-mplayer2" ',
                               );
        $players['RMP'] = array('id' => 'RealPlayer',
                                'clsid' => 'classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" ',
                                'codebase' => '',
                                'mime' => 'type="audio/x-pn-realaudio-plugin" '
                               );
        $players['QT']  = array('id' => 'QuickTime',
                                'clsid' => 'classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" ',
                                'codebase' => 'codebase="http://www.apple.com/qtactivex/qtplugin.cab" ',
                                'mime' => 'type="video/x-quicktime" '
                               );
        $players['SWF'] = array('id' => 'SWFlash',
                                'clsid' => ' classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" ',
                                'codebase' => 'codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" ',
                                'mime' => 'type="application/x-shockwave-flash" '
                               );
        $players['UNK'] = array('id' => 'DefaultPlayer',
                                'clsid' => '',
                                'codebase' => '',
                                'mime' => ''
                               );

        if (isset($_COOKIE[$CONFIG['cookie_name'].'_'.$mime_content['extension'].'player'])) {
            $user_player = $_COOKIE[$CONFIG['cookie_name'].'_'.$mime_content['extension'].'player'];
        } else {
            $user_player = $mime_content['player'];
        }

                // There isn't a player selected or user wants client-side control
        if (!$user_player) {
            $user_player = 'UNK';
        }

        $player = $players[$user_player];

        $pic_html  = '<object id="'.$player['id'].'" '.$player['classid'].$player['codebase'].$player['mime'].$image_size['whole'].'>';
        $pic_html .= "<param name=\"autostart\" value=\"$autostart\" /><param name=\"src\" value=\"". $picture_url . "\" />";
        $pic_html .= '<embed '.$image_size['whole'].' src="'. $picture_url . '" autostart="'.$autostart.'" '.$player['mime'].'></embed>';
        $pic_html .= "</object><br />\n";
    }

    $CURRENT_PIC_DATA['html'] = $pic_html;
    $CURRENT_PIC_DATA['header'] = '';
    $CURRENT_PIC_DATA['footer'] = '';

    $CURRENT_PIC_DATA = CPGPluginAPI::filter('file_data',$CURRENT_PIC_DATA);

    $params = array('{CELL_HEIGHT}' => '100',
        '{IMAGE}' => $CURRENT_PIC_DATA['header'].$CURRENT_PIC_DATA['html'].$CURRENT_PIC_DATA['footer'],
        '{ADMIN_MENU}' => $CURRENT_PIC_DATA['menu'],
        '{TITLE}' => bb_decode($CURRENT_PIC_DATA['title']),
        '{CAPTION}' => bb_decode($CURRENT_PIC_DATA['caption']),
        );

    return template_eval($template_display_media, $params);
}

// 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>
  <title><?php echo $CONFIG['gallery_name'] ?>: <?php echo $lang_fullsize_popup['click_to_close'];
      ?></title>
  <meta http-equiv="content-type" content="text/html; charset=<?php echo $CONFIG['charset'] == 'language file' ? $lang_charset : $CONFIG['charset'] ?>" />
  <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>
    <table>
      <tr>
            <td>
          <div id="content">
              <?php     echo  '<img src="'
                . htmlspecialchars($imagedata['path']) . '" '
                . $imagedata['geometry']
                . 'alt="'
                . htmlspecialchars($imagedata['name'])
                . '" title="'
                . htmlspecialchars($imagedata['name'])
                . "\n"
                . '" /></a><br />' ."\n";
               ?>
          </div>
        </td>
      </tr>
    </table>
  </body>
</html>
<?php
}

?>




Thanks for any help on this !

[zac]

Nevermind I got it to work using your old instructions from this post:

http://forum.coppermine-gallery.net/index.php?topic=35539.0

That works great and was really easy to install.  ONe minor detail... in this one (you can see it here: http://www.folkphotography.com/gallery/ ) you need to close the window by selecting the x in the corner (which is sometimes out of the window).  I would like it that you just click anywhere on the image and it closes it.. . I have also seen versions of yours that are like that.   Is this something that needs to be changed in the lighbox script or can I put it in somewhere cpg? 

Thanks again for your work on these.. .I am really happy to have a new popup now.

[zac]

Found fix for the close... (from your other post) http://www.huddletogether.com/forum/comments.php?DiscussionID=307&page=1#Item_0

Moves the close button up... but I am still curious if you can make it close by clicking the image.  Thanks again for all your work.

[Gizmo]

Hi Zac, sorry I haven't been around to answer your questions. It seems like you've decided to use the Lightbox JS script instead of the GreyBox so you should post further questions there. To answer your question about closing the popup window, check out this post - http://forum.coppermine-gallery.net/index.php?topic=35539.msg187620#msg187620 as I've answered it there.

[Alcor]

Hello.

The Greybox's version is actually 5.40. The javascripts files are AJS.js and gb_scripts.js (not greybox.js) and the css file is gb_styles.css. I added these lines to my template.html

Code Select Expand

<link href="http://www.domain.com/cpg/greybox/gb_styles.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="http://www.domain.com/cpg/greybox/AJS.js"></script>
<script type="text/javascript" src="http://www.domain.com/cpg/greybox/gb_scripts.js"></script>
<script type="text/javascript">
  var GB_IMG_DIR = "http://www.domain.com/cpg/greybox/";
  GreyBox.preloadGreyBoxImages();
</script>
</head>

and in theme.php I added the functions theme_html_picture() and theme_display_fullsize_pic(). But it doesn't work for me. I've these errors:

GB_ROOT_DIR is not defined
GreyBox.preloadGreyBoxImages(); is not a function

In gb_scripts.js I replaced GB_ROOT_DIR by http://www.domain.com/cpg/greybox/ and so the GB_ROOT_DIR is not defined is solved. But, where is GreyBox.preloadGreyBoxImages() function? I don't find it.

[Gephri]

I've got this mod installed and works very nicely - except I discovered that the following line stops the CPG slideshow from advancing:

Code Select Expand

<script type="text/javascript" language="javascript" src="/java/greybox/AJS.js"></script>

When it is commented out from the template - the slideshow advances as it should - but greybox opens in full page and doesn't work properly.

Cany idea where the conflict with the slideshow may be?

[Sami]

Enable the mod (put back the AJS.js) and post a link to your gallery so we could see the conflict between to scripts (if it really was a conflict !)

[Gephri]

okay - here you go:
http://www.superstarstudents.com/gallery/displayimage.php?album=44&pid=6406&slideshow=2750#auto_shift

I use the GreyBox to pop open the link at the top of the page that reads "Fundraisers"

[Sami]

You have a JavaScript syntax error on your themes/SuperStar/template.html
check this

Code Select Expand


<body if(window.location.href.split('?')[1].indexOf('pos=') != -1) {window.location.href = '#auto_shift';}" onselectstart="return false" ondragstart="return false" onload="this.focus(); init();>


You should first disable Highslide plugin and see if everything goes right

[Gephri]

thanks Sami:

the original body tag looked like this

Code Select Expand

<body if(window.location.href.split('?')[1].indexOf('pos=') != -1) {window.location.href = '#auto_shift';}" onselectstart="return false" ondragstart="return false" onload="this.focus(); init();>


I changed it to, this (does this correct the errors you identified?)

Code Select Expand

<body if(window.location.href.split('?')[1].indexOf('pos=') != -1) {window.location.href = '#auto_shift';} onselectstart="return false"; ondragstart="return false"; onload="this.focus()"; init();>

And finally the incompatibility occurs when both of the following are in the body tag

Code Select Expand

onselectstart="return false"; ondragstart="return false";

If I use just one - GreyBox and the slideshow work.  Any idea what each does - sorry, I know this is pushing it...

[Gephri]

Correction- NEITHER can be in the body tag for GreyBox and slideshow to work

Code Select Expand

onselectstart="return false"; ondragstart="return false";