Skip to main content
Inspiring
November 13, 2008
Question

Using Lightbox inside of a CFDIV

  • November 13, 2008
  • 1 reply
  • 1167 views
Im building an app that has a CFdiv that is nested inside or a cflayout that is working fine. Trouble Im having is getting to use Lightbox inside of the CFDIV. Instead of poping up into the lightbox, it is opening a new page. I created a test page to make sure that my lightbox is working and it is, yet inside of the cfdiv it is not. I have a hunch that it is not loading the JS files that i have included at the head to make the lightbox work.

Has anyone tried to use lightbox inside of a cfdiv?
    This topic has been closed for replies.

    1 reply

    Inspiring
    November 13, 2008
    is the content of your cfdiv dynamic? i.e. is the body of cfdiv loaded
    after the main page loads?

    you will have to re-init lightbox after the loading of the cfdiv content
    is done. the easiest way to do this is by using ajaxonload() function:
    write a js function (let's call it reinitLightbox) that will apply
    Lightbox to the content of cfdiv;
    add <cfset ajaxonload("reinitLightbox")> just before the </body> tag in
    the page that loads in your cfdiv.

    hth

    Azadi Saryev
    Sabai-dee.com
    http://www.sabai-dee.com/
    AbinidiAuthor
    Inspiring
    November 13, 2008
    Yes the Cfdiv content is dynamic. It is loading info that is selected in another cfdiv. Both cfdivs are inside of a cflayout also.
    I have used ajaxonload() in this app, but only to do things like coldfusion.naviagate() and such. I have not done it to include a javascript file. Is there a way to build a function to have it pull JS from another page?
    The JS page it needs to load is http://www.picnik.com/picnikbox/picnikbox_2_0.js

    The whole app segment I am trying to load is the Picnik image editor. I have all the backend working fine, I just cant get this to work in the lightbox, whereas a test page with no cfdivs, etc it works fine.

    Can I just copy alll the JS from the page and have it in its own function? It seems that picnik js file has lots of its own functions inside of it.

    Thanks for the direction.