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.

Code:

<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:

Code:

<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:

Code:

  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:

Code:

  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.

Thread: lightbox 2.51 does not work in my site

Thread Tools

Search Thread

lightbox 2.51 does not work in my site

Bookmarks

Bookmarks

Posting Permissions