Page 1 of 2 12 LastLast
Results 1 to 10 of 18

Thread: Lightbox OnLoad Event

  1. #1
    Join Date
    Dec 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Lightbox OnLoad Event

    Script: Lightbox 2.03a
    http://www.dynamicdrive.com/dynamici...box2/index.htm

    Can someone help me? I want to make a gallery that will automatically activate Lightbox when the page loads and will show the first photo of the gallery.

    We are locally testing the site locally so I cannot give you the link.
    Last edited by deathfist; 12-12-2007 at 04:32 PM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,925
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.


    Especially important here, because DD lists two versions of light box. Generally, if you are certain that lightbox is loaded, you can next do:

    Code:
    var firstLight=document.getElementById('id');
    firstLight.onclick.apply(firstLight);
    Where id is a unique id you've assigned to the link that you want activated onload. A good place to put this added code is at the end of the lightbox initialization function, to make sure that lightbox is loaded. The precise details vary between lightbox versions. Other arrangements could probably also be made.

    To help us verify you lightbox version:

    Please include a link to the page on your site that you are using this with.
    Last edited by jscheuer1; 12-12-2007 at 03:05 PM. Reason: add info
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    ooops i'm sorry, i'm a newbie here. i am using lightbox2.03a for a project. i have no like yet since we want to finish the site before we upload it online. so we are testing the page locally.

    after i place the code inside the lightbox.js, will i need any code to be place on the <body> tag?
    Last edited by deathfist; 12-12-2007 at 04:38 PM.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,925
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    Not if you put the code in the right spot. My first choice would be here, at the end of the lightbox.js file:

    Code:
    function initLightbox() { myLightbox = new Lightbox();
    var firstLight;
    if(firstLight=document.getElementById('id'))
    firstLight.onclick.apply(firstLight);
     }
    Event.observe(window, 'load', initLightbox, false);
    For example - say you have a lightbox link on your page like this one:

    Code:
    <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
    Add a unique id to it:

    Code:
    <a id="the_first" href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
    Then in lightbox.js:

    Code:
    function initLightbox() { myLightbox = new Lightbox();
    var firstLight;
    if(firstLight=document.getElementById('the_first'))
    firstLight.onclick.apply(firstLight);
     }
    Event.observe(window, 'load', initLightbox, false);
    Last edited by jscheuer1; 12-12-2007 at 06:35 PM. Reason: fix two code typos
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Dec 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    wow thanks its worked! i used the previous code you gave.

    Code:
    function initLightbox() { myLightbox = new Lightbox();
    var firstLight=document.getElementById('first');
    firstLight.onclick.apply(firstLight);
    }
    Event.observe(window, 'load', initLightbox, false);
    thank you very much! if its not too much can you explain the code that you gave me, specially the:
    Code:
    firstLight.onclick.apply(firstLight);

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,925
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    First I'd like to explain why I added the if statement, and also mention that I did so incorrectly due to a typo that I have since fixed. With it, there will be no error, as well as no action taken, if the element with the id isn't there. This is preferable because lightbox.js may be linked to any number of pages, not all of which may have this element on it.

    The explanation of:

    Code:
    firstLight.onclick.apply(firstLight);
    is that firstLight (if the link with the id exists and is a lightbox link) represents a lightbox link. Lightbox assigned all rel="lightbox" links the following onclick event:

    Code:
    myLightbox.start(this); return false;
    Calling firstLight.onclick runs the event as an independent function. If we use the apply method, the function's 'this' keyword will apply to the item listed. So it will be as if we clicked on it.

    We should go a step further in testing and do:

    Code:
    function initLightbox() { myLightbox = new Lightbox();
    var firstLight;
    if((firstLight=document.getElementById('id')) && /^lightbox/.test(firstLight.rel))
    firstLight.onclick.apply(firstLight);
     }
    Event.observe(window, 'load', initLightbox, false);
    That will ensure that the link with the id with the rel including 'lightbox' exists. Let's break it down:

    Code:
    var firstLight
    just establishes the variable.

    Code:
    if((firstLight=document.getElementById('id')) && /^lightbox/.test(firstLight.rel))
    is a compound test and assignment that could be written more clearly like so:

    Code:
    if(document.getElementById('id')){
    firstLight=document.getElementById('id');
    if(/^lightbox/.test(firstLight.rel))
    then do whatever
    }
    It sees if the element is available, if so assigns it to the variable, then asks if the element has 'lightbox' at the start of its rel attribute. If all that's in order, then:

    Code:
    firstLight.onclick.apply(firstLight);
    which I already covered.
    Last edited by jscheuer1; 12-15-2007 at 05:48 PM. Reason: Add proper bracketing to compound test and assignment breakdown
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Dec 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you for the input!

    the gallery is working now with using this code:
    Code:
    function initLightbox() { myLightbox = new Lightbox();
    var firstLight=document.getElementById('first');
    firstLight.onclick.apply(firstLight);
    }
    Event.observe(window, 'load', initLightbox, false);
    I will also try to implement the other code if I encounter any problem.
    Code:
    function initLightbox() { myLightbox = new Lightbox();
    var firstLight;
    if((firstLight=document.getElementById('id')) && /^lightbox/.test(firstLight.rel))
    firstLight.onclick.apply(firstLight);
     }
    Event.observe(window, 'load', initLightbox, false);
    Thanks!

  8. #8
    Join Date
    Jun 2008
    Posts
    9
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    just wanted to say thanks for this - helped a lot

  9. The Following User Says Thank You to burnside For This Useful Post:

    robhert (06-05-2008)

  10. #9
    Join Date
    Jun 2008
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Hi, thanks for the code.

    The script is working right now and I wonder if there's a way to show it only one time.

    I'm using lightbox to load automatic in the frontpage. But I always see the image (lightbox) when I go to index.php. I need to know how can I see (show) the lightbox only one time per visit.

    Thank you in advance.

    PS. Sorry for my poor English, I'm Spanish speaker. Thanks.

  11. #10
    Join Date
    Jun 2008
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    One more thing,

    Is there a way to use the full-image like a link?

    I mean, when you see the Full Image, after the thumbnail image-link, Is there a way to make this Full-image an hyperlink? So I can use it like a banner.

    I hope you can help me.

    Robhert.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •