LightBox JS for Fullsize Popup Slideshow

[SaWey]

This mod is a fork of LightBox JS for Fullsize Popup Image,
as I've used a lot of space in that thread and people don't seem to find the right way to implement this mod,
I created this new thread with a new version.

This version uses the following scripts:
prototype 1.4
SWFObject v1.5 (fixes error in FF)
Lightbox v2.03.3 (fixes flash movies showing above slideshow)
  -> lightbox_s is updated to this version and has all earlier features available:


What does it do?
It adds a nice new feature
This mod will override the default popup of showing the fullsize picture and it will show a nice Lightbox popup.
It is also a slideshow, you can navigate through the images in the selected album with the arrow keys or with your mouse.

Is there any configuration?
This mod is fine by default, but if you want, you can change some things in lightbox_s.js to suit your needs.
Look for the "Configuration" part in that file, there you can change the following thing:

• Animated transitions (animate)
• Transition speed (resizeSpeed)
• Border size (borderSize)
• Loop the slideshow (foreverLoop)
• Go to last image's page on exit (go_to_last_image_on_exit)

If you want to add music when playing the slideshow, see this post

There are some more options, but these are the most important.



The slideshow, by default, only takes the next 10 images in the album, this to prevent overloading big albums.
If you want to change that, you will have to do this in your theme.php function 'lightbox_list()'.
The first line of that function has a variable to set the maximum images for a slideshow.


How do I install it?
- enclosing all contributions of other people -

(Note: attachment and install-guide based on new lightbox/slideshow script contributed in the link on http://www.huddletogether.com/forum/comments.php?DiscussionID=307&page=1#Item_0)

Step 1. Backup your theme folder!

Step 2. If you haven't done already, create a folder called scripts in your gallery root directory.

Step 3. Download slideshow.zip attached to this post

Step 4. Extract the whole slideshow folder into your (newly created) scripts folder.

Step 5. Add this code to the head section of your template.html file:

Code Select Expand

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

Step 6. 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);
//End of first part
#################################################
        } else {
$pic_html = lightbox_list($CURRENT_PIC_DATA);
        //    $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;
}

$pic_already_shown = false; //fix to remove duplicate entries
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;
}
$picture_page = "./displayimage.php?album=".$picture['aid']."&pos=-".$picture['pid'];
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 && !$pic_already_shown ) {
$picList .= "<a href=\"$picture_url_fullsize\" picpage=\"$picture_page\" 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";
$pic_already_shown = true; //fix to remove duplicate entries

}else{
$picList .= "<a href=\"$picture_url_fullsize\" picpage=\"$picture_page\" rel=\"lightbox[list]\" title=\"$pic_title\"></a>\n";
}
}
}
$i++;
}
return $picList;
}//End of second part
#################################################


Step 7. Making sure the random images are shown:
These changes are in include/functions.inc.php.

I don't know if this is a bug or not, doesn't cause problems on its own.

Code Select Expand


$query = "SELECT $select_columns FROM {$CONFIG['TABLE_PICTURES']} WHERE approved = 'YES' $META_ALBUM_SET ORDER BY RAND() LIMIT $limit2";


change to

Code Select Expand


$query = "SELECT $select_columns FROM {$CONFIG['TABLE_PICTURES']} WHERE approved = 'YES' $META_ALBUM_SET ORDER BY RAND() $limit";


Step 8. Upload

Step 9. Relax 





Some premature error handling:
If this thing won't work, please look at these possible solutions first:

1. -Be absolutly certain the paths to the scripts are right!

maybe you put in the code:

Code Select Expand


<script type="text/javascript" src="scripts/slideshow/js/prototype.js"></script>


When actualy you putted the file in:

Code Select Expand


<script type="text/javascript" src="scripts/js/prototype.js"></script>


2. -The navigation images aren't showing up?

in 'css/lightbox.css' be sure the following lines are correct:

Code Select Expand


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


and in 'js/lightbox_s.js':

Code Select Expand


var path_to_images = "scripts/slideshow/images/"; //path to your images






Changelog:

11/13/2008:
- Added internationalization.
- Added download link option + download image option.
01/19/2008:
- Fixed to not show duplicate images on 'Last Comments' album.
- Fixed proper working of fixed image size.





Final point: This mod goes unsupported!
This mod should work as is, so please follow the instructions as good as possible.
If something goes wrong, read the instructions again.

When you ask for support in this thread, don't expect a fast answer by me, I'm very busy atm.


Enjoy the mod, and if you have something to contribute, please do so.

[Gephri]

Demo link please - would like to see it in all its brilliance, as well as see what happens to image ratings and comments.

Thanks

[SaWey]

I don't have a demo online, will have to wait a bit.
It doesn't include ratings nor comments, those stay on the regular pages.

[Pieter.txt]

Demo link please - would like to see it in all its brilliance, as well as see what happens to image ratings and comments.

Thanks

See this Blog-post: http://www.tihass.de/74-coppermine-fullsize-slideshow.html
For those who don't understand German: click on the link "Galerie" below the last step.

[Gephri]

thanks - that does look really nice!
any chance of having someone routed to the image showing in the slideshow when ever it is clicked?  that way the viewer can post a comment, rating or view picture details if interested.

[SaWey]

it actualy does what you request, when you exit the slideshow, you are redirected to the page of the last picture seen.

[Gephri]

great - i haven't been able to get there becuase my images are too big for the screen and roll off - so the closing "x" can't be seen.  Tried to adapt the js so that it limits the size of the popup - but couldn't.
The previous version is attached if anyone would like to take a crack.

[wwwebguru]

Great Mod guys...thanks! Works awesome except I noticed one hitch after installing it.

The Resize Thumbnail/Images Utility in the Admin Tools doesn't work. Because my images where so large (off the screen) I had to delete and reload instead of resizing with the utility. Any ideas?

Thanks again!!

[Obelix]

Extra info for point 7.

Step 7. Making sure the random images are shown:

these changes are in file include/functions.inc.php.
I tried to looking for that string in file mentioned in 6.

[SaWey]

Thanks for noticing, changed it in my post.

[adi4x]

I was looking to install a simmilar addon called ThickBox http://jquery.com/demo/thickbox/
Since this one worked very good ...

Many Thank's

Adrian Toma
www.tomasphotos.com

[Gephri]

what was changed...?

Thanks for noticing, changed it in my post.

[SaWey]

look in the post above that post...

[adi4x]

If someone knows how to add music with this script please let me know

Im trying to add this
http://tomasphotos.com/scripts/music/song.mp3

[SaWey]

That's easy, but it has a bug in firefox -> when new pic shows, the music restarts.
Anyway, here's the change:


Replace this:

Code Select Expand


if ($picture['pid'] == $pid) {
$picList .= "<a href=\"$picture_url_fullsize\" picpage=\"$picture_page\" 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\" picpage=\"$picture_page\" rel=\"lightbox[list]\" title=\"$pic_title\"></a>\n";
}



With this:

Code Select Expand


if ($picture['pid'] == $pid) {
$picList .= "<a href=\"$picture_url_fullsize\" music=\"http://tomasphotos.com/scripts/music/song.mp3\" picpage=\"$picture_page\" 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\" music=\"http://tomasphotos.com/scripts/music/song.mp3\" picpage=\"$picture_page\" rel=\"lightbox[list]\" title=\"$pic_title\"></a>\n";
}


[Gephri]

I'm have installed Lightbox v2.03.3 and love it.  However I am using lightbox.js v2.02 with the Mod so that the size of the popup images is a fixed size (uplaoded files are typically larger than the screen).

Does using lightbox.js v2.02 with Lightbox v2.03.3 stop any functions?

If so, will there be a lightbox.js v2.03.3 coming out that limits the size of the popup window?

[adi4x]

That's easy, but it has a bug in firefox -> when new pic shows, the music restarts.
Anyway, here's the change:
...

Still not working (music not playing and slideshow play button disabled)
but ive decided to play the music from and external plugin source

[SaWey]

I'm have installed Lightbox v2.03.3 and love it.  However I am using lightbox.js v2.02 with the Mod so that the size of the popup images is a fixed size (uplaoded files are typically larger than the screen).

Does using lightbox.js v2.02 with Lightbox v2.03.3 stop any functions?

If so, will there be a lightbox.js v2.03.3 coming out that limits the size of the popup window?

The 2.03.3 fixes some minor bugs, so you won't miss any important features. though this version has some premodified things that were developed in the old thread (like redirect on exit...)
I will do the fixed size in the future, need to find some time first.

[.andrew]

Could you please make an lite version, withouth the slideshow, so it will only dislay that image, not the entire album on a slideshow.thanks

[SaWey]

You better use the other one then: LightBox JS for Fullsize Popup Image