Grow your CSS skills. Land your dream job.

How can I display Javascript content in a JQuery lightbox?

  • # January 7, 2010 at 5:39 am

    Hello there.
    I apologise for any wrong use of terms – I started learning about web design last year and although CSS Tricks has been the most useful site I’ve used, I don’t understand javascript at all and only CSS a little!

    Here’s my problem:
    At the moment I have a page on my site (http://www.sparkyteaching.com/resources … /hmmm.html) where the "Question of the Day" is taken by javascript according to the date.

    I also like the Jquery lightbox plugin by Leandro Viera Pinho and the fact this means my pages are tidier. I used it on my advent calendar… (http://www.sparkyteaching.com/advent.html)

    So far so good…

    What I’m wondering is… Is there a way to merge the two? To have a thumbnail so that when you click on it, what opens in the Jquery lightbox isn’t some static picture that never changes, but is in fact an image that changes according to the date (If this could use my existing little javascript knowledge that would be great)…

    At the moment I’m playing around with the lightbox code which looks something like this…

    Code:

    and my javascript call to get the image which looks like this…

    Code:

    There is a way to do it and it’s probably very easy, but I’m stumped…
    But if there’s somewhere that can help – CSS Tricks is the place (grovel, grovel)

    Thanks and keep up the good work!
    Sparky

    # January 8, 2010 at 4:41 am

    Conscious I’m answering my own question here… But after a day of messing around with things I found Stickman Labs’ LightWindow code: http://www.stickmanlabs.com/lightwindow/

    It’s pretty easy to use. I managed to put the dynamic content in a separate page. The Lightwindow then displays that changing page in a lightbox.

    Just thought I’d leave an answer in case anyone’s interested. And, credit where credit’s due, that Stickman Labs code is excellent.

    Thanks,
    Sparky Teaching

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".