Old Problem for Noob - Lightbox2 prev/next/close images not displaying.

[AlanBradley]

I know this is probably the oldest question in the world, but I am seriously at a loss as to how to resolve my issue with Lightbox2.
I have recently downloaded the Lightbox2 files and followed the instructions for implementing the code on the asp.net project I am building in Visual Studio. I cannot get the nav images to render (prev.png, next.png, close.png, loading.gif). I have searched the forums and googled the issue without relief. I am now ready to pull out my hair.

I have absolutely no javascript experience and have not tried to modify the .js files associated with Lightbox2. I do know how to edit stylesheets, but cannot figure out where this problem comes from. I suspect a z-index issue, but I'm not sure.

I know the image links are on the page, because when I hover on the left or right side of the currently displayed gallery image, the cursor becomes a
"hand" just like when hovering over a normal link in a browser. When I click the area, Lightbox advances to the next or previous image in the group as expected. The prev/next/close images simply do not render in the browser.

And yes, I have the group markup correct as suggested:

<table cellpadding="0" cellspacing="20" style="margin: 0 auto;">
                <tr>
                    <td>
                        <a href="Galleries/CasaSerafina/images/EditedForGallery/IMG_0952_1000x698.jpg" rel="lightbox[CasaSerafina]">
                            <img src="Galleries/CasaSerafina/images/ThumbsForGalleryHome/IMG_0952_150x150.jpg" /></a>
                    </td>
                    <td>
                        <a href="Galleries/CasaSerafina/images/EditedForGallery/IMG_0962_1000x855.jpg" rel="lightbox[CasaSerafina]">
                            <img src="Galleries/CasaSerafina/images/ThumbsForGalleryHome/IMG_0962_150x150.jpg" /></a>
                    </td>
                    <td>
                        <a href="Galleries/CasaSerafina/images/EditedForGallery/IMG_0943_1000x715.jpg" rel="lightbox[CasaSerafina]">
                            <img src="Galleries/CasaSerafina/images/ThumbsForGalleryHome/IMG_0943_150x150.jpg" /></a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="Galleries/CasaSerafina/images/EditedForGallery/IMG_0904_1000x682.jpg" rel="lightbox[CasaSerafina]">
                            <img src="Galleries/CasaSerafina/images/ThumbsForGalleryHome/IMG_0904_150x150.jpg" /></a>
                    </td>
                    <td>
                        <a href="Galleries/CasaSerafina/images/EditedForGallery/IMG_0922_1000x828.jpg" rel="lightbox[CasaSerafina]">
                            <img src="Galleries/CasaSerafina/images/ThumbsForGalleryHome/IMG_0922_150x150.jpg" /></a>
                    </td>
                    <td>
                        <a href="Galleries/CasaSerafina/images/EditedForGallery/IMG_0921_651x1000.jpg" rel="lightbox[CasaSerafina]">
                            <img src="Galleries/CasaSerafina/images/ThumbsForGalleryHome/IMG_0921_150x150.jpg" /></a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="Galleries/CasaSerafina/images/EditedForGallery/IMG_0884_1000x685.jpg" rel="lightbox[CasaSerafina]">
                            <img src="Galleries/CasaSerafina/images/ThumbsForGalleryHome/IMG_0884_150x150.jpg" /></a>
                    </td>
                    <td>
                        <a href="Galleries/CasaSerafina/images/EditedForGallery/IMG_0893_1000x794.jpg" rel="lightbox[CasaSerafina]">
                            <img src="Galleries/CasaSerafina/images/ThumbsForGalleryHome/IMG_0893_150x150.jpg" /></a>
                    </td>
                    <td>
                        <a href="Galleries/CasaSerafina/images/EditedForGallery/IMG_0978_1000x673.jpg" rel="lightbox[CasaSerafina]">
                            <img src="Galleries/CasaSerafina/images/ThumbsForGalleryHome/IMG_0978_150x150.jpg" /></a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a href="Galleries/CasaSerafina/images/EditedForGallery/IMG_0981_826x1000.jpg" rel="lightbox[CasaSerafina]">
                            <img src="Galleries/CasaSerafina/images/ThumbsForGalleryHome/IMG_0981_150x150.jpg" /></a>
                    </td>
                    <td>
                        <a href="Galleries/CasaSerafina/images/EditedForGallery/IMG_0985_933x1000.jpg" rel="lightbox[CasaSerafina]">
                            <img src="Galleries/CasaSerafina/images/ThumbsForGalleryHome/IMG_0985_150x150.jpg" /></a>
                    </td>
                    <td>
                        <a href="Galleries/CasaSerafina/images/EditedForGallery/IMG_0997_1000x727.jpg" rel="lightbox[CasaSerafina]">
                            <img src="Galleries/CasaSerafina/images/ThumbsForGalleryHome/IMG_0997_150x150.jpg" /></a>
                    </td>
                </tr>
            </table>

The Lightbox css file points to the img file for the next.png, prev.png, etc. :

/* line 7, ../sass/lightbox.sass */
body:after {
  content: url(../img/close.png) url(../img/loading.gif) url(../img/prev.png) url(../img/next.png);
  display: none;
}

/* line 11, ../sass/lightbox.sass */
.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
}

/* line 20, ../sass/lightbox.sass */
.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal;
}
/* line 28, ../sass/lightbox.sass */
.lightbox .lb-image {
  display: block;
  height: auto;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}
/* line 32, ../sass/lightbox.sass */
.lightbox a img {
  border: none;
}

/* line 35, ../sass/lightbox.sass */
.lb-outerContainer {
  position: relative;
  background-color: white;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}
/* line 38, ../../../../.rvm/gems/ruby-1.9.3-p392/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}

/* line 44, ../sass/lightbox.sass */
.lb-container {
  padding: 4px;
}

/* line 47, ../sass/lightbox.sass */
.lb-loader {
  position: absolute;
  top: 43%;
  left: 0%;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

/* line 56, ../sass/lightbox.sass */
.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(../img/loading.gif) no-repeat;
}

/* line 63, ../sass/lightbox.sass */
.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

/* line 71, ../sass/lightbox.sass */
.lb-container > .nav {
  left: 0;
}

/* line 74, ../sass/lightbox.sass */
.lb-nav a {
  outline: none;
}

/* line 77, ../sass/lightbox.sass */
.lb-prev, .lb-next {
  width: 49%;
  height: 100%;
  cursor: pointer;
  /* Trick IE into showing hover */
  display: block;
}

/* line 84, ../sass/lightbox.sass */
.lb-prev {
  left: 0;
  float: left;
}
/* line 87, ../sass/lightbox.sass */
.lb-prev:hover {
  background: url(../img/prev.png) left 48% no-repeat;
}

/* line 90, ../sass/lightbox.sass */
.lb-next {
  right: 0;
  float: right;
}
/* line 93, ../sass/lightbox.sass */
.lb-next:hover {
  background: url(../img/next.png) right 48% no-repeat;
}

/* line 96, ../sass/lightbox.sass */
.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
/* line 38, ../../../../.rvm/gems/ruby-1.9.3-p392/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}

/* line 103, ../sass/lightbox.sass */
.lb-data {
  padding: 0 4px;
  color: #bbbbbb;
}
/* line 106, ../sass/lightbox.sass */
.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}
/* line 111, ../sass/lightbox.sass */
.lb-data .lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
}
/* line 115, ../sass/lightbox.sass */
.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 12px;
  color: #999999;
}
/* line 121, ../sass/lightbox.sass */
.lb-data .lb-close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: url(../img/close.png) top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}
/* line 130, ../sass/lightbox.sass */
.lb-data .lb-close:hover {
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

And finally... a screenshot of my file tree. As you can see, the prev/next/close/loading image files are in the img folder, in the root of the project.

I cannot figure out what the problem is. I'm hoping one of you gurus can help me out.

[AlanBradley]

Sorry... here's the file tree...

[AlanBradley]

Sorry... here's a readable image:
http://www.webbishy.com/sandbox/img/LightboxIssue.bmp

[jscheuer1]

As everything looks OK-ish, there's no way to tell for sure without seeing it.

The only thing I would try if I were you would be getting rid of the body:after -

body:after {
  content: url(../img/close.png) url(../img/loading.gif) url(../img/prev.png) url(../img/next.png);
  display: none;
}

on the off chance that it's interfering somehow.

And then of course, the obvious - assign these images in the lightbox.css file as background images to some visible elements on the page, just to double check that the path is indeed correct and that the images exist and are not corrupt, and that the lightbox.css file is being used by the page.

But, if none of that gets you to a resolution:

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

[AlanBradley]

Hi, John.

Here's the page link:
http://www.webbishy.com/sandbox/Casa...naGallery.aspx

[jscheuer1]

OK, if I go to (what the path actually resolves to, which I think is what you said it was, maybe not though):

http://www.webbishy.com/sandbox/img/next.png

I'm getting:

The page cannot be found
The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.

Please try the following:
Make sure that the Web . . .

a 404 Not Found. So either the image is misnamed, missing or corrupt, or that's not the path you were expecting.

[jscheuer1]

Oh I see now, you meant the path to be:

http://www.webbishy.com/sandbox/CasaSerafina/img/prev.png

The image is there. The problem is the css file is directly below the img folder, not even with it on another branch.

So the path should be:

url(img/prev.png)

not:

url(../img/prev.png)

When in doubt though, one may always use the absolute path to the image.

[AlanBradley]

Unbelievable... that was it. Sometimes the obvious is so elusive. Thank you so much, John. YOU... are my guru. My best to you, sir.