Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

jquery lightbox niggle

Discussion in 'Website Design Forum:' started by bamme, Jun 20, 2010.

  1. 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??
  2. Levi

    Levi Moderator Staff Member

    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

    $(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

    <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 :)
  3. bamme

    bamme Senior Member

    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:

    (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)!
  4. Renniks

    Renniks Senior Member

    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
  5. Mark Alexander

    Mark Alexander Senior Member

    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?
  6. bamme

    bamme Senior Member

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

Share This Page