ekko-Lightbox.js:63 Uncaught TypeError: this.modal.on(...).on(...).on(...).on(...).modal is not a function

[DivideByZ3r0]

Hi! First i wanna say i am newbee and self tought so dont be to harsh on me.

I am developing some website and I am trying to implement your lightbox gallery I am not sure if this is place for questions like this and if i am mistaken so sorry.

When i click on the photo i get error in title. :

Uncaught Error: Bootstrap dropdown require Popper.js (https://popper.js.org)
    at bootstrap.js:1414
    at bootstrap.js:1823
    at bootstrap.js:3831
csi.gstatic.com/csi?v=2&s=mapsapi3&v3v=30.9&action=apiboot2&libraries=geometry%2Csearch&e=google-maps-embed,10_1_0,10_2_0&rt=main.11 Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
csi.gstatic.com/csi?v=2&s=mapsapi3&v3v=30.9&action=apiboot2&libraries=geometry%2Csearch&e=google-maps-embed,10_1_0,10_2_0&rt=firstmap.91 Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
csi.gstatic.com/csi?v=2&s=mapsapi3&v3v=30.9&action=map2&firstmap=true&hdpi=false&mob=false&staticmap=true&size=300x250&hadviewport=true&libraries=geometry%2Csearch&e=google-maps-embed,10_1_0,10_2_0&rt=visreq.238 Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
csi.gstatic.com/csi?v=2&s=mapsapi3&v3v=30.9&action=map2&firstmap=false&hdpi=false&mob=false&staticmap=true&size=38x38&hadviewport=true&libraries=geometry%2Csearch&e=google-maps-embed,10_1_0,10_2_0&rt=visreq.199 Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
csi.gstatic.com/csi?v=2&s=mapsapi3&v3v=30.9&action=map2&firstmap=true&hdpi=false&mob=false&staticmap=true&size=300x250&hadviewport=true&libraries=geometry%2Csearch&e=google-maps-embed,10_1_0,10_2_0&rt=staticmap.246,firstpixel.246,allpixels.246 Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
csi.gstatic.com/csi?v=2&s=mapsapi3&v3v=30.9&action=map2&firstmap=false&hdpi=false&mob=false&staticmap=true&size=38x38&hadviewport=true&libraries=geometry%2Csearch&e=google-maps-embed,10_1_0,10_2_0&rt=firsttile.311,firstpixel.311 Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
csi.gstatic.com/csi?v=2&s=mapsapi3&v3v=30.9&action=map2&firstmap=false&hdpi=false&mob=false&staticmap=true&size=38x38&hadviewport=true&libraries=geometry%2Csearch&e=google-maps-embed,10_1_0,10_2_0&rt=tilesloaded.311,allpixels.311 Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
csi.gstatic.com/csi?v=2&s=mapsapi3&v3v=30.9&action=map2&firstmap=false&hdpi=false&mob=false&staticmap=true&size=38x38&hadviewport=true&libraries=geometry%2Csearch&e=google-maps-embed,10_1_0,10_2_0&rt=visres.350 Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
csi.gstatic.com/csi?v=2&s=mapsapi3&v3v=30.9&action=map2&firstmap=true&hdpi=false&mob=false&staticmap=true&size=300x250&hadviewport=true&libraries=geometry%2Csearch&e=google-maps-embed,10_1_0,10_2_0&rt=visres.479 Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
ekko-Lightbox.js:63 Uncaught TypeError: this.modal.on(...).on(...).on(...).on(...).modal is not a function
    at new EkkoLightbox (ekko-Lightbox.js:63)
    at HTMLAnchorElement.<anonymous> (ekko-Lightbox.js:417)
    at Function.each (jquery.min.js:2)
    at r.fn.init.each (jquery.min.js:2)
    at r.fn.init.$.fn.ekkoLightbox (ekko-Lightbox.js:409)
    at HTMLAnchorElement.<anonymous> (galerija.html:134)
    at HTMLDocument.dispatch (jquery.min.js:3)
    at HTMLDocument.q.handle (jquery.min.js:3)
csi.gstatic.com/csi?v=2&s=mapsapi3&v3v=30.9&action=map2&firstmap=true&hdpi=false&mob=false&staticmap=true&size=300x250&hadviewport=true&libraries=geometry%2Csearch&e=google-maps-embed,10_1_0,10_2_0&rt=firsttile.648 Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
csi.gstatic.com/csi?v=2&s=mapsapi3&v3v=30.9&action=map2&firstmap=true&hdpi=false&mob=false&staticmap=true&size=300x250&hadviewport=true&libraries=geometry%2Csearch&e=google-maps-embed,10_1_0,10_2_0&rt=tilesloaded.703 Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
ekko-Lightbox.js:63 Uncaught TypeError: this.modal.on(...).on(...).on(...).on(...).modal is not a function
    at new EkkoLightbox (ekko-Lightbox.js:63)
    at HTMLAnchorElement.<anonymous> (ekko-Lightbox.js:417)
    at Function.each (jquery.min.js:2)
    at r.fn.init.each (jquery.min.js:2)
    at r.fn.init.$.fn.ekkoLightbox (ekko-Lightbox.js:409)
    at HTMLAnchorElement.<anonymous> (galerija.html:134)
    at HTMLDocument.dispatch (jquery.min.js:3)
    at HTMLDocument.q.handle (jquery.min.js:3)
ekko-Lightbox.js:63 Uncaught TypeError: this.modal.on(...).on(...).on(...).on(...).modal is not a function
    at new EkkoLightbox (ekko-Lightbox.js:63)
    at HTMLAnchorElement.<anonymous> (ekko-Lightbox.js:417)
    at Function.each (jquery.min.js:2)
    at r.fn.init.each (jquery.min.js:2)
    at r.fn.init.$.fn.ekkoLightbox (ekko-Lightbox.js:409)
    at HTMLAnchorElement.<anonymous> (galerija.html:134)
    at HTMLDocument.dispatch (jquery.min.js:3)
    at HTMLDocument.q.handle (jquery.min.js:3)

This is my first time that i am posting something here.

Here is html:

And here are files that i added:

    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet" />
    <link href="default.css" rel="stylesheet" type="text/css" media="all" />
    <link href="fonts.css" rel="stylesheet" type="text/css" media="all" />
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
    <link href="lightbox-master/ekko-Lightbox.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

And in the bottom scripts:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
                            <script src="js/bootstrap.js"></script>
                            <script src="lightbox-master\ekko-Lightbox.js"></script>
                            <script>
                                $(document).on('click', '[data-toggle="lightbox"]', function(event) {
                                    event.preventDefault();
                                    $(this).ekkoLightbox();

                                });</script>

                            </body>

[ashleydw]

You probably need to wrap the code in https://learn.jquery.com/using-jquery-core/document-ready/

$( document ).ready(function() {
$(document).on('click', '[data-toggle="lightbox"]', function(event) {
    event.preventDefault();
    $(this).ekkoLightbox();
});</script>
});

[DivideByZ3r0]

No sir wont work.. photos are there and when i click on them they wont open :(

[ashleydw]

Please post your page or a working example

[rsnitsch]

I can reproduce that error message when commenting out line 97 in ekko-lightbox.js (the bootstrap version 3 check). I am using bootstrap v4 and symfony's webpack-encore to build my asset javascript files.

I've posted a lot of details here: https://stackoverflow.com/questions/48521773/ekko-lightbox-with-webpack-encore-cannot-read-property-constructor-of-undefin

[rsnitsch]

I solved it now. See the answer to my own question on Stackoverflow: https://stackoverflow.com/a/48539862/623685

The problem was how I included jQuery via webpack-encore. Each javascript file got a separate instance of jQuery, and that interfered with bootstrap's module registration to $.fn.

The solution is to create a shared jQuery entry via webpack-encore's createSharedEntry() function.

[saularis]

I had the same issue solved just adding bootstrap.min.js after jquery and before plugin code.

[chrisco484]

You probably need to wrap the code in https://learn.jquery.com/using-jquery-core/document-ready/

$( document ).ready(function() {
$(document).on('click', '[data-toggle="lightbox"]', function(event) {
    event.preventDefault();
    $(this).ekkoLightbox();
});</script>    <---- 
});

In your suggestion to wrap within document 'ready' you have a spurious embedded in there which may cause confusion for newbies.