nivo-lightbox not launching when image clicked

Question

I believe that I have followed the instructions to setup this javascript plugin, but it does not seem to be working. (plugin: http://dev7studios.com/nivo-lightbox#/documentation)

I can see the links to the css, theme and javascript files correctly showing in my (I can see that it is correctly seeing these files too).

(i've commented out the jquery as this is already loaded for my wordpress theme.

The lightbox doesn't seem to be running though. Any tips on why this isn't picking up my images and showing them in the lightbox?

once I get this going I still need to figure out how to wrap my images with an attribute for "data-lightbox-gallery" so I can get the galleries working as well.

Image management: nextgen gallery image layout: Justified Image Gallery

URL: http://www.sandbox.imageworkshop.com/projects/william-angliss-institute/

Answer 1

If you open the console on this page - you'll see that there are two javascript errors.

1.Uncaught TypeError: Property '$' of object [object Object] is not a function (index):71

I looked into the source code of your page and on line 71 you have this:

$(document).ready(function(){
    $('a').nivoLightbox();
});

This means that jQuery is not working. You need to use a no-conflict wrapper.

2.Uncaught TypeError: Object [object Object] has no method 'orbit'

On this line you use .orbit() to make a home page slider... but not on the home page. You get this error because jQuery couldn't find a block with the id of #featured. To avoid such mistakes you need to check if the block is on the page, possibly like so:

var home_slider = $('#featured');

if( home_slider [0] ) { //if jQuery object is not empty
    home_slider.orbit({
    //yor params here
    })
}

If you get rid of these errors - you'll most likely see the nivo-lightbox :)