Lightbox images ("close" "next" etc) missing [SOLVED]

14 Posts

Mark Scudder Reply #1, 16 years, 8 months ago

I just started using MaxiGallery, and when I use Lightbox, the images for Lightbox navigation (the "X" to close, the "next" and "previous" images, etc) don’t appear. The areas in which they are supposed to appear function as the links, but they are invisible to the casual visitor. I installed it as directed, and have been over the documentation on the MODx Wiki numerous times with no luck. What did I miss?

4,213 Posts

doze Reply #2, 16 years, 8 months ago

Probably a css collision between your site css and lightbox css.

Try commenting all site css off and see if it works then. Then bring back your site css one block at a time to see where it breaks.

Or use FireBug in firefox to do that on-the-fly.

"He can have a lollipop any time he wants to. That's what it means to be a programmer."

14 Posts

Mark Scudder Reply #3, 16 years, 8 months ago

Removing all my CSS does not do it. Firebug does not show that there is even an image specified to be loaded.

I looked at the lightbox.css supplied with MaxiGallery and there is a comment in there saying that images were removed because the javascript loads language-specific images on the fly. Maybe that’s it. I will try replacing it with a stock lightbox.css and see if that makes a difference.

14 Posts

Mark Scudder Reply #4, 16 years, 8 months ago

Changing the CSS file did nothing, however I noticed that the "close" GIF that I was missing was not specified in the stock lightbox.css file either. This led me to look at lightbox_lang_en.js, where I discovered that the paths to the images did not have leading slashes, making the browser look for them in the wrong place. I added leading slashes and it started working. Here’s my modified lightbox_lang_en.js:

//loading image
var fileLoadingImage = "/assets/snippets/maxigallery/lightboxv2/images/loading.gif";		
//close image
var fileBottomNavCloseImage = "/assets/snippets/maxigallery/lightboxv2/images/closelabel.gif";
//next image
var nextLinkImage = "/assets/snippets/maxigallery/lightboxv2/images/nextlabel.gif";
//previous image
var previousLinkImage = "/assets/snippets/maxigallery/lightboxv2/images/prevlabel.gif";
//controls the speed of the image resizing (1=slowest and 10=fastest)
var resizeSpeed = 7;
//if you adjust the padding in the CSS, you will need to update this variable
var borderSize = 10;
//the "Image" part from the text "Image 1 of 6"
var imageNrDesc = "Image";
//the separator "of" from the text "Image 1 of 6", you can change to / slash or whatever
var imageNrSep = "of";
//accelerator keys that goes to next picture, separate by commas
var nextKeys = new Array("n"," ");
//accelerator keys that goes to previous picture, separate by commas
var prevKeys = new Array("b");
//accelerator keys that close the lightbox, separate by commas
var closeKeys = new Array("c","x","q");

4,213 Posts

doze Reply #5, 16 years, 8 months ago

Good that you got it solved, I’ll make a note of this thread to the sticky topic.. For next MaxiGallery version, I’m going to remove all the lightbox translations etc and just slam unmodified 3rd party js scripts there so users can update them by simply copying over the files in future.

"He can have a lollipop any time he wants to. That's what it means to be a programmer."