Unable to use Ekko-Lightbox

sage
1

Hi, I’m trying to use Ekko Lightbox for modals on a site that I’m currently developing.

I decided to try and use Bower to install it as I couldn’t get it working by adding the JS file, adding to the manifest and then enqueuing:

➜  sitename git:(V0.2) ✗ bower install --save ekko-lightbox

bower not-cached    git://github.com/ashleydw/lightbox.git#*
bower resolve       git://github.com/ashleydw/lightbox.git#*
bower download      https://github.com/ashleydw/lightbox/archive/v3.3.3.tar.gz
bower extract       ekko-lightbox#* archive.tar.gz
bower resolved      git://github.com/ashleydw/lightbox.git#3.3.3
bower cached        git://github.com/twbs/bootstrap.git#3.3.6
bower validate      3.3.6 against git://github.com/twbs/bootstrap.git#>= 3.0.0
bower install       ekko-lightbox#3.3.3
bower install       bootstrap#3.3.6

Ekko appears to be installed and has been added to my main.js file

Screen Shot 2015-12-27 at 15.10.53.png1359×911 187 KB

I’ve added the correct anchor tag as well (works on the static site):

<a class="play" href="http://vimeo.com/146572703" data-remote="http://player.vimeo.com/video/146572703" data-toggle="lightbox">
...
</a>

I think my problem is that I can’t figure out how to implement it:

$(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
event.preventDefault();
$(this).ekkoLightbox();
});

I’ve tried adding the above code to a custom.js, adding that to the manifest and then enqueueing (the JS file appears when I inspect the code), but it still doesn’t appear to work.

Any help would be greatly appreciated!

Cheers,

Jamie

2

Where are you putting the $(document).delegate(...); code? You should just be able to put that into main.js no problem, and if it’s showing up on each page just put it in common’s init function: https://github.com/roots/sage/blob/master/assets/scripts/main.js#L21 - there’s no need to add that little bit of code to it’s own file and enqueue that separately.

3

Also just FYI I’m pretty sure most people are using .on() instead of .delegate() these days: http://api.jquery.com/delegate/#delegate-selector-events

4

Thanks a lot for your help, adding to the commons init function worked perfectly.

1 Like