Advanced search  

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Pages: 1 2 3 [4] 5 6 7 8 ... 17   Go Down

Author Topic: LightBox JS for Fullsize Popup Image  (Read 402973 times)

0 Members and 1 Guest are viewing this topic.

m@rk

  • Contributor
  • Coppermine novice
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 39
Re: LightBox JS for Fullsize Popup Image
« Reply #60 on: January 27, 2007, 06:07:59 pm »

Hey SaWey,

thanks for your quick reply.

I already tried this: then the image in the CPG "display single image" is displayed in "_normal", just as it should by default, but also in the lightbox popup.

Without changing, both are displayed in full size.

How can we handle it, that an image in the CPG "display single image" is displayed in "_normal", but in full size in the lightbox popup? ...

With kind regards
Logged

SaWey

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 1119
    • SaWey.be
Re: LightBox JS for Fullsize Popup Image
« Reply #61 on: January 27, 2007, 06:36:00 pm »

To that, there is a simple solution by just adding a variable like $picture_url_fullsize like i did in the following code:

Code: [Select]
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, '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 href=\"$picture_url_fullsize\" rel=\"lightbox[list]\" title=\"$pic_title\">";
            $picList .= "<img src=\"$picture_url\" class=\"image\" border=\"0\" alt=\"Klik op de foto om originele grootte te bekijken\" /><br />";
            $picList .= "</a>\n";
}else{
$picList .= "<a href=\"$picture_url_fullsize\" rel=\"lightbox[list]\" title=\"$pic_title\"></a>\n";
}
$i++;
}
}
return $picList;
}

If you want, you can simply replace the old function with this one.

I hope this time I got it right  :)
Logged

m@rk

  • Contributor
  • Coppermine novice
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 39
Re: LightBox JS for Fullsize Popup Image
« Reply #62 on: January 27, 2007, 08:30:37 pm »

SaWey,

fantastic, absolutely fantastic, that's exactly what I was talking about.

There are still 2 bugs I can't get rid of:
  • The alternate text when hovering over the image won't change so i hard coded it in the alt="" tag

The solution is simple: just add global $lang_display_image_php to the lightbox_list($picId) function

Code: [Select]
function lightbox_list($picId) {
    global $lang_display_image_php;

and change the corresponding line in that function:

Code: [Select]
$picList .= "<img src=\"$picture_url\" class=\"image\" border=\"0\" alt=\"$lang_display_image_php[view_fs]\" /><br />";
  • 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??

Please, a developer must fix this  ::)

... 'cause with the new lightbox script contributed by Gizmo - not only viewing all the images in a selected album, even the lightbox slideshow is possible!

I'm preparing a post to summarize what we have reached so far ...
Logged

m@rk

  • Contributor
  • Coppermine novice
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 39
Re: LightBox JS for Fullsize Popup Image
« Reply #63 on: January 27, 2007, 10:42:14 pm »

EDIT: Be aware of problems caused by Step 7 and read the posts below first!

Summary of what we reached so far
- enclosing all contributions of this thread -

(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 from http://ahavriluk.home.comcast.net/slideshow.zip.

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

Step 5. Download the attached lightbox_s.js.zip and replace scripts/slideshow/js/lightbox_s.js with the included file.

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

Code: [Select]
<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 7. Paste this code before the ?> at the end of your theme.php file:

Code: [Select]
// 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) {
    global $lang_display_image_php;

$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 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
#################################################

Step 8. Upload.

Step 9. Relax  8)

Step 10. Pay attention/ developers request:

  • 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??

(And a few images lightbox doesn't seem to like, they are simply not loaded - i can't specify the problem exactly atm...)

If someone could fix that, the world would be perfect ...
« Last Edit: January 28, 2007, 10:08:29 am by m@rk »
Logged

Nibbler

  • Guest
Re: LightBox JS for Fullsize Popup Image
« Reply #64 on: January 27, 2007, 11:38:55 pm »

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

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

Code: [Select]
$query = "SELECT $select_columns FROM {$CONFIG['TABLE_PICTURES']} WHERE approved = 'YES' $META_ALBUM_SET ORDER BY RAND() $limit";
Also, $CONFIG needs to be global in the lightbox_list function.

Code: [Select]
function lightbox_list($picId) {
    global $lang_display_image_php, $CONFIG;

This mod will not work well on large albums, bear that in mind.

Another also is this code

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

 ??? :( ;)
Logged

m@rk

  • Contributor
  • Coppermine novice
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 39
Re: LightBox JS for Fullsize Popup Image
« Reply #65 on: January 28, 2007, 12:01:42 am »

... another problem:

Static links (like http://www.my_gallery.net/displayimage.php?pos=-411) don't work ("Error: The selected album/file does not exist !") while they do with Gizmo's contribution?

Until these problems are solved, the original mod by Gizmo is to prefer ...

That's kind of sad 'cause viewing all the images in a selected album and the lightbox slideshow would be great features in my opinion :'(
« Last Edit: January 28, 2007, 12:06:53 am by m@rk »
Logged

SaWey

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 1119
    • SaWey.be
Re: LightBox JS for Fullsize Popup Image
« Reply #66 on: January 28, 2007, 12:08:43 am »

Hey Nibbler,

First of all, thank you for taking the notice.

For the big albums, tomorow i'll look into the code to make it possible
to set a limit to the amount of pics loaded.

The change of the first code you put above, in which file is this?
And what's the problem with the last part?
Code: [Select]
if ($CONFIG['make_intermediate'] && $condition ) {
$picture_url = get_pic_url($picture, 'normal');
} else {
$picture_url = get_pic_url($picture, 'normal');
}


And for you Mark, i'll also look into that one,
this has to work :)
Logged

Nibbler

  • Guest
Re: LightBox JS for Fullsize Popup Image
« Reply #67 on: January 28, 2007, 12:13:12 am »

For the absolute link:

Change

Code: [Select]
$pic_html = lightbox_list($CURRENT_PIC_DATA['pid']);
to

Code: [Select]
$pic_html = lightbox_list($CURRENT_PIC_DATA);
and adjust here

Code: [Select]
function lightbox_list($picId) {
    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);

The code in the previous post was a correction to include/functions.inc.php inside get_pic_data().

There is no point in using a conditional statement if both parts are identical.
Logged

m@rk

  • Contributor
  • Coppermine novice
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 39
Re: LightBox JS for Fullsize Popup Image
« Reply #68 on: January 28, 2007, 12:57:48 am »

Thanks Nibbler, that actually solved the problem with static links.

There is no point in using a conditional statement if both parts are identical

... just the heat i guess ...  ::)

And for you Mark, i'll also look into that one, this has to work :)

We are on our way!
Thanks & good night for today
Logged

SaWey

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 1119
    • SaWey.be
Re: LightBox JS for Fullsize Popup Image
« Reply #69 on: January 28, 2007, 03:03:31 pm »

I made the changes so it is possible to set a max amount of pics shown in the slideshow.
You have to update the whole 'lightbox_list' function as following:

Code: [Select]
#################################################
 //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
#################################################

I think this solves all the problems.
Please test it.... (I haven't found any bugs yet)

Grz
Logged

m@rk

  • Contributor
  • Coppermine novice
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 39
Re: LightBox JS for Fullsize Popup Image
« Reply #70 on: January 28, 2007, 08:13:55 pm »

Seems to work fine. Good work so far.

If we only could fix the "random image" problem ...  ;)
Logged

Nibbler

  • Guest
Re: LightBox JS for Fullsize Popup Image
« Reply #71 on: January 28, 2007, 08:43:13 pm »

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

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

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

That fixes it for me, not you?
Logged

m@rk

  • Contributor
  • Coppermine novice
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 39
Re: LightBox JS for Fullsize Popup Image
« Reply #72 on: January 28, 2007, 09:12:25 pm »

Sorry, I don't get that -

this results in permanent "critical error while processing a database query"?


ooops - I didn't follow your instruction properly - seems we finally got it  ;D
Logged

SaWey

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 1119
    • SaWey.be
Re: LightBox JS for Fullsize Popup Image
« Reply #73 on: January 28, 2007, 10:11:30 pm »

Summary of how to get the Lightbox thingy working:
- enclosing all contributions of this thread -

(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 from http://ahavriluk.home.comcast.net/slideshow.zip.

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

Step 5. Download the attached lightbox_s.js.zip and replace scripts/slideshow/js/lightbox_s.js with the included file.

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

Code: [Select]
<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 7. Paste this code before the ?> at the end of your theme.php file:

Code: [Select]
// 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
#################################################

Step 8. Making sure the random images are shown:

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

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

change to

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

Step 9. Upload

Step 10. Relax  8)
Logged

olti

  • Coppermine regular visitor
  • **
  • Offline Offline
  • Posts: 68
    • Galeria Shqiptare - Albanian Gallery
Re: LightBox JS for Fullsize Popup Image
« Reply #74 on: January 30, 2007, 01:22:59 pm »

For me it doesnt work, the image opens up in a new page!
Logged

Ben.Hahlen

  • Coppermine newbie
  • Offline Offline
  • Gender: Male
  • Posts: 3
    • BenWeb
Re: LightBox JS for Fullsize Popup Image
« Reply #75 on: January 30, 2007, 01:27:30 pm »

For me the latest code of the theme.php doesn't work either, ie the pictures are not shown. When using the code for theme.php a few posts up, it does work properly, but I'm not enough of a coder to find what the difference is.
Another question I have is in which file the following code
Code: [Select]
$query = "SELECT $select_columns FROM {$CONFIG['TABLE_PICTURES']} WHERE approved = 'YES' $META_ALBUM_SET ORDER BY RAND() LIMIT $limit2";should be changed to
Code: [Select]
$query = "SELECT $select_columns FROM {$CONFIG['TABLE_PICTURES']} WHERE approved = 'YES' $META_ALBUM_SET ORDER BY RAND() $limit";Thanks in advance
Logged

m@rk

  • Contributor
  • Coppermine novice
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 39
Re: LightBox JS for Fullsize Popup Image
« Reply #76 on: January 30, 2007, 01:59:15 pm »

The code in the previous post was a correction to include/functions.inc.php inside get_pic_data().
Logged

SaWey

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 1119
    • SaWey.be
Re: LightBox JS for Fullsize Popup Image
« Reply #77 on: January 30, 2007, 07:20:54 pm »

For those where it won't work,
be absolutly sertain the paths to the corresponding files are right!

maybe you put in the code:
Code: [Select]
<script type="text/javascript" src="scripts/slideshow/js/prototype.js"></script>

When actualy you putted the file in:
Code: [Select]
<script type="text/javascript" src="scripts/js/prototype.js"></script>

Check that and if it still won't work, give all info you can so we can help.

Grz
Logged

Ben.Hahlen

  • Coppermine newbie
  • Offline Offline
  • Gender: Male
  • Posts: 3
    • BenWeb
Re: LightBox JS for Fullsize Popup Image
« Reply #78 on: January 30, 2007, 11:58:04 pm »

Whoops, missed that one, sorry for that.
Logged

olti

  • Coppermine regular visitor
  • **
  • Offline Offline
  • Posts: 68
    • Galeria Shqiptare - Albanian Gallery
Re: LightBox JS for Fullsize Popup Image
« Reply #79 on: January 31, 2007, 12:55:08 am »

I think I know where is the problem for me.

I found this:

Quote
It doesn't work at all. The image opens up in a new page. What's wrong?
    This is commonly caused by a conflict between JS scripts. Check your body tag and look for an onload attribute. Example:
    <body onload="MM_preloadImages(‘/images/menu_on.gif’)…;">
    A quick fix to this problem is to append the initLightbox() to the onload attribute as so:
    <body onload="MM_preloadImages(‘/images/menu_on.gif’)…;initLightbox()">

The problem is I don't know where to put …;initLightbox()">. Which is the file that should be modified?
Logged
Pages: 1 2 3 [4] 5 6 7 8 ... 17   Go Up
 

Page created in 0.086 seconds with 20 queries.