Skip to main content
Participant
June 20, 2011
Answered

Using Lightbox Widget I can't get the (Next) and (Prev) buttons to show up in broswers except IE

  • June 20, 2011
  • 1 reply
  • 4773 views

I am using  Lighbox Gallery Widget for my site and when I click on the lightbox images, I can't get the (Next) and (Previous) buttons to show up in any of the following broswers.....(Chrome, Opera, Foxfire) but they show up in Internet Explorer. Also The (Close) button shows up in every broswer so this is really throwing me off. Below is a link to my page where I am having the problem. Any help is much appreciated, I plan to launch the site in the next couple of weeks.

http://www.luckielosers.com/Build.php

Thanks

This topic has been closed for replies.
Correct answer BenPleysier

There is a problem with the location of the images. Look at the constructor

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

        $(function(){
            $('#gallery a').lightBox({
                imageLoading:            '/Thumbnail Widget Files/images/lightbox/lightbox-ico-loading.gif',        // (string) Path and the name of the loading icon
                imageBtnPrev:            '/Thumbnail Widget Files/images/lightbox/lightbox-btn-prev.gif',            // (string) Path and the name of the prev button image
                imageBtnNext:            '/Thumbnail Widget Files/images/lightbox/lightbox-btn-next.gif',            // (string) Path and the name of the next button image
                imageBtnClose:            '/Thumbnail Widget Files/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:         "#000000",        // (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>

The only images that can be found

lightbox-blank.gif

lightbox-ico-loading.gif

lightbox-btn-close.gif

I have found the next button here images/lightbox/lightbox-btn-next.gif which is not what you have in the constructor - /Thumbnail Widget Files/images/lightbox/lightbox-btn-next.gif

Correct the above and all is well.

Gramps

PS This is the answer to your PM

1 reply

Participant
June 23, 2011

Can anyone please help me on this?

BenPleysier
Community Expert
BenPleysierCommunity ExpertCorrect answer
Community Expert
June 25, 2011

There is a problem with the location of the images. Look at the constructor

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

        $(function(){
            $('#gallery a').lightBox({
                imageLoading:            '/Thumbnail Widget Files/images/lightbox/lightbox-ico-loading.gif',        // (string) Path and the name of the loading icon
                imageBtnPrev:            '/Thumbnail Widget Files/images/lightbox/lightbox-btn-prev.gif',            // (string) Path and the name of the prev button image
                imageBtnNext:            '/Thumbnail Widget Files/images/lightbox/lightbox-btn-next.gif',            // (string) Path and the name of the next button image
                imageBtnClose:            '/Thumbnail Widget Files/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:         "#000000",        // (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>

The only images that can be found

lightbox-blank.gif

lightbox-ico-loading.gif

lightbox-btn-close.gif

I have found the next button here images/lightbox/lightbox-btn-next.gif which is not what you have in the constructor - /Thumbnail Widget Files/images/lightbox/lightbox-btn-next.gif

Correct the above and all is well.

Gramps

PS This is the answer to your PM

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
August 18, 2011

I am having the same issue with the lightbox widget, the nex, prev, and close buttons do not show up.

http://www.jl-landarch.com/Residential_commercial.html

I have tried your suggestions, making sure the gifs are in the right location, still can't figure it out.

Any other suggestions?