jquery lightbox niggle

bamme

bamme

Senior Member
Hi All,

So i'm using this lightbox plugin: jQuery lightBox plugin

The path to the lightbox's images (close, previous next etc) is set in the javascript, and unavoidably the image path is different for different sections of the site depending on location within the file structure. im not sure how to avoid the filepath to images being wrong depending on what level directory im in (eg, if i use lightbox in a sub-sub-level page, and use ../../image.jpg in my javascript file for the path of the image, im fine. if i they try and use the lightbox on a top level page, like index page, images dont show up, because the filepath is wrong (../../image.jpg instead of plain image.jpg)

has anyone had this problem??
 
right I think I understand it :)

Basically you need to assign different 'galleries' to each page - now I'm no expert on this and I normally use mootools rather than jquery but....

On the example page there is

Code: 
$(function() {	$('#gallery a').lightBox({fixedNavigation:true});});
and as you can see from the text theres a 'gallery a' bit.

On the how to use page theres

Code: 
<script type="text/javascript">$(function() {	// Use this example, or...	$('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel	// This, or...	$('#gallery a').lightBox(); // Select all links in object with gallery ID	// This, or...	$('a.lightbox').lightBox(); // Select all links with lightbox class	// This, or...	$('a').lightBox(); // Select all links in the page	// ... The possibility are many. Use your creative or choose one in the examples above});</script>
and as you can see theres a reference to an 'a' so I would assume if it's repeated with a 'b' you can adjust for each page.

Why you couldn't just pick one that uses a 'class' to define that it uses a lightbox I don't know :)
 
Thankyou for the reply, Levi :) I think the "a" there refers to the <a> tag, where you place rel="lightbox".

In the actual lightbox js file, the part where all the image paths are is here, ive pasted everything above so you can see what the javascript specifies before these image paths, and it doesn't seem to relate to one gallery, just the entire lightbox:

HTML: 
(function($) {
    /**
     * $ is an alias to jQuery object
     *
     */
    $.fn.lightBox = function(settings) {
        // Settings to configure the jQuery lightBox plugin how you like
        settings = jQuery.extend({
            // Configuration related to overlay
            overlayBgColor:         '#000',        // (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:            0.8,        // (integer) Opacity value to overlay; inform: 0.X. Where X are number from 0 to 9
            // Configuration related to navigation
            fixedNavigation:        false,        // (boolean) Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface.
            // Configuration related to images
            imageLoading:            '../images/lightbox-ico-loading.gif',        // (string) Path and the name of the loading icon
            imageBtnPrev:            '../images/lightbox-btn-prev.gif',            // (string) Path and the name of the prev button image
            imageBtnNext:            '../images/lightbox-btn-next.gif',            // (string) Path and the name of the next button image
            imageBtnClose:            '../images/lightbox-btn-close.gif',        // (string) Path and the name of the close btn
            imageBlank:                '../images/lightbox-blank.gif',            // (string) Path and the name of a blank image (one pixel)
            // Configuration related to container image box
Sorry if i have understood your answer incorrectly!

i suspected the only way you could do it really is a) if you know what youre doing: add something in the javascript that will detect the directory and then list new image paths for each level of subdirectory. or b) if you dont know what youre doing with javascript (me): make duplicates of this lightbox script, and include different image paths for each level of subdirectory, then include the different versions in the html pages head sections depending on where they are in the file structure.

I just wondered if there was a less messy way to do it than b)!
 
Do you even need to do that though, can't you just start the paths with a slash to indicate you're starting at the root dir?
 
thanks, i didnt even think of these two things - they both work fine - i was overcomplicating this for myself big time! thankyou very much guys :)
 
You must log in or register to reply here.
Back
Top