Advanced search  

News:

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

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

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

0 Members and 1 Guest are viewing this topic.

Gizmo

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 1015
    • BullsEye Photos
LightBox JS for Fullsize Popup Image
« on: August 29, 2006, 04:06:36 am »

This afternoon I posted a hack for a different type of popup window for the fullsize image using the GreyBox-http://amix.dk/greybox/demo.html script at http://forum.coppermine-gallery.net/index.php?topic=35530.0. I've been trying to incorporate the LightBox script but had a few issues passing the popup image variable to LightBox since it needs to have an image file ending in .gif or .jpg (maybe others as well) and the method used in the function theme_html_picture() wasn't working. After nearly choking on my steak at dinner, I thought of passing the information to a new variable and using this method worked as planned.  :D You can check it out here by clicking on any intermediate image to get the popup - http://www.bullseyephotos.com/gallery/index.php?theme=OrangeSky_LB.

So on with the good stuff.
Step 1: Download the LightBox JS v2.02 scripts from http://www.huddletogether.com/projects/lightbox2/ and follow the instructions for setting up the files.

Step 2: Paste this code into your theme.php. If you already have the function theme_html_picture() in your theme.php, at the end I've shown only the parts I've modified. You'll have to test it to make sure they work with any modifications you may have.

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'])) {
        $picfull_url = get_pic_url($CURRENT_PIC_DATA, 'fullsize');
        $pic_title = $CURRENT_PIC_DATA['title'];
            $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 href=\"$picfull_url\" rel=\"lightbox\" title=\"$pic_title\">";
            $pic_html .= "<img src=\"" . $picture_url . "\" class=\"image\" border=\"0\" alt=\"{$lang_display_image_php['view_fs']}\" /><br />";
            $pic_html .= "</a>\n";
        } 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);
}

The code that I modified is this-
Code: [Select]
    if ($mime_content['content']=='image') {
        if (isset($image_size['reduced'])) {
            $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 href=\"javascript:;\" onclick=\"MM_openBrWindow('displayimage.php?pid=$pid&amp;fullsize=1','" . uniqid(rand()) . "','scrollbars=yes,toolbar=yes,status=yes,resizable=yes,width=$winsizeX,height=$winsizeY')\">";
            $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";
        } else {
            $pic_html = "<img src=\"" . $picture_url . "\" {$image_size['geom']} class=\"image\" border=\"0\" alt=\"\" /><br />\n";
        }

to this-
Code: [Select]
    if ($mime_content['content']=='image') {
        if (isset($image_size['reduced'])) {
    $picfull_url = get_pic_url($CURRENT_PIC_DATA, 'fullsize');
    $pic_title = $CURRENT_PIC_DATA['title'];
            $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 href=\"$picfull_url\" rel=\"lightbox\" title=\"$pic_title\">";
            $pic_html .= "<img src=\"" . $picture_url . "\" class=\"image\" border=\"0\" alt=\"{$lang_display_image_php['view_fs']}\" /><br />";
            $pic_html .= "</a>\n";
        } else {
            $pic_html = "<img src=\"" . $picture_url . "\" {$image_size['geom']} class=\"image\" border=\"0\" alt=\"\" /><br />\n";
        }


I think this is even cooler than the GreyBox hack since it allows for smoother scrolling if the image doesn't fit completely in the browser window. As I said in the other post, I'm not a solid PHP coder and Coppermine Guru so I'm hoping a more experienced user or Dev will have a look and make sure the method I've used is solid and safe.

Many thanks go out to Lokesh Dhakar who developed this code so please support him with an email or a donation at http://www.huddletogether.com/projects/lightbox2/#contact.

Cheers,

Gizmo  :)
« Last Edit: December 10, 2006, 01:12:09 pm by Gizmo »
Logged
Did you read the manual first???? Taking 2 minutes to backup your files can save you hours of wondering what you screwed up.
Billy Bullock - BullsEyePhotos Blog of Indecision

Stramm

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 6006
Re: LightBox JS for Fullsize Popup Image
« Reply #1 on: August 29, 2006, 07:30:38 am »

I love the lightbox look and I'm using it myself on my joomla powered site. Unfortunately it's a pain to do the slideshow with it... at least with bigger albums.
Logged
my CPG sandbox: Version 1.4.18 with modpack running my Tentacle theme:
http://stramm.st.funpic.org/

volcanina

  • Coppermine newbie
  • Offline Offline
  • Posts: 3
Re: LightBox JS for Fullsize Popup Image
« Reply #2 on: September 26, 2006, 09:20:37 pm »

I love it! Install is easy, effect is great, and I get rid of the pop-up I always hated. Thanks Gizmo!
Logged

-|wayne|-

  • Contributor
  • Coppermine newbie
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 19
    • Bluemonkey
Re: LightBox JS for Fullsize Popup Image
« Reply #3 on: September 27, 2006, 01:42:44 am »

yes this does look cool !!  nice work

you say easy to instal!   :(

can you tell how to please :)

ive read everthing and i have dl the files.... but where do i put them? which folder?

and where to do i paste the code in the theme.php? top, bottom, between where?

thx in advance.........
Logged

Gizmo

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 1015
    • BullsEye Photos
Re: LightBox JS for Fullsize Popup Image
« Reply #4 on: September 27, 2006, 02:16:51 am »

Wayne Dude... lay off the caffeine!

1. Download the LightBox JS files from the above link

2. Copy the js & css folders to your theme folder

3. Copy the images from the LightBox JS image folder to your theme/images folder

4. Add this code to the head section of your template.html file and change the directories to match yours
Code: [Select]
<link rel="stylesheet" href="themes/your_theme_folder/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="themes/your_theme_folder/js/prototype.js"></script>
<script type="text/javascript" src="themes/your_theme_folder/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="themes/your_theme_folder/js/lightbox.js"></script>

5. 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'])) {
        $picfull_url = get_pic_url($CURRENT_PIC_DATA, 'fullsize');
        $pic_title = $CURRENT_PIC_DATA['title'];
            $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 href=\"$picfull_url\" rel=\"lightbox\" title=\"$pic_title\">";
            $pic_html .= "<img src=\"" . $picture_url . "\" class=\"image\" border=\"0\" alt=\"{$lang_display_image_php['view_fs']}\" /><br />";
            $pic_html .= "</a>\n";
        } 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);
}

6. Upload

7. Relax!

[EDIT] - see below for better installation details.
« Last Edit: September 27, 2006, 10:39:34 pm by Gizmo »
Logged
Did you read the manual first???? Taking 2 minutes to backup your files can save you hours of wondering what you screwed up.
Billy Bullock - BullsEyePhotos Blog of Indecision

-|wayne|-

  • Contributor
  • Coppermine newbie
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 19
    • Bluemonkey
Re: LightBox JS for Fullsize Popup Image
« Reply #5 on: September 27, 2006, 02:31:23 pm »

LMAO..... ;D ;D  i am relaxed, very relaxed in fact .... maybe it was the way i typed the post???, did it look like a stressful post???

anyhow, thx for a more detailed way of how to do it. i will give it a go in a mo and let you know how i get on.

cheers Gizmo 
Logged

-|wayne|-

  • Contributor
  • Coppermine newbie
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 19
    • Bluemonkey
Re: LightBox JS for Fullsize Popup Image
« Reply #6 on: September 27, 2006, 02:43:22 pm »

GIZMO! worked wonderfully....thankyou kindly for your help, and more detailed how to.
 ;)

Logged

Gizmo

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 1015
    • BullsEye Photos
Re: LightBox JS for Fullsize Popup Image
« Reply #7 on: September 27, 2006, 04:58:54 pm »

Great. :D  Glad to have another happy user onboard.
Logged
Did you read the manual first???? Taking 2 minutes to backup your files can save you hours of wondering what you screwed up.
Billy Bullock - BullsEyePhotos Blog of Indecision

David9

  • Coppermine newbie
  • Offline Offline
  • Posts: 7
Re: LightBox JS for Fullsize Popup Image
« Reply #8 on: September 27, 2006, 05:51:49 pm »

Hello!

I tried to install it in my CG but the image stays very big.

How can i reduce the size of it?
Logged

-|wayne|-

  • Contributor
  • Coppermine newbie
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 19
    • Bluemonkey
Re: LightBox JS for Fullsize Popup Image
« Reply #9 on: September 27, 2006, 06:25:45 pm »

thx Gizmo...  :D

the images arent showing though!  The close and loading ones.

i have tried editing the lightbox.js with that showed:

Code: [Select]
var fileLoadingImage = "/images/loading.gif";
var fileBottomNavCloseImage = "/images/closelabel.gif";

and replaced with

Code: [Select]
var fileLoadingImage = "photos/themes/mac_ox_x/images/loading.gif";
var fileBottomNavCloseImage = "photos/themes/mac_ox_x/images/closelabel.gif";

but didnt make any difference?

any ideas,

thx again!  a happy poster  ;)
Logged

rphMedia

  • Contributor
  • Coppermine addict
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 515
  • ***muvipix.com***
    • muvipix - Music | Video | Pictures
Re: LightBox JS for Fullsize Popup Image
« Reply #10 on: September 27, 2006, 08:00:37 pm »

the images arent showing though!  The close and loading ones.

You need to put the lightbox images in your   ...gallery root/images/ folder.

Another nice one Gizmo !


Just a little tid-bit...

If you want to close the image by just a "click to close", find in lightbox.js:

Code: [Select]
var objLightbox = document.createElement("div");
objLightbox.setAttribute('id','lightbox');
objLightbox.style.display = 'none';
// Add the next line
objLightbox.onclick = function() { myLightbox.end(); return false; }

-|wayne|-

  • Contributor
  • Coppermine newbie
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 19
    • Bluemonkey
Re: LightBox JS for Fullsize Popup Image
« Reply #11 on: September 27, 2006, 08:09:31 pm »

cool thx......  ;D
Logged

Gizmo

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 1015
    • BullsEye Photos
Re: LightBox JS for Fullsize Popup Image
« Reply #12 on: September 27, 2006, 10:26:53 pm »

OK... in my original post I said to follow the instructions for installing the LightBox JS scripts and now I remember why. I didn't want to have to write out all the details but seems I better do so since I left a few items out last night. So below are all the details to completely install this script. It's easy so don't let this put you off from trying it.

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
Code: [Select]
var fileLoadingImage = "images/loading.gif";
var fileBottomNavCloseImage = "images/closelabel.gif";

Change to
Code: [Select]
var fileLoadingImage = "themes/your_theme/lightbox/images/loading.gif";
var fileBottomNavCloseImage = "themes/your_theme/lightbox/images/closelabel.gif";

Step 6. Add this code to the head section of your template.html file and change the directories to match yours
Code: [Select]
<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 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'])) {
        $picfull_url = get_pic_url($CURRENT_PIC_DATA, 'fullsize');
        $pic_title = $CURRENT_PIC_DATA['title'];
            $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 href=\"$picfull_url\" rel=\"lightbox\" title=\"$pic_title\">";
            $pic_html .= "<img src=\"" . $picture_url . "\" class=\"image\" border=\"0\" alt=\"{$lang_display_image_php['view_fs']}\" /><br />";
            $pic_html .= "</a>\n";
        } 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);
}

Step 8. Upload

This should do it.
« Last Edit: September 27, 2006, 10:34:40 pm by Gizmo »
Logged
Did you read the manual first???? Taking 2 minutes to backup your files can save you hours of wondering what you screwed up.
Billy Bullock - BullsEyePhotos Blog of Indecision

Gizmo

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 1015
    • BullsEye Photos
Re: LightBox JS for Fullsize Popup Image
« Reply #13 on: September 27, 2006, 10:37:41 pm »

Wayne,

You need to do step 5 above to change the image path of the loading and close images in the lightbox.js file. Sorry, I left that out last night. Chaulking it up to a lack of beer!
Logged
Did you read the manual first???? Taking 2 minutes to backup your files can save you hours of wondering what you screwed up.
Billy Bullock - BullsEyePhotos Blog of Indecision

-|wayne|-

  • Contributor
  • Coppermine newbie
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 19
    • Bluemonkey
Re: LightBox JS for Fullsize Popup Image
« Reply #14 on: September 27, 2006, 10:41:56 pm »

yep that explains it simply enough!... i would have been able to do that 1st time round.... nice work again!!!

there is another lil thing that i would like to adjust:

when i open a larger image (with lightbox fx), its a lil low.. and i have to scroll down (about 30px) to see the whole image and to see the close button. but the larger image with white border fits fully in the screen area.

so i was wondering if theres an anchor point that i could adjust, so that i could it fits exactly??

is this possible? if so could you direct me to the right place of coding to adjust

many thx again   ;D

a happy user
Logged

Gizmo

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 1015
    • BullsEye Photos
Re: LightBox JS for Fullsize Popup Image
« Reply #15 on: September 27, 2006, 11:26:34 pm »

@David9
Quote
I tried to install it in my CG but the image stays very big.

How can i reduce the size of it?

Attached is a new lightbox.js file I found on this post - http://www.huddletogether.com/forum/comments.php?DiscussionID=307&page=1#Item_0 that seems to do what you want. I only briefly tested it so it's up to you to make sure it works 100% but I think it's still beta. Follow Step 5 above to configure the image path for the loading and close image.

Also. check out the above link for other features. The file I've attached here is called lightbox_s.js in the zip file from the above link. I changed the name to make the installations the same as my previous post.

@Wayne, either try the attached script for fitting larger images in the browser window or take a look at this code in the lightbox.js file.
Code: [Select]
    var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 15);

Changing it to this raises the popup
Code: [Select]
    var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 30);

I'll leave it to you to find the best fit for your needs.
Logged
Did you read the manual first???? Taking 2 minutes to backup your files can save you hours of wondering what you screwed up.
Billy Bullock - BullsEyePhotos Blog of Indecision

Gizmo

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 1015
    • BullsEye Photos
Re: LightBox JS for Fullsize Popup Image
« Reply #16 on: September 27, 2006, 11:37:25 pm »

Hey rphMedia,

Thanks and nice little patch there to allow closing on clicking the image. I was using a different fix but this one is only a single line change. Always better to change only one line when possible. ;)

Cheers,

Gizmo

Logged
Did you read the manual first???? Taking 2 minutes to backup your files can save you hours of wondering what you screwed up.
Billy Bullock - BullsEyePhotos Blog of Indecision

-|wayne|-

  • Contributor
  • Coppermine newbie
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 19
    • Bluemonkey
Re: LightBox JS for Fullsize Popup Image
« Reply #17 on: September 28, 2006, 12:45:03 am »

thx Gizmo...that worked fine  ;D

Code: [Select]
var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 40); centered at 40!

i only put the css and js files in the (new) lightbox folder (4got 2move images folder), and the images for close/loading are working fine !..... just 4t id mention it ::)

hey rphMedia, that little line was sweet 4me 2...thx!    do you know how to set the alt= saying: click this photo to close window, like in original popup window.... any ideas?? code would be sweet.

thx 4ya time guys..... next time u go 2ya local pub say ya drinks is on wayne (hehe)
Logged

-|wayne|-

  • Contributor
  • Coppermine newbie
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 19
    • Bluemonkey
Re: LightBox JS for Fullsize Popup Image
« Reply #18 on: September 28, 2006, 12:50:01 am »

oops !!  :-\

Gizmo i 4got to ask if you might be able to help on this issue

http://forum.coppermine-gallery.net/index.php?topic=36660.0

'as u seem 2b sum1 that knows whats wot....'

thx in advance  ;)
Logged

Gizmo

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 1015
    • BullsEye Photos
Re: LightBox JS for Fullsize Popup Image
« Reply #19 on: September 28, 2006, 02:18:15 am »

Wayne, one issue per post. Start a new post or check out this - http://forum.coppermine-gallery.net/index.php?topic=18635.msg86000#msg86000.
Logged
Did you read the manual first???? Taking 2 minutes to backup your files can save you hours of wondering what you screwed up.
Billy Bullock - BullsEyePhotos Blog of Indecision
Pages: [1] 2 3 4 5 ... 17   Go Up
 

Page created in 0.034 seconds with 20 queries.