LightBox JS for Fullsize Popup Image

[rphMedia]

Hey rphMedia,

Thanks and nice little patch there to allow closing on clicking the image. I was using a different fix but this one is only a single line change. Always better to change only one line when possible.

Cheers,

Gizmo

NP, I actually found that at the discussion forum you referenced in the earlier post.  David9 PM"d me and I gave him the thread you referenced as well. 

PS, understand that the resize modified lightbox.js - Firefox ignores it.  Just info.

[rphMedia]

You're definitely going to want this mod after you see what IE7 does to the popup of the intermediate (attached).  The new browser is nice in some ways, but intrusive in others.

[Gizmo]

Hey Ron,

I hate IE... just wish people would stop using it and move to anything else (I prefer FF myself).

PS, understand that the resize modified lightbox.js - Firefox ignores it.  Just info.

I have the resize script running with the "close on image click" and it's works fine on FF. What it won't do is resize the popup if I resize the browser window once it's up.

[rphMedia]

I have the resize script running with the "close on image click" and it's works fine on FF. What it won't do is resize the popup if I resize the browser window once it's up.

Oh yeah, I know that the "close on image click" works

The resize portion doesn't. If the original image is 1024x768, when I click the intermediate with the new lightbox.js script in Firefox, the image is not scaled to fit at all.     

[rphMedia]

Hey Gizmo, just a heads up.  You have a typo in your first post modifying theme.php -

this line:

Code Select Expand

$pic_html  = '<object id="'.$player['id'].'" '.$player['classid'].$player['codebase'].$player['mime'].$image_size['whole'].'>';

should be   (( clsid )):

Code Select Expand

$pic_html  = '<object id="'.$player['id'].'" '.$player['clsid'].$player['codebase'].$player['mime'].$image_size['whole'].'>';

Symptoms: Flash Files in your gallery are inoperable in Firefox ! (which, I didn't know that FF reads the '<object>' tag 

Spent about 3 hours figuring this one out

[Gizmo]

Oppss... I used sample>theme.php version 1.4.4 to grab that code. I just downloaded the latest sample theme folder and it's correct as you state. I have too 3 computers that I work from so it's time to go and make sure they all have the latest Coppermine files on them. Sorry.... I owe you a beer or two. 

[ppeter]

hi!

LightBox JS is not working in the k2 theme!

regards
peter

[Joachim Müller]

Fine. Great report. Did you actually bother to read th thread you're replying to? If not, do so now. The mod is experimental and known not to work with all themes.

[Gizmo]

Sorry to hear you're having problems but following the instructions I've posted, I was able to get LightBox running with K2 in 5 minutes. If you'd like help then you'll have to ask... a bit more nice this time!

[Sami]

Maybe we could create a plugin for this one too

[Gizmo]

I was hoping you'd ask so please do.

[Sami]

Okey , let see what can do ...

[prhodan]

hello

do you know of any bugs with the theme eyeball ?
I have installed everything, but if I click the pic it pops up in a normal IE screen, when using IE 7
It pops up in a new screen also when using FF 1.5

When I click "home" the links that use to be there are now gone. Links like "upload pictures"

I used winmerge to add your codes to theme.php.
I have "filetypes" plugin installed and I have a hack in the theme.php for using a flashplayer (flv).

Thank you!

here follows the //Displays a picture:

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'])) {
        $picfull_url = get_pic_url($CURRENT_PIC_DATA, 'fullsize');
        $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=\"$picfull_url\" rel=\"lightbox\" title=\"$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';
        }

        if ($mime_content['content']=='movie' && $mime_content['extension']=='flv') {
    $flv =  $CONFIG['fullpath'] . $CURRENT_PIC_DATA['filepath'] . $CURRENT_PIC_DATA['filename'];
    $pic_html  = "<object type=\"application/x-shockwave-flash\" width=\"320\" height=\"260\" wmode=\"transparent\" data=\"flvplayer.swf?file=$flv?autoStart=false\">";
    $pic_html .= "<param name=\"movie\" value=\"flvplayer.swf?file=$flv?autoStart=false\" />";
    $pic_html .= "<param name=\"wmode\" value=\"transparent\" />";
            $pic_html .= "</object><br />\n";

        } else {

        $player = $players[$user_player];

        $pic_html  = '<object id="'.$player['id'].'" '.$player['clsid'].$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);
}

[Edit by Sami]: put php under code block

[prhodan]

I didnt realise the code thingy.

Okay I found out what was "wrong".
Apparently in the template.html it is important in what sequence you paste the 4 lines in.
First I had the 4 lines you have to paste in below the 3 last lines you see below. and the lightbox didnt work.
Then i pasted the 4 lines above the last 3 lines, like you see below, and lightbox functions fine.

Code Select Expand

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="{LANG_DIR}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={CHARSET}" />
<meta http-equiv="Pragma" content="no-cache" />
<title>{TITLE}</title>
{META}
<link rel="stylesheet" href="themes/eyeball/lightbox/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="themes/eyeball/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="themes/eyeball/lightbox/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="themes/eyeball/lightbox/js/lightbox.js"></script>

<link rel="stylesheet" href="themes/eyeball/style.css" type="text/css" />
<script type="text/javascript" src="scripts.js"></script>
<script language="JavaScript" type="text/JavaScript">
<!--

[Shelia]

I have Lightbox working on my site using the information I found here, but it will not process .gif's. I am using the andreas09 them and 1.4.10. When I include <meta http-equiv="imagetoolbar" content="no"> nothing works using Lightbox. I realize that "rightclick" protection" is useless but visitors uploading pictures ask that I use any method to slow down the image stealing. Is there any part of the lightbox.js code or my template code that deals with the image extention or image size or am I just not aware of limitations of Coppermine using Lightbox?

[Gizmo]

I got it to work first time using the below header setup and with .gif's. Also, <meta http-equiv="imagetoolbar" content="no"> only disables the IE image toolbar that pops up when hovering over an image and does nothing for "right clicking".

Code Select Expand


<head>
<meta http-equiv="Content-Type" content="text/html; charset={CHARSET}" />
<meta name="mssmarttagspreventparsing" content="true" />
<meta http-equiv="imagetoolbar" content="no">
<title>{TITLE}</title>
{META}
<link rel="stylesheet" href="themes/andreas09_lightbox/cpg_style.css" type="text/css" />
<link rel="stylesheet" href="themes/andreas09_lightbox/wp_style.css" type="text/css" />

<link rel="stylesheet" href="themes/andreas09_lightbox/lightbox/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="themes/andreas09_lightbox/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="themes/andreas09_lightbox/lightbox/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="themes/andreas09_lightbox/lightbox/js/lightbox.js"></script>

<script type="text/javascript" src="scripts.js"></script> 
<script type="text/javascript" src="themes/andreas09_lightbox/changeStyle.js"></script>

</head>


[arlon]

Everything seems to work fine, except the image on the "displayimage", which suddenly became "normal sized" instead of the intermediate.. really strange

EXAMPLE PAGE

I followed all the instructions, now I'm stuck (not being a programmer at all, sorry)

Any help would be sincerely appreciated

[arlon]

sorry, I forgot to say that my version is "modded by stramm" .. maybe this is what messes it up?

[aldonc]

HI,

I have this working and love it. In the popup, the title of the picture at the bottom is either transparent or white (on the white border/background). I can highlight it and see it in reverse text but it is not visible otherwise. THe close button and label are there and fine. I got this working fine on one theme but then applied it to the eyeball theme which is my normal one and the title disappeared. I've checked and rechecked the mods and even created a second one from scratch to see if it was my fingers but same results.

Any direction on where to look for this?

thanks,
aldon

[Gizmo]

Find in your style.css file

Code Select Expand

#imageData #caption{ font-weight: bold; }

Add a color property to the text to meet your needs such as

Code Select Expand

#imageData #caption{ font-weight: bold; color: red;}