using appendchild to conditionally load jQuery

Question

I have a wordpress plugin to generate a flickr gallery. To avoid conflict with other jquery plugins, I only load jquery if it is not loaded already. But issue with this approach is that the colorbox doesn't work if the jquery is loaded using this method. I don't see the cboxoverlay and colorbox elements in the body of the page.

This is my code -

if((typeof(jQuery) == 'undefined') || (jQuery.fn.jquery < '1.4.4')){
    var loadjQuery = document.createElement(\"script\");
    loadjQuery.setAttribute(\"src\",\"https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js\");
    var head = document.getElementsByTagName(\"head\")[0];
    head.appendChild(loadjQuery);
}

Any clue what can be done to fix both the issues?

Answer 1

You should be using the function enqueue_script.

"A safe way of adding javascripts to a WordPress generated page. Basically, include the script if it hasn't already been included, and load the one that WordPress ships."

Basically, this will allow you to include you scripts safely with WordPress doing the work.

http://codex.wordpress.org/Function_Reference/wp_enqueue_script

If that is not enough detail let me know, and I can elaborate