Jquery lightbox problem

Question

I'm going crazy here - I can't get my Jquery lightbox to work... Would be great if someone could have a quick look!

Site is http://www.layersoflondon.org/index-with-jquery.html

I think the problem is that there is a conflict with the Google Maps Javascript in the header and the Jquery lightbox. For example I got Slimbox working by putting an onclick event on the image links in the Google map:

camdenSuperstoreContent.innerHTML = "<a rel=\"lightbox\" href=\"images/project-images/camden-superstore.jpg\" onclick=\"Slimbox.open('images/project-images/camden-superstore.jpg', 'Camden Superstores');return false\"><img src=\"images/project-images/camden-superstore-thumb-no-border.jpg\" /></a>";

The problem is that Slimbox uses Mootools and I want to use Jquery for some other stuff...

Is there a way to do this with the lightbox?

Grateful for any suggestions.

Thank you very much.

Answer 1

In javascript console there is a message "Uncaught ReferenceError: Slimbox is not defined" when I click on any image. You commented out Slimbox library in header and instead use jquery.lightbox. But your images still contains this:

Slimbox.open('images/project-images/railway-bridge.jpg', 'The bridge');return false"

Remove all references to Slimbox. Also you should call following function only after images is present on the page, i.e. after Google map is rendered:

$(function(){
    initialize();
    $('a[@rel*=lightbox]').lightBox({fixedNavigation:true});
});