LightBox JS for Fullsize Popup Image

[alecc]

Is there a big problem to implement this for coppermine ver.1.3.4?
(i know i should update to 1.4.10, but mine it's hevely modified and the only good bridged verson for E107)

[Joachim Müller]

• cpg1.3.x goes unsupported
• The e107 version you're refering to actually is not a bridge, but a port that differs from the version we know. We don't know it, we don't support it.
• You're not suppossed to ask for mods to be ported to other versions, see the sticky thread Don't ask for other versions
• We don't do backports. You're welcome to try for yourself, but you're not allowed to clutter the announcement thread for particular mods.
• We're aware that users who heavily modified their old version are reluctant to upgrade. Yet you should have known in the first place; it's the drawback of all mods for pre-made scripts: upgrading gets harder.
• It's not just a matter of taste if you're going to upgrade or not: there are serious security flaws in older versions. It's only a matter of time untill you're going to fall victim of those flaws, as there are various exploits around on the internet. You have been warned!

Your posting (and subsequently mine as well) is very off-topic. Please don't discuss your issue further on this thread. As your version is outdated and unsupported, you're only allowed to ask questions on upgrading (on the board "cpg1.4 upgrading"), nothing else.

[tiagobr]

thanks everyone for all infos!!!
I really liked this lightbox!!! works perfect !!!!

I have never asked anything, always looking, searching, and trying until I can get what I want, but tonight after hours and hours trying, I couldnt figure out!

I 'd like to ask how could I use this lightbox and still using the "overlay (transparent gif overlay)" together! Is that possible? Im sure it's possible, but I have no idea anymore!

I was using this "transparent gif overlay" ( http://forum.coppermine-gallery.net/index.php?topic=33782.0 ) and now, with the lightbox, the intermediate picture works perfect with the gif overlay (if try to save will get the overlay.gif) but after clicking to get the normal/original/big photo with lightbox the overlay (gif) does not work (I can save the file  **.jpg)!

I know about disabling the right click but some old IE have the option with the mouse to save it after leaving the mouse over the photo for a few seconds... you know!?

soooo.... How can I change, the lightbox.js I believe, to put my overlay.gif to work ?!

I hope you guys understand and can help me!!!

thank you very much even for reading this!!! take care!!!

Tiago

[tiagobr]

couldn't delete or edit my previous post ,,,
Already got what I needed... thx !!!

[publishpictures]

Is it supposed to be for Firefox only? It doesn't work (on my website) when I use IE7.

to check: www.PublishPictures.com

[Garibaldi]

I was doing some thinking recently and I think on some of my bigger images some users may not know how to close the ajax window because the image is large. Could you modify the code so that if they simply click on the image it will close the lightbox and go back to the regular page?
Thanks

[Gizmo]

@Garibaldi,

Could you modify the code so that if they simply click on the image it will close the lightbox and go back to the regular page?

Reading through this thread I found your answer:
http://forum.coppermine-gallery.net/index.php?topic=35539.msg172606#msg172606

[Garibaldi]

Thanks Gizmo!

[rterburg]

This hack works fine with the project_vii theme. Thanks for the great hack.

Regards,

Ron ter Burg
http://www.terburg.net

[Bas Meelker]

Great feature. Thanks! It works great on my site as well!

Bas Meelker
www.basmeelker.com

[MadLine]

Your instruction even is simple in English.

THX Gizmo

German instruction to

http://www.flashtoflash.de/blog/?p=55

[Xanders]

Good evening,

copied and pasted the code for lightbox exactly as you wrote.

When i want to use the theme it gives me the following message:

Fatal error: Cannot redeclare theme_html_picture() (previously declared in /data/members/paid/k/o/koolephotography.com/htdocs/www/coppermine1410/themes/andreas09/theme.php:187) in /data/members/paid/k/o/koolephotography.com/htdocs/www/coppermine1410/themes/andreas09/theme.php on line 376

Sometimes I also get only blank pages when trying to combine the lightbox with the andreas09 theme.

I've tried it with the connections theme and had no problems there.

What can I be doing wrong that it is not working and that I get these messages.

Thanx

[Gizmo]

@Xanders

Check to make sure that theme_html_picture() function doesn't appear twice in your theme.php file. If it does, you'll have to apply the mod to the original function and I believe that it's already present.

[Xanders]

Thanx,

indeed had it twice in the code

works fine now

[Nielsk]

Hi Gizmo,
This feature works fine with the Hardwired theme!
I only had to add the code below to the displayimage.php file.
<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>

Niels

[rphMedia]

You should really add it to the template.html file as per his instruction.

[SaWey]

Hi, i've been messing around with this neat future.
I wanted to be able to view all the images in the selected album with the LighBox addon,
so after a bit of coding i came up with the solution.

In stead of following the steps you saw before, take these changed steps: (changes are only made in the CSS and theme.php file --> step 6 and

Step 1. Backup your theme folder!

Step 2. Create a folder called lightbox in your theme folder.

Step 3. Download the LightBox JS v2.02 scripts from http://www.huddletogether.com/projects/lightbox2/.

Step 4. Extract the css, images & js folders into the newly created lightbox folder.

Step 5. In the js folder, edit lightbox.js to point to the correct image folder path for the loading and closelabe images.
Find

Code Select Expand


var fileLoadingImage = "images/loading.gif";
var fileBottomNavCloseImage = "images/closelabel.gif";


Change to

Code Select Expand


var fileLoadingImage = "themes/your_theme/lightbox/images/loading.gif";
var fileBottomNavCloseImage = "themes/your_theme/lightbox/images/closelabel.gif";


Step 6. Be sure to link the "next.gif" and "previous.gif" correctly in the CSS!!!!
           With the CSS you have to link it like the following example:
           If the images are in the same folder of the css, then put in

Code Select Expand


#prevLink:hover, #prevLink:visited:hover { background: url(prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(nextlabel.gif) right 15% no-repeat; }



Step 7. Add this code to the head section of your template.html file and change the directories to match yours

Code Select Expand


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


Step 8. Paste this code before the ?> at the end of your theme.php file

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'])) {
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
        //First part of lightbox update
$pic_html = lightbox_list($CURRENT_PIC_DATA['pid']);
//End of first part
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
        } 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);
}
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
//Second part of lightbox update
function lightbox_list($picId)
{
$i = 0;
$pid = $picId;
$pic_data = get_pic_data($_GET['album'], $pic_count, $album_name, -1, -1, false);
foreach ($pic_data as $picture) {
if($CONFIG['thumb_use']=='ht' && $picture['pheight'] > $CONFIG['picture_width'] ){
  $condition = true;
}elseif($CONFIG['thumb_use']=='wd' && $picture['pwidth'] > $CONFIG['picture_width']){
  $condition = true;
}elseif($CONFIG['thumb_use']=='any' && max($picture['pwidth'], $picture['pheight']) > $CONFIG['picture_width']){
  $condition = true;
}else{
$condition = false;
}
if (is_image($picture['filename'])) {
if ($CONFIG['make_intermediate'] && $condition ) {
$picture_url = get_pic_url($picture, 'normal');
} else {
$picture_url = get_pic_url($picture, 'fullsize');
}
$pic_title = ($picture['title'] ? $picture['title'] : strtr(preg_replace("/(.+)\..*?\Z/", "\\1", htmlspecialchars($picture['filename'])), "_", " "));
if ($picture['pid'] == $pid) {
$picList .= "<a href=\"$picture_url\" rel=\"lightbox[list]\" title=\"$pic_title\">";
            $picList .= "<img src=\"$picture_url\" class=\"image\" border=\"0\" alt=\"Click to view full size image\" /><br />";
            $picList .= "</a>\n";
}else{
$picList .= "<a href=\"$picture_url\" rel=\"lightbox[list]\" title=\"$pic_title\"></a>\n";
}
$i++;
}
}
return $picList;
}
//End of second part
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/


I've put in a very ugly
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
to show what changes where made (there are 2 blocks that have been changed)

Step 9. Upload


There are still 2 bugs I can't get rid of:

• When you click on a random image, there is a fault caused by the get_pic_data-function in functions.inc.php
  can someone help??
• The alternate text when hovering over the image won't change so i hard coded it in the alt="" tag

I hope i make someone happy with this feature.
Good luck and if you find the solution to the problems, please post them here.

SaWey

[dprundle]

Thanks mate works perfect.

[m@rk]

Nice first post SaWey, thanks for contributing! 


Your modification makes the effect that images are shown in original size as single image instead of the "_normal" size in the "regular displayimage" -

any idea how to fix that ?!

[SaWey]

Normally it is configured like the original popup of coppermine.

You can, if you want, adjust this at the bottom of the script
in the following function

Code Select Expand


function lightbox_list($picId)

where it says:

Code Select Expand


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


And make it like this:

Code Select Expand


$picture_url = get_pic_url($picture, 'normal');


I hope that is what you meant.
Grz