LightBox JS for Fullsize Popup Image

[zac]

Ahhh yes works great now   Thanks so much SaWey.. you rock!! 

[GladiatoR]

hey guys...just installed this script working great. one think i don't like is if you click on the image to activate the lightbox and it hasnt fully loaded, it loads the image into something like this....

http://www.jlp.ugtech.net/gallery/albums/uploads/westernregion_barrabool/IMG_3511.jpg

how do i stop this so if you press on a half loaded image it still loads up in that lighbox thing?

thanks in advance.

[SaWey]

First of all, you have a slow server :-)

To answer your question: I have no idea, it is the browser being to slow, it first wants to load the images before it does the lightbox popup.
When an image is loading and you press the stop button of your browser, then click on the image and it shows up in the lightbox.

So to conclude: I don't know how to fix this. Sorry.
Maybe try searching the lightbox webpage or something.

[GladiatoR]

your the only that that has complained about my server being slow....also, i have experienced same problem on other peoples sites with same script installed. Only thing I don't like about the script, other than that it's fantastic.

[HighlanderICT]

I have been dabbling with Coppermine, Gallery2, zOOm and RSGallery2 and finally decided the choice was between Coppermine and RSGallery2 ......

RSGallery2 displays the images the way I want - categories -> albums -> thumbs -> intermediate and when I click on the intermediate image it gives me a popup based on my browser window size. The one thing it also has is a full size option in the bottom corner - see attachment. I believe this is done with 'highslide' (?)
see rsgallery here - http://www.torpics.com/index.php?option=com_rsgallery2&Itemid=15

I found this thread and was happy to read that it might be possible to achieve the same thing with Coppermine (the lack of this feature was the reason I even bothered with RSGallery2). I have read through all 10 pages and have followed the instructions in the relevant posts to get the gallery functioning the way it should and the popup is also working as it should (i think). However, I can find no way for the user to view the full size pic either by clicking a link on the intermediate image page or within the popup - is there a way to do this ? Ideally i would like it to work like this
galleries -> albums -> thumbs -> intermediate -> popup with an option to view the full size pic either from the popup or from a link on the intermediate image page.
see coppermine gallery here - http://www.torpics.com/gallery/index.php

have also attached my theme.php and template.html files - using classic theme.

[SaWey]

Have a look at this post: http://forum.coppermine-gallery.net/index.php?topic=36302.0
you should be able to adjust it so suits your needs.

[HighlanderICT]

Thanks SaWey - not quite what I am looking for but a good place to start

[Mamps]

Hi there,
this Mod is working great for me, but
is there a way to skip the whole intermediate page and go directly from the thumbmail page to lightbox?

[SaWey]

It should be possible to do so, but at the moment I don't have the time too look how it should be done.
Hope someone else covers your request.

[GuiLinux]

I've looked through this thready, and I may have missed it, but I have a quick question.  Is it possible, when viewing the image, that it add to the view count?  When I view my images, everything works with the lightbox script as it's supposed to, but it does not add to the view count.  Thanks for any help you can provide.

[SaWey]

At the moment this plugin doesn't add views. Maybe if someone could add a little ajax to do that?

[Sami]

Actually I'm working on adding ajax view count to highslide plugin maybe you can use it on this plugin too

[CaleyD]

This is a cry for help...lol

I'm no expert at coding but I normally manage to find my way through even the most complex of hacks (especially when instructions are as clear as they are on this one) but I seem to have come to a total standstill on getting this to work on my site.

Myself and the guy I run the site with are at a loss.

We (or should I say he) got it to work on one of our other sites (www.torpics.com) but we can't get it to work on http://www.sandbox.caleythistleonline.com/gallery/ for love nor money.

The problem seems simple, when you open up the image it's not allowing you to click it to get the lightbox.  Have read through this entire thread and tried everything.  I have a feeling I (we) are missing something really simple.

Rather than me posting up a load of stuff if someone gets a chance to have a look and tells me what they need to see or where I should be looking then that's probably easier.

Thanks in advance.

[Sami]

You missed step 2 of modification , check your theme.php again

[CaleyD]

theme.php located in gallery/themes/classic/ reads as follows

Code Select Expand

<?php
/*************************
  Coppermine Photo Gallery
  ************************
  Copyright (c) 2003-2006 Coppermine Dev Team
  v1.1 originally written by Gregory DEMAR

  This program is free software; you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation; either version 2 of the License, or
  (at your option) any later version.
  ********************************************
  Coppermine version: 1.4.10
  $Source$
  $Revision: 3275 $
  $Author: gaugau $
  $Date: 2006-09-03 12:10:47 +0200 (So, 03 Sep 2006) $
**********************************************/

// ------------------------------------------------------------------------- //
// This theme has all CORE items removed                                     //
// ------------------------------------------------------------------------- //
define('THEME_IS_XHTML10_TRANSITIONAL',1);

// 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) {
################################################
//Set max number of images
$max = 10;  //(-1 for all pics in album)
################################################
    global $lang_display_image_php, $CONFIG;
$i = 0;
$pid = $picId['pid'];
$aid = empty($_GET['album']) ? $picId['aid'] : $_GET['album'];
$pic_data = get_pic_data($aid, $pic_count, $album_name, -1, -1, false);
$imax = 0; //counter
$max = $max/2;
foreach ($pic_data as $picture){
if ($picture['pid'] == $pid) {
//the number of the picture in  order
$picnumber = $imax;
}
$imax++;
}
//Check beginning and ending of album
if(! ($max == ((-1)/2))){
if ($imax > $max){
if ($picnumber < $max || $picnumber == 0){
$down = 0;
$up = 0 + ($max*2);
}elseif (($picnumber + $max) > $imax){
$down = $imax - ($max*2);
$up = $imax;
}else{
$down = $picnumber - $max;
$up = $picnumber + $max;
}
}else{
$down = 0;
$up = $imax;
}
}else{
$down = 0;
$up = $imax;
}

foreach ($pic_data as $picture) {
if ($i >= $down && $i <= $up){
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');
}
$picture_url_fullsize = 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_fullsize\" rel=\"lightbox[list]\" title=\"$pic_title\">";
$picList .= "<img src=\"$picture_url\" class=\"image\" border=\"0\" alt=\"$lang_display_image_php[view_fs]\" /><br />";
$picList .= "</a>\n";
}else{
$picList .= "<a href=\"$picture_url_fullsize\" rel=\"lightbox[list]\" title=\"$pic_title\"></a>\n";
}
}
}
$i++;
}
return $picList;
}//End of second part
#################################################
?>

[SaWey]

I don't think anything is wrong in your code, your images are just to small.
When they fit in your page, no lightboxlist is created.

If you always want the lightbox to work, then you have to change some code in the first part of the update:

change:

Code Select Expand


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


to:

Code Select Expand


#################################################
        //First part of lightbox update
        $pic_html = lightbox_list($CURRENT_PIC_DATA['pid']);
        //End of first part
#################################################


[CaleyD]

The above didn't work, it just stopped showing the images on the page altogether.

Decided it was easier to alter the gallery settings than try hacking the code for the lightbox and now have it working.

Thanks for the help.

[testomat]

How can i remove the animation of lightbox, because it is too slow ? Just only show the grey layer with the picture, with a next/prev button and comments under the picture.

Like this http://wolke10.de/Charming82     click on the picture. Next/Prev Button and Comments is only visible, if you signed on.

[SaWey]

You have two options:

you can change the current lightbox_s.js script this way:

FIND:

Code Select Expand


resizeDuration = (11 - resizeSpeed) * 0.15;


REPLACE WITH:

Code Select Expand


resizeDuration = 0;


This will stop the animation, but it can cause some flickering.

The second option is to download the latest version of the lightbox script at huddletogether.com, wich has an option to disable animation, but this won't have the functionality added by the people here (automatically redirect to current pic when sideshow ends etc...).

[testomat]

Hello Sawey,
thank you. That's it. I did it in my gallery.
One problem i only got, is that the prev/next button doesn't come up. I can't see it. You have an idea ?
I attached a zip file with my code.

You can see my gallery here: http://bilderbluete.de/e107_plugins/cpg149/displayimage.php?album=22&pos=1