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
var fileLoadingImage = "images/loading.gif";
var fileBottomNavCloseImage = "images/closelabel.gif";
Change to
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
#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
<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
// 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