LightBox JS for Fullsize Popup Slideshow

[SaWey]

Thanks for the addition JoeF!

[tardis1916]

I've got this installed on my sites gallery and it is working except for one thing, in FF when the image pops up, there is no option in right click to save the image to wherever.

So my question is, is there a way to fix this and or make a download icon in the window for the image to be downloaded?

[tardis1916]

It might help someone if I put my web address, wouldn't it?

www.laura-bertram.com/gallery/

[Joachim Müller]

Fix your other issues first: your full-size pics are too large for the browser. Additionally, you have a db issue - when accessing http://www.laura-bertram.com/gallery/displayimage.php?album=random&cat=0&pos=-127 I get There was an error while processing a database query

[tardis1916]

Ok, i fixed the random issue, I also changed the resize function to 1 for auto resize. However what happens now is that the lightbox window is resized and the image rolls off the side and bottom. Now this actually (in an ugly looking way) fixes the download issue so that you can right click on the image that is hanging out to download it.

I guess my next question is, is there a way to make lightbox resize the image without me having to change the actual images and add a download button for the larger image?

Re sizing the the full size images is out of the question since they are for desktop backgrounds.

[jeepguy_1980]

This mod works great. There does seem to be on problem though.

When you exit the slideshow via the escape key, the browser does not load the last image viewed. It just closes the slideshow.  This doesn't make much sense to me, b/c it appears to be calling the end function which is suppose to load the most recent image.

Code Select Expand


if((key == 'x') || (key == 'o') || (key == 'c') || (keycode == escapeKey)){ // close lightbox
myLightbox.end();


Code Select Expand


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

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

slideShowWidth = saveSlideShowWidth;
slideShowHeight = saveSlideShowHeight;

if(go_to_last_image_on_exit && imageArray[activeImage][2] != null){
window.location = imageArray[activeImage][2];
}
[/end]

[tardis1916]

Poke ;-)

Ok, i fixed the random issue, I also changed the resize function to 1 for auto resize. However what happens now is that the lightbox window is resized and the image rolls off the side and bottom. Now this actually (in an ugly looking way) fixes the download issue so that you can right click on the image that is hanging out to download it.

I guess my next question is, is there a way to make lightbox resize the image without me having to change the actual images and add a download button for the larger image?

Re sizing the the full size images is out of the question since they are for desktop backgrounds.

Still waiting for some help on this.

[jeepguy_1980]

Poke ;-)

Still waiting for some help on this.

I've looked at your gallery and I had the exact same issue on my gallery but I've since resolved it.  Many of my pictures are 3872x2592 and the lightbox script auto-resizes them when displaying them.  My problem was caused from not properly reading the directions. I had initially placed the /scripts/slideshow folder in my template directory. I fixed the problem by moving the folder to my /CPG (the root directory for my Coppermine).  Maybe you made the same mistake I did.

[Cath22]

This is truly an awesome mod. It works great, I even added the replacement for the slideshow button. However some questions;

- I would like to have two slideshow buttons, one pointing to the old version and one to the enhanced one, since there still people not having javascript enabled or not having the player installed (of security reasons). Any idea's on that?

- Also I don't use Title and/or comments etc. How can I disable this, since now it shows the filenames, which I dont want.

- I also tried the music bit, but it didnt work, perhaps the mp3 is too big ?? I guess it needs to be loaded aswell.

Any help appreciated

Cath

[tardis1916]

I've looked at your gallery and I had the exact same issue on my gallery but I've since resolved it.  Many of my pictures are 3872x2592 and the lightbox script auto-resizes them when displaying them.  My problem was caused from not properly reading the directions. I had initially placed the /scripts/slideshow folder in my template directory. I fixed the problem by moving the folder to my /CPG (the root directory for my Coppermine).  Maybe you made the same mistake I did.

Thanks for answering,

I have my folders inside the root directory as was specified in the instructions. (/gallery/scripts/slideshow/)

What is interesting is that the lightbox window is resized but the image does not resize and hangs over the edges. The other more important issue is the fact that in FF users can't right click and "save the image as" to download it. I would prefer to fix the second issue first and then worry about the overhang issue later. ;-)

[jeepguy_1980]

FF users can right click to download, but you have to exit the slideshow mode.  If you right click the intermediate picture and "click open link in new tab", it will open the full size picture in a new tab which can be saved.

Not a graceful solution, but it's better than nothing.

I tried this and didn't have any luck. But maybe it will work for you.

[jeepguy_1980]

Scratch my previous post. The code supplied on the other link does work. I just didn't realize this mod doesn't use the latest version of lightbox.

Open lightbox_s.js and replace:

Code Select Expand

// if image is part of set display 'Image x of x'
if(imageArray.length > 1){
Element.show('numberDisplay');
Element.setInnerHTML( 'numberDisplay', "Image " + eval(activeImage + 1) + " of " + imageArray.length);
}
With:

Code Select Expand

// if image is part of set display 'Image x of x'
if(imageArray.length > 1){
Element.show('numberDisplay');
Element.setInnerHTML( 'numberDisplay', "Image " + eval(activeImage + 1) + " of " + imageArray.length + "<br><a target=_blank href=" + imageArray[activeImage][0] + ">Click here to save a version of this image</a>");
}

[SaWey]

This mod works great. There does seem to be on problem though.

When you exit the slideshow via the escape key, the browser does not load the last image viewed. It just closes the slideshow.  This doesn't make much sense to me, b/c it appears to be calling the end function which is suppose to load the most recent image.

It should be working, as it works on my gallery. I can't help you as I can't access your gallery.

Poke ;-)

Still waiting for some help on this.

You should not edit the style of the lightbox script, only if you know what you're doing.
delete the folowing lines from your style2.css:

Code Select Expand


#lightbox img {
height:auto;
width:auto;
}

The rightclick "Save As" won't work, as the script creates a mask in front of the image to allow for navigation to the next and previous images,
you'll have to come up with a solution yourself.
P.S.: You won't be able to do this in IE as well

This is truly an awesome mod. It works great, I even added the replacement for the slideshow button. However some questions;

- I would like to have two slideshow buttons, one pointing to the old version and one to the enhanced one, since there still people not having javascript enabled or not having the player installed (of security reasons). Any idea's on that?

- Also I don't use Title and/or comments etc. How can I disable this, since now it shows the filenames, which I dont want.

- I also tried the music bit, but it didnt work, perhaps the mp3 is too big ?? I guess it needs to be loaded aswell.

Any help appreciated

Cath

To have 2 slideshow options, undo the changes you made to enable the lightbox slideshow with the slideshow button.
Then, if you already have $template_img_navbar template, replace it with the one below
(if you don't have it yet, just paste it in your theme somewhere at the top)
This way, people who have javascript enabled will see the lightbox slideshow, and people who don't have it, will see the regular slideshow.
[edit:] I added an 'id' tag to the slideshow link as well as a little javascript, please replace your copy with this one

Code Select Expand


// HTML template for the image navigation bar
$template_img_navbar = <<<EOT

        <tr>
                <td align="center" valign="middle" class="navmenu" width="48">
                        <a href="{THUMB_TGT}" class="navmenu_pic" title="{THUMB_TITLE}"><img src="{LOCATION}images/thumbnails.gif" align="middle" border="0" alt="{THUMB_TITLE}" /></a>
                </td>
                <td align="center" valign="middle" class="navmenu" width="48">
                        <a href="javascript:;" class="navmenu_pic" onclick="blocking('picinfo','yes', 'block'); return false;" title="{PIC_INFO_TITLE}"><img src="{LOCATION}images/info.gif" border="0" align="middle" alt="{PIC_INFO_TITLE}" /></a>
                </td>
                <td align="center" valign="middle" class="navmenu" width="48">
                        <a href="{SLIDESHOW_TGT}" rel="lightbox[list]" id="slideshow_link" class="navmenu_pic" title="{SLIDESHOW_TITLE}"><img src="{LOCATION}images/slideshow.gif" border="0" align="middle" alt="{SLIDESHOW_TITLE}" /></a>
<script type="text/javascript">
window.onload = function(){
var images = document.getElementsByTagName('img');
for(i = 0; i < images.length; i++){
if(images[i].className == 'image'){
$('slideshow_link').setAttribute('href', images[i].src);
break;
}
}
}
</script>
                </td>
                <td align="center" valign="middle" class="navmenu" width="100%">
                        {PIC_POS}
                </td>
<!-- BEGIN report_file_button -->
                <td align="center" valign="middle" class="navmenu" width="48">
                        <a href="{REPORT_TGT}" class="navmenu_pic" title="{REPORT_TITLE}"><img src="{LOCATION}images/report.gif" border="0" align="middle" alt="{REPORT_TITLE}" /></a>
                </td>
<!-- END report_file_button -->
<!-- BEGIN ecard_button -->
                <td align="center" valign="middle" class="navmenu" width="48">
                        <a href="{ECARD_TGT}" class="navmenu_pic" title="{ECARD_TITLE}"><img src="{LOCATION}images/ecard.gif"  border="0" align="middle" alt="{ECARD_TITLE}" /></a>
                </td>
<!-- END ecard_button -->
                <td align="center" valign="middle" class="navmenu" width="48">
                        <a href="{PREV_TGT}" class="navmenu_pic" title="{PREV_TITLE}"><img src="{LOCATION}images/prev.gif"  border="0" align="middle" alt="{PREV_TITLE}" /></a>
                </td>
                <td align="center" valign="middle" class="navmenu" width="48">
                        <a href="{NEXT_TGT}" class="navmenu_pic" title="{NEXT_TITLE}"><img src="{LOCATION}images/next.gif"  border="0" align="middle" alt="{NEXT_TITLE}" /></a>
                </td>
        </tr>

EOT;


To remove the title, don't insert the title in the link.
You can do this by editing the second part of the lightbox update in your theme.php:

FIND:

Code Select Expand


if ($picture['pid'] == $pid && !$pic_already_shown ) {
$picList .= "<a href=\"$picture_url_fullsize\" 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\" picpage=\"$picture_page\" rel=\"lightbox[list]\" title=\"$pic_title\"></a>\n";
}


REPLACE WITH:

Code Select Expand


if ($picture['pid'] == $pid && !$pic_already_shown ) {
$picList .= "<a href=\"$picture_url_fullsize\" picpage=\"$picture_page\" rel=\"lightbox[list]\" >";
$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\" picpage=\"$picture_page\" rel=\"lightbox[list]\" ></a>\n";
}

The music should be preloading in the background, but it still has issues in FF. I wouldn't spend to much time on that rather put a player in your theme or so.

[SaWey]

Scratch my previous post. The code supplied on the other link does work. I just didn't realize this mod doesn't use the latest version of lightbox.

Open lightbox_s.js and replace:

Code Select Expand

// if image is part of set display 'Image x of x'
if(imageArray.length > 1){
Element.show('numberDisplay');
Element.setInnerHTML( 'numberDisplay', "Image " + eval(activeImage + 1) + " of " + imageArray.length);
}
With:

Code Select Expand

// if image is part of set display 'Image x of x'
if(imageArray.length > 1){
Element.show('numberDisplay');
Element.setInnerHTML( 'numberDisplay', "Image " + eval(activeImage + 1) + " of " + imageArray.length + "<br><a target=_blank href=" + imageArray[activeImage][0] + ">Click here to save a version of this image</a>");
}

Great solution, hadn't thought about that (though it is super logic )
I'm going to add it to my script as an option.

[jeepguy_1980]

I wish I could take credit. Unfortunately, I'm better with Google than I am with coding (other than C).

[jeepguy_1980]

It should be working, as it works on my gallery. I can't help you as I can't access your gallery.

You can now with this information.

My Gallery

username: testuser
password: testuser

[SaWey]

I hadn't read that it only happens when using the escape button,

I guess this is a browser limitation:
-> you hit escape during the slideshow
-> javascript tells browser to move to next page
-> because escape is pressed, this action is canceled

you can close the lightbox with other buttons as well ('x', 'o' and 'c')

[jeepguy_1980]

Is there is another javascript command associated with the escape key, aside from the one I posted?

Because the code I posted shows that the escape key calls the same function as clicking on the x.

Either way, it's probably not a big enough concern to worry about finding the source of the problem.

[SaWey]

The only thing I can say is what I wrote in the post above.

by pressing escape you actually cancel the action invoked by pressing it.

[tardis1916]

Thanks guys, that worked 

http://www.trance-gemini.com/gallery/

http://www.laura-bertram.com/gallery/