Make ThickBox Work with Other JavaScript Libraries / Resolve ThickBox Conflict Issues

ThickBox is a cool visualization tool based on Jquery JavaScript library. ThickBox helps you display photos in a cool way and is useful in many web projects.

The problem

ThickBox does not work when the HTML pages has other JavaScript libraries such as Mootools.

Debuging the error reveals this:

$(domChunk) is null

The solution

  1. Add this JavaScript in your page, just after you load the jQuery JavaScript-jQuery.noConflict();
  2. Replace every instances of ‘$’ with ‘jQuery’ in thickbox.js

This will make jQuery and ThinkBox play nice with other JavaScript libraries.

Share the love...Tweet about this on TwitterShare on LinkedInShare on Google+Share on Facebook

Amir Shevat

Amir Shevat is the global Startup Outreach lead in Google Developer Relations (g.co/launch). Previously, Amir Led Google Campus Tel Aviv and was the co founder of several startups.

You may also like...

14 Responses

  1. Marek says:

    Thank You very much!! This is exactly what I needed :)
    Thickbox with prototype and jquery same time…

  2. Bolox says:

    Excellent !!! Good news for this morning :)
    Greetings from France !!

  3. Arnt says:

    Hi.
    Have an asp:UpdatePanel
    And when that is fired Thicbox don’t work anymore.
    Tried the soluton mentioned abow, but no luck :(

  4. jc figueroa says:

    this is exactly what i needed i have thickbox integrated in a project and i try to add an other lightbox plugin for the same page like a photo gallery but the two plugins was making a conflict i think because the two plugins have similar funcion names but if i add this chunk of code all works just as i expected.

  5. Larrybud says:

    A description of why this works is in order. Jquery defines what “$” means. so if you have another library that overwrites what “$” means, then your Jquery scripts won’t work.

    When you use jQuery.noConflict(), it’s saying DON’T use $ for Jquery, instead use “jQuery”.

    Seems to me jQuery and other libs needs to get their act together and stop trying to blow each other out of the water. Jquery should add “jQ” as the shorthand instead of “$” to prevent this, or at least add some sort of check to make sure “$” is still defined properly.

  6. anonymous says:

    Very useful article. I was having throuble to start putting thickbox to work.

  7. anonymous says:

    I just spend four hours. Worked first time.

  8. anonymous says:

    This is Good Post…

    my problem has solved by your post…

    thanks….

  9. anonymous says:

    God I love random blogging posts. Just saved me a load of time :-)

  10. anonymous says:

    Thanks! Going to bed sooner!

  11. anonymous says:

    Worked like charm. Thanks.

  12. anonymous says:

    It really saved my time. Thanks a lot Amir!

  13. anonymous says:

    Awesome..!
    If only I found this page earlier!

    Thanks Amir

  14. anonymous says:

    Yes, thank you very very much, I was thinking of jumping of a building because i couldn’t solve this one!!!! Greetings from the Netherlands!

Leave a Reply

Your email address will not be published. Required fields are marked *