LightBox JS for Fullsize Popup Slideshow - Page 5 LightBox JS for Fullsize Popup Slideshow - Page 5
 

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]

Main Menu

LightBox JS for Fullsize Popup Slideshow

Started by SaWey, January 08, 2008, 01:01:26 AM

Previous topic - Next topic

0 Members and 2 Guests are viewing this topic.

imgr8

I installed it and the slideshow works fine but when I click on the thumbnail on the main page to go to the image page, it shows the full-sized image instead of the _normal pic. I understand that when you upload a pic..there is a thumbnail image created along with a _normal and then a full size pic. Is it the lightbox error or something else? I got this error after I installed the mod though.

ronronmx

Sorry if this is a stupid question, but could you use the same procedure to install the highslide script instead of lightbox? If not, has there been any explanations on how to use highslide for the full size image popup?

thx...

Stephane

Joachim Müller

Keep issues that are related to another mod to the thread that deals with that particular mod. We don't allow cross-postings nor thread drift, especially on announcement threads.

Issues related to the Highlside mod are not meant to go into the lightbox mod thread and vice versa.

phatair

Hi,
i installed the lightbox and it works perfectly - thanks a lot.

But i have one question - is it possible that lightbox show my pictures in the original size. It looks like that the image with lightbox is a little bit smaller than the original?

Thanks a lot.

phatair

Sorry - no option to edit my topic.

i forget the info: i made the change in the lightbox_s.js file "var resize = 0;// Set 0 to disable auto-resizing" but the image is smaller than the original :(

alligator

Quote from: SaWey on January 08, 2008, 01:01:26 AM

Step 7. Making sure the random images are shown:
These changes are in include/functions.inc.php.
What exactly does this mean?

The random images are shown on my startpage, but when I click them I just get a white page.
The links on the random images look like ...cpg/displayimage.php?album=random&cat=0&pos=-5776
When using an unmodified theme the links look the same, but I can click them. So the problem should be somewhere in the theme modification, but I'm using only standard themes which come with CPG 1.4.18.

and btw: Thanks for the excellent work. :)

alligator

The problem exists only when the logged in user has access to too many pictures.
If he has only access to less than ~4000 pictures the links on the random pics work as usual.

If he has access to more than ~4000 pictures, clicking the random pics leads to a white page.

The problem is independent of $max being 10, 1000 or -1.
function lightbox_list($picId) {
################################################
//Set max number of images
$max = 10; //(-1 for all pics in album)


What can I do, since the random pics are the most enjoyed feature of the users?
(The webserver is mine, dualcore, 2GB RAM and high script runtime.)

alligator

Ok and here is the solution:

Please be careful, since I do not know PHP and MySQL

alligator

Ok and here is the solution:

Please be careful, since I do not know PHP and MySQL

Change case 'random' in functions.inc.php


        case 'random': // Random pictures
                if ($META_ALBUM_SET && $CURRENT_CAT_NAME) {
                        $album_name = $lang_meta_album_names['random'].' - '. $CURRENT_CAT_NAME;
                } else {
                        $album_name = $lang_meta_album_names['random'];
                }

                $query = "SELECT COUNT(*) from {$CONFIG['TABLE_PICTURES']} WHERE approved = 'YES' $META_ALBUM_SET";
                $result = cpg_db_query($query);
                $nbEnr = mysql_fetch_array($result);
                $pic_count = $nbEnr[0];
                mysql_free_result($result);

                //if($select_columns != '*') $select_columns .= ', aid, owner_id, owner_name';
                $select_columns = '*'; //allows building any data into any thumbnail caption
                // if we have more than 1000 pictures, we limit the number of picture returned
                // by the SELECT statement as ORDER BY RAND() is time consuming
  //                              /* Commented out due to image not found bug
                if ($pic_count > 3000) {

$max_picture_id = 10000;
$i0 = rand(0, $max_picture_id);
$i1 = rand(0, $max_picture_id);
$i2 = rand(0, $max_picture_id);
$i3 = rand(0, $max_picture_id);
$i4 = rand(0, $max_picture_id);
$i5 = rand(0, $max_picture_id);
$i6 = rand(0, $max_picture_id);
$i7 = rand(0, $max_picture_id);
$i8 = rand(0, $max_picture_id);
$i9 = rand(0, $max_picture_id);
$i10 = rand(0, $max_picture_id);
$i11 = rand(0, $max_picture_id);
$i12 = rand(0, $max_picture_id);
$i13 = rand(0, $max_picture_id);
$i14 = rand(0, $max_picture_id);
$i15 = rand(0, $max_picture_id);
$i16 = rand(0, $max_picture_id);
$i17 = rand(0, $max_picture_id);
$i18 = rand(0, $max_picture_id);
$i19 = rand(0, $max_picture_id);
$i20 = rand(0, $max_picture_id);
$i21 = rand(0, $max_picture_id);
$i22 = rand(0, $max_picture_id);
$i23 = rand(0, $max_picture_id);
$i24 = rand(0, $max_picture_id);
$i25 = rand(0, $max_picture_id);
$i26 = rand(0, $max_picture_id);
$i27 = rand(0, $max_picture_id);
$i28 = rand(0, $max_picture_id);
$i29 = rand(0, $max_picture_id);
$i30 = rand(0, $max_picture_id);


                        $result = cpg_db_query("SELECT $select_columns FROM {$CONFIG['TABLE_PICTURES']} WHERE (pid = $i0 OR pid = $i1 OR pid = $i2 OR pid = $i3 OR pid = $i4 OR
pid = $i5 OR pid = $i6 OR pid = $i7 OR pid = $i8 OR pid = $i9 OR pid = $i10 OR pid = $i11 OR pid = $i12 OR pid = $i13 OR pid = $i14 OR
pid = $i15 OR pid = $i16 OR pid = $i17 OR pid = $i18 OR pid = $i19 OR pid = $i20 OR pid = $i21 OR pid = $i22 OR pid = $i23 OR pid = $i24 OR
pid = $i25 OR pid = $i26 OR pid = $i27 OR pid = $i28 OR pid = $i29 OR pid = $i30) AND approved = 'YES' $ALBUM_SET ORDER BY RAND() $limit");
                } else {
                $query = "SELECT $select_columns FROM {$CONFIG['TABLE_PICTURES']} WHERE approved = 'YES' $META_ALBUM_SET ORDER BY RAND() $limit";
                $result = cpg_db_query($query);
      }
                $rowset = array();
                while($row = mysql_fetch_array($result)){
                        $rowset[-$row['pid']] = $row;
                }
                mysql_free_result($result);

                if ($set_caption) build_caption($rowset);

                $rowset = CPGPluginAPI::filter('thumb_caption_random',$rowset);

                return $rowset;
                break;



It works perfectly for me, it has only the disadvantage, that I hardcoded the max pid in the code $max_picture_id = 10000; Currently I have only 7000 pictures, so I made it a bit higher and took 30 random numbers when only needing 12. Otherwise the chosen random pids might not be existant and in that case there would be less random pictures displayed.

I'm sure there is a easy way of getting the max pid with a SQL request out of the database. Feel free to tell me  ::)

Can somebody please fix this issue for CPG1.4.19 or 1.5?

One last thing remains:
When I click a random image I'm forwarded to the page with the intermediate image, only the intermediate image does not show. I need to klick it again from the film strip below, then it appears and I can click it to enter the lightbox. Can anybody help? ???

efekt

Ive added the part with the music in theme.php like this

if ($picture['pid'] == $pid && !$pic_already_shown ) {
$picList .= "<a href=\"$picture_url_fullsize\" music=\"/music/nocturne.mp3\" picpage=\"$picture_page\" rel=\"lightbox[list]\" title=\"$pic_title\">";
$picList .= "<img src=\"$picture_url\" class=\"image\" border=\"0\" alt=\"$lang_display_image_php[view_fs]\" /><br />";
$picList .= "</a>\n";
$pic_already_shown = true; //fix to remove duplicate entries

}else{
$picList .= "<a href=\"$picture_url_fullsize\" music=\"/music/nocturne.mp3\" picpage=\"$picture_page\" rel=\"lightbox[list]\" title=\"$pic_title\"></a>\n";
}


and its not working... all slideshow disabled now... any idea why??  ;)

http://hmr6dobl2ii0.az.pl/shop/


efekt

somebody forgot to mention that including the script for player is needed in template.html

AFTER
<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>


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

however... the slideshow is working, the player is showed, the music is not playing in either FF3 or IE7... suggestions?? ideas?? please??

I've tested the whole code separately and the music is playing, in the lightbox slideshow is not...


SaWey

Try setting the correct path to the mp3 file

Change
../scripts/slideshow/music/song.mp3

To
scripts/slideshow/music/song.mp3

efekt

did that, wasnt working... installed the whole thing again and its working... no idea what was fu**** up... thx for help though

efekt

me again  ;)

in Lightbox v2.02 there was something like this for the music

if (firstTime == 1) {
                  //firstTime = 0;
  new Effect.Parallel(
[ new Effect.SlideDown( 'imageDataContainer', { sync: true, duration: resizeDuration + 0.25, from: 0.0, to: 1.0 }),
  new Effect.Appear('imageDataContainer', { sync: true, duration: 1.0 }) ],
{ duration: 0.65, afterFinish: function() { myLightbox.updateNav();} }
  );                   
} else {
  //this code was commented out because it causes the music player to restart in Firefox
//   new Effect.Parallel(
// [ new Effect.Appear('imageDataContainer', { sync: true, duration: 1.0 }) ],
// { duration: 0.65, afterFinish: function() { myLightbox.updateNav();} }
//   );
  myLightbox.updateNav();
}


in Lightbox v2.03.3, you have this on the other hand

new Effect.Parallel(
[ new Effect.SlideDown( 'imageDataContainer', { sync: true, duration: resizeDuration, from: 0.0, to: 1.0 }),
  new Effect.Appear('imageDataContainer', { sync: true, duration: resizeDuration }) ],
{ duration: resizeDuration, afterFinish: function() {
// update overlay size and update nav
var arrayPageSize = getPageSize();
Element.setHeight('overlay', arrayPageSize[1]);
myLightbox.updateNav();
}
}
);


and it probably makes the music restart now... I tried to fix it however I know too less of this mod to do it... would you lend me a hand??

SaWey

No, the music has always restarted in FF, no idea how to fix that.
The part that has changed has been replaced to another function (updateNav)

efekt

Well I disabled it for the time being cause I use FF3 however I'm pretty sure I had the music working in Firefox with the 2.02 version though the key navigation wasn't working for me, that's why I had to reinstall to 2.03... the code I pointed out in the 2 versions is the only significant diffrence for this problem, I found... did u Sawey write the 2.02 as well?? cause this part
//this code was commented out because it causes the music player to restart in Firefox
clearly states that there is a fix for music in Firefox, but thats just me  ;) I'm too noob in this stuff to figure it out, however u might... cheers!

efekt


JoeF

Is there a way to show the lightbox overlay when the slideshow button is pressed?
I tried calling theme_html_picture() in theme_slideshow(), but that just gives me an empty page.
TIA
-Joe

JoeF

Answering my own question...
I changed my theme.php file, copying the template_img_navbar from include/themes.inc.php, and changed this line to add a {SLIDESHOW_PARMS} value:

<a href="{SLIDESHOW_TGT}" {SLIDESHOW_PARMS} class="navmenu_pic" title="{SLIDESHOW_TITLE}"><img src="{LOCATION}images/slideshow.gif" border="0" align="middle" alt="{SLIDESHOW_TITLE}" /></a>

And then copying theme_html_img_nav_menu, and modyfing $slideshow_tgt and adding a new value $slideshow_parms:

//    $slideshow_tgt = "{$_SERVER['PHP_SELF']}?album=$album$cat_link$uid_link&amp;pid=$pid&a
mp;slideshow=".$CONFIG['slideshow_interval'];
    $picture_url = get_pic_url($CURRENT_PIC_DATA, 'fullsize');
    $slideshow_tgt = $picture_url;
    $slideshow_parms = "rel=\"lightbox[list]\"";

    $pic_pos = sprintf($lang_img_nav_bar['pic_pos'], $human_pos, $pic_count);

    if (defined('THEME_HAS_NAVBAR_GRAPHICS')) {
            $location= $THEME_DIR;
        } else {
            $location= '';
        }

    $params = array('{THUMB_TGT}' => $thumb_tgt,
        '{THUMB_TITLE}' => $lang_img_nav_bar['thumb_title'],
        '{PIC_INFO_TITLE}' => $lang_img_nav_bar['pic_info_title'],
        '{SLIDESHOW_TGT}' => $slideshow_tgt,
        '{SLIDESHOW_PARMS}' => $slideshow_parms,
        '{SLIDESHOW_TITLE}' => $lang_img_nav_bar['slideshow_title'],