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 9 10   Go Down

Author Topic: LightBox JS for Fullsize Popup Slideshow  (Read 249085 times)

0 Members and 1 Guest are viewing this topic.

SaWey

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 1119
    • SaWey.be
Re: LightBox JS for Fullsize Popup Slideshow
« Reply #100 on: September 29, 2008, 01:13:01 pm »

Thanks for the addition JoeF!
Logged

tardis1916

  • Coppermine newbie
  • Offline Offline
  • Gender: Male
  • Posts: 10
    • www.laura-bertram.com
Re: LightBox JS for Fullsize Popup Slideshow
« Reply #101 on: November 10, 2008, 08:28:03 am »

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?
Logged
"How could you be ringing? What that's about... Ringing? What am I supposed to do with a ringing phone?" Christopher Eccleston - Doctor Who

tardis1916

  • Coppermine newbie
  • Offline Offline
  • Gender: Male
  • Posts: 10
    • www.laura-bertram.com
Re: LightBox JS for Fullsize Popup Slideshow
« Reply #102 on: November 10, 2008, 08:31:41 am »

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

www.laura-bertram.com/gallery/
Logged
"How could you be ringing? What that's about... Ringing? What am I supposed to do with a ringing phone?" Christopher Eccleston - Doctor Who

Joachim Müller

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 47843
  • aka "GauGau"
    • gaugau.de
Re: LightBox JS for Fullsize Popup Slideshow
« Reply #103 on: November 10, 2008, 09:36:30 am »

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
Logged

tardis1916

  • Coppermine newbie
  • Offline Offline
  • Gender: Male
  • Posts: 10
    • www.laura-bertram.com
Re: LightBox JS for Fullsize Popup Slideshow
« Reply #104 on: November 10, 2008, 06:44:19 pm »

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.
Logged
"How could you be ringing? What that's about... Ringing? What am I supposed to do with a ringing phone?" Christopher Eccleston - Doctor Who

jeepguy_1980

  • Contributor
  • Coppermine regular visitor
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 94
    • Loop Family Forum & Gallery
Re: LightBox JS for Fullsize Popup Slideshow
« Reply #105 on: November 11, 2008, 06:36:59 pm »

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]
if((key == 'x') || (key == 'o') || (key == 'c') || (keycode == escapeKey)){ // close lightbox
myLightbox.end();

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

tardis1916

  • Coppermine newbie
  • Offline Offline
  • Gender: Male
  • Posts: 10
    • www.laura-bertram.com
Re: LightBox JS for Fullsize Popup Slideshow
« Reply #106 on: November 13, 2008, 07:18:33 am »

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.
Logged
"How could you be ringing? What that's about... Ringing? What am I supposed to do with a ringing phone?" Christopher Eccleston - Doctor Who

jeepguy_1980

  • Contributor
  • Coppermine regular visitor
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 94
    • Loop Family Forum & Gallery
Re: LightBox JS for Fullsize Popup Slideshow
« Reply #107 on: November 13, 2008, 03:31:20 pm »

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.
Logged

Cath22

  • Coppermine regular visitor
  • **
  • Offline Offline
  • Gender: Female
  • Posts: 77
    • Fotofantastic
Re: LightBox JS for Fullsize Popup Slideshow
« Reply #108 on: November 13, 2008, 04:43:43 pm »

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
Logged
qui custodiet ipsos custodes

tardis1916

  • Coppermine newbie
  • Offline Offline
  • Gender: Male
  • Posts: 10
    • www.laura-bertram.com
Re: LightBox JS for Fullsize Popup Slideshow
« Reply #109 on: November 13, 2008, 07:28:41 pm »

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. ;-)
Logged
"How could you be ringing? What that's about... Ringing? What am I supposed to do with a ringing phone?" Christopher Eccleston - Doctor Who

jeepguy_1980

  • Contributor
  • Coppermine regular visitor
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 94
    • Loop Family Forum & Gallery
Re: LightBox JS for Fullsize Popup Slideshow
« Reply #110 on: November 13, 2008, 08:22:56 pm »

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.
Logged

jeepguy_1980

  • Contributor
  • Coppermine regular visitor
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 94
    • Loop Family Forum & Gallery
Re: LightBox JS for Fullsize Popup Slideshow
« Reply #111 on: November 13, 2008, 09:15:25 pm »

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]
// 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]
// 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>");
}
Logged

SaWey

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 1119
    • SaWey.be
Re: LightBox JS for Fullsize Popup Slideshow
« Reply #112 on: November 13, 2008, 09:17:29 pm »

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]
#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]
// 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]
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]
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.
« Last Edit: November 16, 2008, 09:58:30 pm by SaWey »
Logged

SaWey

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 1119
    • SaWey.be
Re: LightBox JS for Fullsize Popup Slideshow
« Reply #113 on: November 13, 2008, 09:20:46 pm »

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]
// 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]
// 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.
Logged

jeepguy_1980

  • Contributor
  • Coppermine regular visitor
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 94
    • Loop Family Forum & Gallery
Re: LightBox JS for Fullsize Popup Slideshow
« Reply #114 on: November 13, 2008, 09:25:46 pm »

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

jeepguy_1980

  • Contributor
  • Coppermine regular visitor
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 94
    • Loop Family Forum & Gallery
Re: LightBox JS for Fullsize Popup Slideshow
« Reply #115 on: November 13, 2008, 09:50:29 pm »

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

Logged

SaWey

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 1119
    • SaWey.be
Re: LightBox JS for Fullsize Popup Slideshow
« Reply #116 on: November 13, 2008, 10:24:23 pm »

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')
Logged

jeepguy_1980

  • Contributor
  • Coppermine regular visitor
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 94
    • Loop Family Forum & Gallery
Re: LightBox JS for Fullsize Popup Slideshow
« Reply #117 on: November 13, 2008, 10:42:09 pm »

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.
Logged

SaWey

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 1119
    • SaWey.be
Re: LightBox JS for Fullsize Popup Slideshow
« Reply #118 on: November 13, 2008, 10:48:43 pm »

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.
Logged

tardis1916

  • Coppermine newbie
  • Offline Offline
  • Gender: Male
  • Posts: 10
    • www.laura-bertram.com
Re: LightBox JS for Fullsize Popup Slideshow
« Reply #119 on: November 15, 2008, 07:23:24 am »

Logged
"How could you be ringing? What that's about... Ringing? What am I supposed to do with a ringing phone?" Christopher Eccleston - Doctor Who
Pages: 1 2 3 4 5 [6] 7 8 9 10   Go Up
 

Page created in 0.03 seconds with 19 queries.