It should work on
this url as I told you via pm too. There are pure html version files of this mod
here,
here and
here but these act as demo files only and are not showing the final implementation.
The
LightBox JS for Fullsize Popup Image mod from
here is a really awesome script and pretty easy to integrate once you find the right version to add in all of those posts of that thread. I was a little confused at first and needed to check a while until I got the things working as expected.
I am using two other visual effects on my gallery, the wonderful
Image Scroller - based on iTunes just for a random list of pictures and my own development
DHTML tooltip mod from this thread, to display enlarged images as tooltips at the mouse pointer. Besides I also did another modification with the text style menu links into image buttons showing an rollover-effect.
There was no problem integrating it with the solution described in
reply#73 on page 4 of this thread. So I uploaded that scripts subfolder in the root of my gallery as attached to this post leading to /scripts/slideshow (it already contains the modified js/lightbox.js).
Additionally I added these three lines to the head section of my
template.html in the subdirectory /themes/yourownthemes/ .
<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>
In the
original thread I was also advised to search in
include/functions.inc.php for
$query = "SELECT $select_columns FROM {$CONFIG['TABLE_PICTURES']} WHERE approved = 'YES' $META_ALBUM_SET ORDER BY RAND() LIMIT $limit2";
and change it to
$query = "SELECT $select_columns FROM {$CONFIG['TABLE_PICTURES']} WHERE approved = 'YES' $META_ALBUM_SET ORDER BY RAND() $limit";
Finally I had to modify
theme.php in the same subfolder. But there is a minor change to the implementation described in the Lightbox thread because I wanted to keep the onmouseover-Text as before if a click on the image would result in the bigger display showing that Lightbox effect.
The modified function
theme_html_picture would finally look like this:
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, $lang_display_thumbnails;
global $mypicinfo;
$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') {
$pic_title3 = $lang_picinfo['Album name']." : ". $mypicinfo['album']."\n".
$lang_display_thumbnails['filename'].$CURRENT_PIC_DATA['filename']."\n".
$lang_display_thumbnails['filesize'].($CURRENT_PIC_DATA['filesize'] >> 10).$lang_byte_units[1]." kB\n".
$lang_display_thumbnails['dimensions'].$CURRENT_PIC_DATA['pwidth']."x".$CURRENT_PIC_DATA['pheight']." Pixel\n".
$lang_picinfo['Date Added']." : ". $mypicinfo['date']."\n".
$lang_picinfo['Displayed']." : ". $mypicinfo['disp']."\n";
if ($mypicinfo['votes'] != "") {
$pic_title3.= sprintf($lang_picinfo['Rating'], $mypicinfo['votes'])." : ". //.$mypicinfo['rating']."/5";
str_repeat("*",(int)$mypicinfo['rating']);
$pic_title3=str_replace("(1 Stimmen","(1 Stimme",$pic_title3);
$pic_title3=str_replace("(1 Votes","(1 Vote",$pic_title3);
}
$pic_title2=str_replace("\n","<br />",$pic_title3);
$onmousetxt="Tip('$pic_title2')"; // sp„ter mehr Infos, z.B. Bewertungen
if (isset($image_size['reduced'])) {
$onmousetxt="Tip('$pic_title2"."<br /><br />".$lang_display_image_php['view_fs']."')";
// First part of lightbox update
// $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 onmouseover=\"" . $onmousetxt . "\" href=\"javascript:;\" onclick=\"MM_openBrWindow('displayimage.php?pid=$pid&fullsize=1','" . uniqid(rand()) . "','scrollbars=yes,toolbar=no,status=no,resizable=yes,width=$winsizeX,height=$winsizeY')\">";
$pic1_html = "onmouseover=\"" . $onmousetxt . "\" ";
$pic_html = lightbox_list($CURRENT_PIC_DATA['pid'],$pic1_html);
$pic_title = $lang_display_image_php['view_fs'] . "\n==============\n" . $pic_title;
// $pic_html .= "<img src=\"" . $picture_url . "\" class=\"image\" border=\"0\" alt=\"{$lang_display_image_php['view_fs']}\" /><br />";
// $pic_html .= "</a>\n";
// End of first part of lightbox update
} else {
$pic_html = "<img onmouseover=\"" . $onmousetxt . "\" 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:22D6F312-B0F6-11D0-94AB-0080C74C7E95" ',
'codebase' => 'codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112" ',
'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['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);
}
Note that in the referring section there are now quite a few lines commented out, spot the part starting with
// First part of lightbox updateAnd in the end you will addionally need the below function named
lightbox_list in the same file
themes.php too. It is slightly adapted for this mod from here.
//Second part of lightbox update
function lightbox_list($picId,$pic1_html) {
global $lang_display_image_php, $CONFIG;
$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, 'normal');
}
$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 ".$pic1_html."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
This will add the onmouseover functionality showing details about the image together with a seperated line 'click to enlarge'.
A working example can be seen
here.
cu,
Roli
°¿°