Skip navigation
Dorys Sosa Prentice
Dorys Sosa Prentice
Currently Being Moderated

Lightbox issue - Close button does not show, next/prev do show

Dec 21, 2010 4:05 PM

I'd be less concerned if none of the buttons showed up because then I'd know it was a linking issue, however, all the buttons are in the folder and all are referenced in the .js and html the exact same way.  The prev and next buttons appear, but the close button and the loading.gif do not appear on my live site.

 

Also, I tried to remove the .js that shows up in the html but then the lightbox doesn't work so I have javascript on the body of the page and a link to an external lightbox.js file.

 

Here is a the snippet of the html body script.

 

 

 

And for the .js

 

      */           function _set_interface() {                // Apply the HTML markup into body tag                $('body').append('

');                     // Get page sizes                var arrPageSizes = ___getPageSize();

 

I have a feeling the problem is in the lightbox.js file.  the line states for both the close button and loading.gif "<img src="Scripts/' + settings.imageBtnClose (or settings.imageLoading...)

 

so I tried changing this link to  src="images/lightbox/' ... to match where the images are, but this didn't work either.

 

Thanks in advance!

8497 Views   10 Replies   Latest reply: artistTerry, Mar 9, 2011 9:08 AM
 
Replies
  • Dorys Sosa Prentice
    Currently Being Moderated
    1. Dorys Sosa Prentice,
    Dec 21, 2010 4:06 PM   in reply to Dorys Sosa Prentice
    Report

    None of my code snippets loaded correctly.  I'll repost when I figure out how to do it correctly.

     
    |
    Mark as:
  • Dorys Sosa Prentice
    Currently Being Moderated
    2. Dorys Sosa Prentice,
    Dec 21, 2010 4:09 PM   in reply to Dorys Sosa Prentice
    Report

         function _set_interface() {

                   // Apply the HTML markup into body tag

                   $('body').append('<div id="jquery-overlay"></div><div id="jquery-lightbox"><div id="lightbox-container-image-box"><div id="lightbox-container-image"><img id="lightbox-image"><div style="" id="lightbox-nav"><a href="#" id="lightbox-nav-btnPrev"></a><a href="#" id="lightbox-nav-btnNext"></a></div><div id="lightbox-loading"><a href="#" id="lightbox-loading-link"><img src="Scripts/' + settings.imageLoading + '"></a></div></div></div><div id="lightbox-container-image-data-box"><div id="lightbox-container-image-data"><div id="lightbox-image-details"><span id="lightbox-image-details-caption"></span><span id="lightbox-image-details-currentNumber"></span></div><div id="lightbox-secNav"><a href="#" id="lightbox-secNav-btnClose"><img src="Scripts/' + settings.imageBtnClose + '"></a></div></div></div></div>');     

    This is the javascript I'm concerned about.

     
    |
    Mark as:
  • Dorys Sosa Prentice
    Currently Being Moderated
    3. Dorys Sosa Prentice,
    Jan 4, 2011 3:05 PM   in reply to Dorys Sosa Prentice
    Report

    Any help would be appreciated.

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    4. Ben Pleysier,
    Jan 4, 2011 5:51 PM   in reply to Dorys Sosa Prentice
    Report

    Is it possible to give us a link to your site, it makes it easier to track down the problem.

     

    Gramps

     
    |
    Mark as:
  • Dorys Sosa Prentice
    Currently Being Moderated
    5. Dorys Sosa Prentice,
    Jan 4, 2011 6:01 PM   in reply to Ben Pleysier
    Report

    yes, absolutely.

     

    http://www.bonegahart.com/

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    6. Ben Pleysier,
    Jan 4, 2011 6:33 PM   in reply to Dorys Sosa Prentice
    Report

    The images cannot be found a in

                             <script type="text/javascript">
// BeginOAWidget_Instance_2127022: #gallery

          $(function(){
               $('#gallery a').lightBox({ 
                    imageLoading:               '/images/lightbox/lightbox-ico-loading.gif',          // (string) Path and the name of the loading icon
                    imageBtnPrev:               '/images/lightbox/lightbox-btn-prev.gif',               // (string) Path and the name of the prev button image
                    imageBtnNext:               '/images/lightbox/lightbox-btn-next.gif',               // (string) Path and the name of the next button image
                    imageBtnClose:               '/images/lightbox/lightbox-btn-close.gif',          // (string) Path and the name of the close btn
                    imageBlank:                    '/images/lightbox/lightbox-blank.gif',               // (string) Path and the name of a blank image (one pixel)
                    fixedNavigation:          false,          // (boolean) Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface.
                    containerResizeSpeed:     400,                // Specify the resize duration of container image. These number are miliseconds. 400 is default.
                    overlayBgColor:           "#999999",          // (string) Background color to overlay; inform a hexadecimal value like: #RRGGBB. Where RR, GG, and BB are the hexadecimal values for the red, green, and blue values of the color.
                    overlayOpacity:               .6,          // (integer) Opacity value to overlay; inform: 0.X. Where X are number from 0 to 9
                    txtImage:                    'Image',                    //Default text of image
                    txtOf:                         'of'
               });
          });
          
// EndOAWidget_Instance_2127022
                         </script>

    Try removing the leading '/' so that you get 'images/lightbox/lightbox-btn-close.gif'.

     

    Gramps

     
    |
    Mark as:
  • Dorys Sosa Prentice
    Currently Being Moderated
    7. Dorys Sosa Prentice,
    Jan 4, 2011 6:45 PM   in reply to Ben Pleysier
    Report

    I had tried that before.  Removed from both the code in the html and the code in the lightbox.js.  Did both at the same time and did both, one at a time.  Didn't work before and it's not working this time either.

     

    That doesn't seem to be the issue.

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    8. Ben Pleysier,
    Jan 4, 2011 7:03 PM   in reply to Dorys Sosa Prentice
    Report

    That's OK as long as your image for the close button is located in http://www.bonegahart.com/Scripts/images/lightbox you are right. But as long as they are not located there, your lightbox will not be able to find them.

    Capture.jpg

    Actually, I found the close image here http://www.bonegahart.com/images/lightbox/lightbox-btn-close.gif. I guess we can't win them all.

     

    Gramps

     
    |
    Mark as:
  • Dorys Sosa Prentice
    Currently Being Moderated
    9. Dorys Sosa Prentice,
    Jan 5, 2011 11:37 AM   in reply to Ben Pleysier
    Report

    That was it.  I just moved the two images, the close button and loading gif to the folder Scripts/images/lightbox and it worked!!! 

     

    Thanks.  I knew it had to be something simple... I just couldn't figure it out.

     
    |
    Mark as:
  • artistTerry
    Currently Being Moderated
    10. artistTerry,
    Mar 9, 2011 9:08 AM   in reply to Ben Pleysier
    Report

    I am having the same problem;  loading and close button not showing up.

    I have both the loading.gif and the close.gif in the lightbox folder which is in my images folder.

    It works fine on my computer when I preview in Safari, but does not work in the actual site.

     

    Any help would be greatly appreciated - thanks!

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points