Uncaught TypeError: undefined is not a function

[jvrdom]

First of all, you save my life and this plugin is great! Great Work.

Now, the ugly part, i have this problem with the simple lightbox, when i click in any of the "<a href" get:

Uncaught TypeError: undefined is not a function

I inspect with chrome for what is the error and this is the line in where the error shows up:

$(this).ekkoLightbox();

I inspect and try to fixed but still same the error :(

Maybe i missing something?

This is my definition in html:

 <h3 class="page-header" id="hidden-elements">Videos</h3>
      <div class="row">
    <div class="col-md-offset-1 col-md-10">
         <div class="row">
              <a href="someUrl" data-toggle="lightbox" data-gallery="youtubevideos" class="col-sm-4">
                 <img src="someUrl" class="img-responsive" />
              </a>
             </div>
        </div>
      </div>

And here is the Script:

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

I hope that you can tell me what i'm doing wrong or is a different way to do the same.

Thanks!

[ashleydw]

Sounds like you're not including either jquery, the bootstrap js, or the ekko javacript in the page. Post a link for more help

[jvrdom]

Hi @ashleydw, i have include all the necessary and the order is fine...

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/catastrophes-system-web/faces/javax.faces.resource/bootstrap-lightbox/ekko-lightbox.min.js"></script>

[ashleydw]

You need to post a link to your page or a jsfiddle

[MarcMagnin]

Hey ! Thanks a lot as well dude! That is properly awesome stuff.

But I have the same problem as well. Any thoughts ?

Cheers !

[MarcMagnin]

Problem solved with Bootstrap 3.3.1. Thumbs up !

[ashleydw]

@MarcMagnin what were you using? Are you sure it's not a jquery dependency?

[MarcMagnin]

Don't think so. Now I struggle a bit, I'm stuck with the "loading..." message. Here is the HTML :

<a ng-switch-when="image" class="details-image" href="http://someImageUrl" data-toggle="lightbox" >
          <img src="http://someImageUrl" />
  </a>

And here the JS :

$doc.find('*[data-toggle="lightbox"]').click(function () {
                    event.preventDefault();
                    return $(this).ekkoLightbox({
                        always_show_close: true,
                        type:'image',
                    });
                });

Everything seems fine but still nothing in the modal. I'm digging through the sources to identify the problem. Regards.

[ashleydw]

Posting a link would be more helpful, but the console should tell you the error.

As a side note, you should use delegate rather than find (see docs for full example):

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

[MarcMagnin]

It seems that the image.onload() is never reached in preloadImage :

preloadImage: function(src, onLoadShowImage) {
      var img,
        _this = this;
      img = new Image();
      if ((onLoadShowImage == null) || onLoadShowImage === true) {
        img.onload = function() {
             // this code is never reached

If I force the following code, ie, skip preloading, that does work. Any thoughts ?

 var image;
          image = $('<img />');
          image.attr('src', img.src);
          image.addClass('img-responsive');
          _this.lightbox_body.html(image);

[ashleydw]

You need to post a jsfiddle or an actual page for help, i can take a guess that your image isn't loading fully

[YuryYaroshevich]

I solved this problem after adding ekko-lightbox.js on page.

[hellboy81]

I have the same problem running index.html from ekko-lightbox examples

OS: Windows 7 64 Bit Browser: Google Chrome Editor: Atom with atom-live-server

Error Log from Browser:

Live reload enabled. /:615:3
TypeError: $(...).ekkoLightbox is not a function
<anonym>
 /:543
jQuery.event.dispatch()
 jquery.js:4640
jQuery.event.add/elemData.handle()
 jquery.js:4309
 /:543:28
TypeError: $(...).ekkoLightbox is not a function

Tested both with Bootstrap 3.3.4 and 3.3.6 (newest version) - the same problems