[DHTML] Lightbox 2.04a - First Light Link Edition for Dynamic Drive

1) CODE TITLE: Lightbox 2.04a - First Light Link Edition for Dynamic Drive

2) AUTHOR NAME/NOTES: Lokesh Dhakar - modifications for Dynamic Drive by jscheuer1

3) DESCRIPTION: This is the latest version of Lokesh Dhakar's Lightbox script with modifications to allow for linked captions and a 'first light' feature. The caption link may be targeted and the first light allows for an optional choice of image link to load into the lightbox on page load (once per session or always). Optional Lightbox start and end callback functions that can be configured globally in the script, or per page (on each page) using the script. The modified code also takes care of two bugs in Lokesh Dhakar's version:

• Missing captions would be filled in with the most recently used caption.
• The Array.prototype.uniq used for removing duplicate images did not work with Lightbox's multidimensional arrays.

Only the demo page and lightbox.js script have been changed from the official v2.04 release on Lokesh Dhakar's website, which already has several improvements over v2.03/v203a.

4) URL TO CODE: http://home.comcast.net/~jscheuer1/side/lightbox2.04a/

http://home.comcast.net/~jscheuer1/s...es/loading.gif

Note: At this writing, the rest of the Lightbox v2.04 release files can be gotten here:

http://www.lokeshdhakar.com/projects...ghtbox2.04.zip

Remember to use my updated version of the main script:

http://home.comcast.net/~jscheuer1/s...js/lightbox.js

Full 2.04a release:

http://home.comcast.net/~jscheuer1/s...htbox2.04a.zip

Nice, that fixes some people saying "Whats wrong with this script. :)"

How do I set this to load only once?

If you mean once per browser session, simply set cookieForFirstLight to true as shown here in the Configuration section of the lightbox.js file for this version (starts around line #47):

Code:

---

// -----------------------------------------------------------------------------------

LightboxOptions = Object.extend({
//
//  Configuration
//
    fileLoadingImage:        'images/loading.gif',   
    fileBottomNavCloseImage: 'images/closelabel.gif',
    cookieForFirstLight:    true,  // use session only cookie for first light?  (true/false)

    overlayOpacity: 0.8,  // controls transparency of shadow overlay

    animate: true,        // toggles resizing animations
    resizeSpeed: 7,        // controls the speed of the image resizing animations (1=slowest and 10=fastest)

    borderSize: 10,        // if you adjust the padding in the CSS, you will need to update this variable
   
    forceLocal: false,    // set to true to force lightbox into a frame or iframe
                          // (default: false) - will allow lighbox effect to appear on the top page of an iframe if any

    startCallback: function(){}, // callback for ligthbox start
    startCallbackType: 'afterFinish', // scriptaculous effect callback method default = 'afterFinish'

    endCallback: function(){}, // callback for lightbox end
    endCallbackType: 'afterFinish', // scriptaculous effect callback method default = 'afterFinish'

        // When grouping images this is used to write: Image # of #.
        // Change it for non-english localization
        labelImage: "Image",
        labelOf: "of"

// End Configuration -----------------------------------------------------------------------------------

---

Hello, I have this script up and running with one problem - the lightbox appears behind other content on the page (3 slideshows). Can you tell me how to get the lightbox into the foreground please? The page in question is http://www.envirofloat.com (lightbox image code currently commented out).

In the lightbox.css file find any and all z-index values. Using a text only editor like NotePad, multiply each of these by 1000. Save and use that version of the file.

If you want more help, please start a new thread on the topic. Feel free to refer back to this thread with a link.