Design Forums - Graphic Design & Web Design Forums

emmaburge · Post 1 Posted 20-06-10

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??

Levi · Post 2 Posted 20-06-10

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

emmaburge · Post 3 Posted 22-06-10

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

(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)!

Renniks · Post 4 Posted 22-06-10

Just change the images path to be hard coded?
so just http://www. site name .com/folder/etc/lightbox-btn-prev.gif
in the javascript

Mark Alexander · Post 5 Posted 23-06-10

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?

emmaburge · Post 6 Posted 23-06-10

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

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Renniks Shmoo 2,197 Posts Cardiff	Just change the images path to be hard coded? so just http://www. site name .com/folder/etc/lightbox-btn-prev.gif in the javascript Learn the rules - so you know how to break them properly Simplicity is the ultimate form of sophistication My twitter
	Post 4 Posted 22-06-10

Mark Alexander Member 94 Posts UK	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? ‪Luxbrand - Branding, Print Design, Web Design
	Post 5 Posted 23-06-10

emmaburge Senior Member 296 Posts	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
	Post 6 Posted 23-06-10

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Design Forums - Graphic Design & Web Design Forums

jquery lightbox niggle