Advanced Search

Results 1 to 7 of 7

Thread: Modifying Lightbox Script

  1. #1
    Join Date
    Sep 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Modifying Lightbox Script

    Does anyone know how to make this

    http://particletree.com/features/lightbox-gone-wild/

    work so that the lightbox appears upon loading the page rather than having to click on a link?

    Thanks!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,701
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    I don't know what version of lightbox you are working from but for lightbox v2.02 (available from the author's home page) you have something like so at the end of lightbox.js:

    Code:
    function initLightbox() { myLightbox = new Lightbox(); }
    If you give one of your lightbox links an id - say 'lightone':

    HTML Code:
    <a id="lightone" href="images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>
    You can now modify the code in lightbox.js like so:

    Code:
    function initLightbox() { myLightbox = new Lightbox();
    myLightbox.start(document.getElementById('lightone')); }
    and that link's lightbox event will fire on page load.

    If you are using the same lightbox.js for several pages, they each could have their own link with the id 'lightone'. If you also wanted to use the lightbox script on some pages without a 'lightone' link, do this:

    Code:
    function initLightbox() { myLightbox = new Lightbox();
    if (document.getElementById('lightone'))
    myLightbox.start(document.getElementById('lightone')); }
    - John
    ________________________

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

  3. #3
    Join Date
    Sep 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi John,

    Thanks for your response. Actually I'm using the modified version of lightbox used to show HTML content. It can be found here:

    http://particletree.com/features/lightbox-gone-wild/

    I have no idea how to change it so that it will open the box upon loading the page and not when I click on a link.

    Thanks again for your help!

    Hock

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,701
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    I've looked over the script and documentation for the 'wild' version and, although I was able to get the lightbox framework (shading and content area) to appear with code that could be appended to the page's onload event, I have yet to be able to determine how to get it to load any particular content at that point. The documentation does explain in detail the various uses of the script but, it doesn't clearly explain how to access that part of it independently.

    I may well revisit this project when I feel a fresh look may yield more information. If you could contact the author, you might ask, as it cannot really be all that complicated.
    - John
    ________________________

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

  5. #5
    Join Date
    Sep 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks, John. I finally figured it out. I added

    valid.activate()

    to the initialize function and it worked.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,701
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    Aha! That being the case, you can do this, replacing the current function initialize() with (additions red):

    Code:
    var valid=[];
    // Onload, make all links that need to trigger a lightbox active
    function initialize(){
    	addLightboxMarkup();
    	var lbox = document.getElementsByClassName('lbOn');
    	for(var i = 0; i < lbox.length; i++) {
    		valid[i] = new lightbox(lbox[i]);
    	}
    }
    Now, you can choose which item to activate. Each link will be assigned a number from 0 to however many you have minus 1. So, to run the first, use:

    valid[0].activate();

    For the second:

    valid[1].activate();

    and so on.
    - John
    ________________________

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

  7. #7
    Join Date
    Sep 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks, John. Great tip!

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
  •