Log in

View Full Version : lightbox 2.51 does not work in my site


vitof123
08-05-2012, 02:38 PM
hello

I uploaded lightbox 2.51 in my site with necessary changes. But it does not show up the lightbox in action.
I tested the script in the following.

http://vitofnepal.org/Village_Tourism_Day_2012.php

partially not working. I could not figure out the error.

The following is script.




<html><!DOCTYPE html>

<head>
<link href="lightbox/css/lightbox.css" rel="stylesheet" />
<script type="text/javascript" src="lightbox/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="lightbox/js/lightbox.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
</head>

<body>
<div style="border:0px solid black;width:475px;height:135px;overflow-y:hidden;overflow-x:scroll;">
<p style="width:250%;">

<a href="images/0731-2012/112.jpg" rel="lightbox[Vitof Day 2012]" title=""><img border="" src="images/0731-2012/thumbs/112.jpg"></a>
<a href="images/0731-2012/212.jpg" rel="lightbox[Vitof Day 2012]" title=""><img border="" src="images/0731-2012/thumbs/212.jpg"></a>
<a href="images/0731-2012/312.jpg" rel="lightbox[Vitof Day 2012]" title=""><img border="" src="images/0731-2012/thumbs/312.jpg"></a>
<a href="images/0731-2012/412.jpg" rel="lightbox[Vitof Day 2012]" title=""><img border="" src="images/0731-2012/thumbs/412.jpg"></a>
<a href="images/0731-2012/512.jpg" rel="lightbox[Vitof Day 2012]" title=""><img border="" src="images/0731-2012/thumbs/512.jpg"></a>
<a href="images/0731-2012/612.jpg" rel="lightbox[Vitof Day 2012]" title=""><img border="" src="images/0731-2012/thumbs/612.jpg"></a>
<a href="images/0731-2012/712.jpg" rel="lightbox[Vitof Day 2012]" title=""><img border="" src="images/0731-2012/thumbs/712.jpg"></a>
<a href="images/0731-2012/812.jpg" rel="lightbox[Vitof Day 2012]" title=""><img border="" src="images/0731-2012/thumbs/812.jpg"></a>
<a href="images/0731-2012/912.jpg" rel="lightbox[Vitof Day 2012]" title=""><img border="" src="images/0731-2012/thumbs/912.jpg"></a>
<a href="images/0731-2012/1012.jpg" rel="lightbox[Vitof Day 2012]" title=""><img border="" src="images/0731-2012/thumbs/1012.jpg"></a>
<a href="images/0731-2012/1112.jpg" rel="lightbox[Vitof Day 2012]" title=""><img border="" src="images/0731-2012/thumbs/1112.jpg"></a>
<a href="images/0731-2012/1212.jpg" rel="lightbox[Vitof Day 2012]" title=""><img border="" src="images/0731-2012/thumbs/1212.jpg"></a>
<a href="images/0731-2012/1312.jpg" rel="lightbox[Vitof Day 2012]" title=""><img border="" src="images/0731-2012/thumbs/1312.jpg"></a>
<a href="images/0731-2012/1412.jpg" rel="lightbox[Vitof Day 2012]" title=""><img border="" src="images/0731-2012/thumbs/1412.jpg"></a>
<a href="images/0731-2012/1512.jpg" rel="lightbox[Vitof Day 2012]" title=""><img border="" src="images/0731-2012/thumbs/1512.jpg"></a>
<a href="images/0731-2012/1612.jpg" rel="lightbox[Vitof Day 2012]" title=""><img border="" src="images/0731-2012/thumbs/1612.jpg"></a>
<a href="images/0731-2012/1712.jpg" rel="lightbox[Vitof Day 2012]" title=""><img border="" src="images/0731-2012/thumbs/1712.jpg"></a>
<a href="images/0731-2012/1812.jpg" rel="lightbox[Vitof Day 2012]" title=""><img border="" src="images/0731-2012/thumbs/1812.jpg"></a>
<a href="images/0731-2012/1912.jpg" rel="lightbox[Vitof Day 2012]" title=""><img border="" src="images/0731-2012/thumbs/1912.jpg"></a>
<a href="images/0731-2012/2012.jpg" rel="lightbox[Vitof Day 2012]" title=""><img border="" src="images/0731-2012/thumbs/2012.jpg"></a>
<a href="images/0731-2012/2012.jpg" rel="lightbox[Vitof Day 2012]" title=""><img border="" src="images/0731-2012/thumbs/2012.jpg"></a>
<a href="images/0731-2012/2212.jpg" rel="lightbox[Vitof Day 2012]" title=""><img border="" src="images/0731-2012/thumbs/2212.jpg"></a>
<a href="images/0731-2012/2312.jpg" rel="lightbox[Vitof Day 2012]" title=""><img border="" src="images/0731-2012/thumbs/2312.jpg"></a>

</div>
</body>

</html>
jscheuer1
08-05-2012, 03:12 PM
From much higher up on the page, there is:


<script src="sohoadmin/client_files/site_javascript.php" type="text/javascript"></script>

<script type="text/javascript" src="sohoadmin/program/includes/display_elements/window/prototype.js"></script>
<script type="text/javascript" src="sohoadmin/program/includes/display_elements/window/window.js"></script>
<script type="text/javascript" src="sohoadmin/program/includes/display_elements/window/effects.js"></script>
<script type="text/javascript" src="sohoadmin/program/includes/display_elements/window/debug.js"></script>
<script type="text/javascript" src="sohoadmin/client_files/embed.js"></script>

Get rid of the highlighted.
vitof123
08-06-2012, 04:50 AM
installing prototype 1.7 solved the problem. But loading button is not working. It is already in the image folder.
keyboard
08-06-2012, 04:57 AM
He just wants you to remove the highlighted from your code... you don't have to actually delete the files.
vitof123
08-06-2012, 09:37 AM
I installed prototype 1.70 and it worked but loading image does not work as it has to work.
jscheuer1
08-06-2012, 10:19 AM
I don't think installing prototype 1.70 is needed. Just get rid of the external script tags as indicated.

But regardless, the missing loading image is configured wrong in lightbox.js, it's listed as:


LightboxOptions = (function() {

function LightboxOptions() {
this.fileLoadingImage = 'lighbox/images/loading.gif';
this.fileCloseImage = 'lightbox/images/close.png';
this.resizeDuration = 700;
this.fadeDuration = 500;
this.labelImage = "Image";
this.labelOf = "of";
}

return LightboxOptions;

})();

That should be:


LightboxOptions = (function() {

function LightboxOptions() {
this.fileLoadingImage = 'lightbox/images/loading.gif';
this.fileCloseImage = 'lightbox/images/close.png';
this.resizeDuration = 700;
this.fadeDuration = 500;
this.labelImage = "Image";
this.labelOf = "of";
}

return LightboxOptions;

})();
vitof123
08-06-2012, 11:06 AM
Oh I noted. My eyesight getting poor I beleive.

It is working I do not know why it appear only in the first image load. For other it comes blank white and load image.

Thank you so much.
jscheuer1
08-06-2012, 04:04 PM
That's either a bug or a feature of the script. If you go to author's demo page:

http://lokeshdhakar.com/projects/lightbox2/

you will see it behaves the same way there.

Most likely it can be made to show the loading image between images when using the next/prev arrows, and when the lightbox is closed and then reopened. But that would probably require editing the script. That might be simple, but it could get complicated.

And I'm not sure what it means. Does it mean that the next image is preloaded? Or does it mean that once the loading gif is hidden or removed, it's just never brought back?

I looked at this a little more and it's because it's never brought back. It's set to display: none; after the first time. I think the reason it's not brought back is it doesn't looks so good if the lightbox is resizing.