Results 1 to 8 of 8

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

  1. #1
    Join Date
    Jul 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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:

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

    Code:
    /* 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.
    Last edited by jscheuer1; 07-30-2013 at 04:01 AM. Reason: Format

  2. #2
    Join Date
    Jul 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Sorry... here's the file tree... Click image for larger version. 

Name:	LightboxIssue.jpg 
Views:	79 
Size:	8.9 KB 
ID:	5161

  3. #3
    Join Date
    Jul 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    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 -

    Code:
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jul 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    url(img/prev.png)
    not:

    Code:
    url(../img/prev.png)
    When in doubt though, one may always use the absolute path to the image.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Jul 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

Similar Threads

  1. Lightbox2.03 : caption text and close button position
    By theEdge in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 01-03-2012, 10:30 AM
  2. Problem with Lightbox - next, prev, close images not showing on one site
    By monkeyshinz in forum Dynamic Drive scripts help
    Replies: 7
    Last Post: 12-26-2009, 10:58 AM
  3. LightBox2 not shoing next/prev labels
    By RSDK in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 08-12-2008, 05:46 AM
  4. Problem displaying full-size images...
    By AndrewS in forum HTML
    Replies: 2
    Last Post: 02-13-2008, 09:55 AM
  5. Email problem - Background images not displaying
    By leighgoodman in forum HTML
    Replies: 1
    Last Post: 05-16-2007, 09:38 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •