jQuery lightBox plugin by balupton

Question

Using the jQuery plugin http://jquery.com/plugins/project/jquerylightbox_bal

Is there a way to have the title and NEXt/PREVIOUS buttons always appear. Currently we have to hover to have these appear and my users mostly aren't noticing that.

LightBox2 and others allow this but I need it based on jQuery as the other frameworks interfere with my other js.

It's for this web site: http://BiblePro.BibleOcean.com

Answer 1

It is not currently possible as an option, however you can modify the lightbox js file with the following changes:

        // Prev
        $('#lightbox-nav-btnPrev').unbind().hover(function() { // over
            $(this).css({ 'background' : 'url(' + $.Lightbox.files.images.prev + ') left 45% no-repeat' });
        },function() { // out
            $(this).css({ 'background' : 'transparent url(' + $.Lightbox.files.images.blank + ') no-repeat' });
        }).click(function() {
            $.Lightbox.showImage($.Lightbox.images.prev());
            return false;
        });

to:

        // Prev
        $('#lightbox-nav-btnPrev').css({ 'background' : 'url(' + $.Lightbox.files.images.prev + ') left 45% no-repeat' });

and the same for the next a few lines below.

Later on you will find:

                // If not first, show previous button
                if ( !this.images.first(image) ) {
                    // Not first, show button
                    $('#lightbox-nav-btnPrev').show();
                }

                // If not last, show next button
                if ( !this.images.last(image) ) {
                    // Not first, show button
                    $('#lightbox-nav-btnNext').show();
                }

Change that to:

                // If not first, show previous button
                if ( !this.images.first(image) && !this.images.last(image) ) {
                    // Not first, show button
                    $('#lightbox-nav-btnPrev,#lightbox-nav-btnNext').show();
                }

And that should do it for you. You can either include the unminified js file in your html, or minify that js file and save that (I use the YUI js compressor).

I will consider making it an option for a future release.

Answer 2

Consider this approach If you don't get any answers which give a approach to solve your problem using the inbuilt jQuery things.

I have been successful in editing styles of jQuery Plugins to achieve what I want, if it doesn't already provide it. (unless its implemented through jQuery functionality rather than just by using styling).

Use Firebug or IE Toolbar to see what style is rendered to those elements on hover, then change that styling to reflect what you want in the base style itself instead of onhover.

Thanks