SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Open/Close Lightbox from JavaScript

    Hello

    I feel like I should be able to figure this out but I am not having much luck. Someone from SitePoint introduced me to Lightbox and I really like what you can do with it. What I am trying to figure out but having difficulty with is opening and closing a Lightbox from JavaScript.

    For example, if I use this html...

    <a href="#testLB" rel="testLB" class="lbOn">Test Lightbox</a>

    It will display a div since I coded this div in the HTML file...

    Code:
    <div id="testLB" class="leightbox">
       <h1>Test</h1>
    
        <a href="javascript: test();">Change Zip</a>
    </div>
    What I want to be able to do is to display this div with Lightbox but do it from JavaScript. For example, from the body onLoad event I would like to call a JavaScript function that opens a Lightbox.

    Then, the Lightbox is going to contain a few fields so I was going to have JavaScript validate that the user entered all the fields. If they did, I then want to close the Lightbox. If they did not, I will display an alert message. I can get all of this to work except having JavaScript close (actually, it is hiding) a Lightbox div. Can someone help me figure out how to hide the div from a JavaScript function?

    What I downloaded was Lightbox Gone Wild which I think is also called Leightbox.

    Thanks in advance for your time and knowledge.

  2. #2
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This took me a while and I am not sure if someone knows a different may, but here is how I got it to work. After many hours on Google doing searches, I came across this site. It details the changes that need to be made to lightbox.js in order to allow JavaScript to activate/deactivate a Lightbox.

    http://quainttech.blogspot.com/2007/...-improved.html

    I then used this code to active...

    Code:
    function testActivate()
    {
       lb = new lightbox();
       lb.initCallable('idOfDiv');
       lb.activate(); 
    }
    I then used this code to deactivate...

    Code:
    function testDeactivate()
    {
       lb = new lightbox();
       lb.initCallable('idOfDiv');
       lb.deactivate(); 
    }


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
  •