LightBox JS for Fullsize Popup Image

[Kenshino]

Thanks for your reply!

Are there any changes I'll need to make to LightBox's additions to theme.php to make LyteBox work?

[SaWey]

Yes, but you will have to check with the website to know what.
for example: change "lightbox[ list]" to "LyteBox[ list]" or something.

[kissman]

I edited my Classic theme, lightbox working, but i cannot view gallery graphics...  my gall: http://air-spotting.pichrt.info

[SaWey]

Have you checked for the existance of the images dir of that theme?
I think you may have removed that one.

[kissman]

Have you checked for the existance of the images dir of that theme?
I think you may have removed that one.

i checked, and images dir is in themplate dir ok... maybe bad paths in theme files?

[kissman]

Solved: i changed name of theme but i forgot rename in template.html  sorry

[SaWey]

I checked your site logo and it should be at
http://www.pichrt.info/air-spotting/themes/classic/images/site_logo.png

can you verfy that?

OK, nice one :-)

[jrexi]

Hi All,

First off I want to say thanks for this mod, it is simply awesome!

My question is, how can I have the Lightbox launch earlier in the process and not wait until the full image stage?  For example, I want the lightbox to launch from the thumbnail stage instead of the page where you can enter comments and ratings.

Thanks in advance for your help.

Jrexi.

[SaWey]

You will find something like that in this thread: http://forum.coppermine-gallery.net/index.php?topic=36558.180

[zac]

Hi SaWey... really great mod.  Thanks for this !  I was wondering how hard it would be to add more functionality to the actual popup.  Could there be other buttons sandwiched between the pic title and the close button?   For example maybe an add to favorites link or other stuff from the info panel, links from the sys or sub menu.   I imagine this might be some pretty major programming but if anyone has an idea for a fairly quick and easy way to mod this I would love to hear it. 

Thanks again.. love this !

[SaWey]

I changed my code of the script again, now whenever a user exits the lightbox slideshow, he gets redirected to the page of the image where he stopped.

A few changes are necesarry:

in lightbox_s.js:

Find (line 413):

Code Select Expand


// add single image to imageArray
imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title')));


Replace with:

Code Select Expand


// add single image to imageArray
imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title'), imageLink.getAttribute('picpage')));

Find (line 421):

Code Select Expand


if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){
imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));


Replace with:

Code Select Expand


if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){
imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title'), anchor.getAttribute('picpage')));


Find (line 852):

Code Select Expand


end: function() {
this.stopSlideShow();
this.disableKeyboardNav();
Element.hide('lightbox');
new Effect.Fade('overlay', { duration: 0.2});
showSelectBoxes();

slideshow = saveSlideshow;
foreverLoop = saveForeverLoop;
loopInterval = saveLoopInterval;

slideShowWidth = saveSlideShowWidth;
slideShowHeight = saveSlideShowHeight;


After add:

Code Select Expand


window.location = imageArray[activeImage][2];



And then in your theme.php file:

Find:

Code Select Expand


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;
}


After add:

Code Select Expand


$picture_page = "./displayimage.php?album=".$picture['aid']."&pos=-".$picture['pid'];


Find:

Code Select Expand


$picList .= "<a href=\"$picture_url_fullsize\" rel=\"lightbox[list]\"


Replace with:

Code Select Expand


$picList .= "<a href=\"$picture_url_fullsize\" picpage=\"$picture_page\" rel=\"lightbox[list]\"


Find:

Code Select Expand


$picList .= "<a href=\"$picture_url_fullsize\" rel=\"lightbox[list]\"


Replace with:

Code Select Expand


$picList .= "<a href=\"$picture_url_fullsize\" picpage=\"$picture_page\" rel=\"lightbox[list]\"


(above is mentioned twice as you have to change 2 lines that are the same)

That's it.
Enjoy

@zac: It is possible to do so, you just need to edit the lightbox_s.js script to your needs.

[zac]

Hey SaWey.. how totally weird!! Your update was something I was going to bug you for but I didnt ask it because I thought it would be too complicated... that is exactly what I wanted.  I will let you know if I have any luck adding stuff to the js.  Thanks again!

[zac]

erm.. wait.. where did lightbox_q come from?  I just have lightbox_s.

[SaWey]

Sorry, spelling error, it should be lightbox_s.js, fixed it now.

[zac]

ok.. i did all the edits but not working for me.  when I close the popup the main page does reload but it stays on the same picture as when i started

[SaWey]

hmm, did you click the close button to close the screen or did you hit a key?

[zac]

button

[SaWey]

Can you post the content of the two files?

[zac]

k ... i attached em.  Let me know what i can do to help diagnose this.

[SaWey]

I think I found your problem, you should have looked for the

Code Select Expand


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;
}


in the second part of the lightbox update.
and add the code under that:

Code Select Expand

$picture_page = "./displayimage.php?album=".$picture['aid']."&pos=-".$picture['pid'];

PS: don't forget to remove the line you misplaced.