indexOf undefined when image.load()

[whatdis2]

Using jQuery 3.1.1, Bootstrap 3.3.7, Lightbox 4.0.2. Will like to use the image gallery method thus:

<a href="/images/backgrounds/1.jpg" title="Image"
   data-toggle="lightbox"
   data-type="image"
   data-gallery="my-gallery"
   data-title="Image Title"
   data-footer="Image Footer">
    <img id="image_1" class="thumbnail" src="/images/backgrounds/1.jpg" />
</a>

This produces an error for url.indexOf [JavaScript runtime error: Object doesn't support property or method ] in jQuery. The error is triggered on return image.load(...); during the preloadImage, (starting in line 329).

[ashleydw]

please post an example page

[whatdis2]

I dont think that the error shows up in the JSFiddle, however the error shows on my web page by using nothing more than this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/4.0.1/ekko-lightbox.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/4.0.1/ekko-lightbox.css" rel="stylesheet" type="text/css" />

<div class="container">

    <div class="row">

        <div class="col-md-4">
            <div class="panel">
                <div class="panel-body text-center">
                    <a href="http://ghk.h-cdn.co/assets/16/09/980x490/landscape-1457107485-gettyimages-512366437.jpg"
                       title="Image"
                       data-toggle="lightbox"
                       data-type="image"
                       data-gallery="puppies-gallery"
                       data-title="Puppy 1"
                       data-footer="">
                        <img id="puppy_1" class="center-block thumbnail img-thumbnail"
                             style="width:300px;height:150px;"
                             alt="Puppy1"
                             src="http://ghk.h-cdn.co/assets/16/09/980x490/landscape-1457107485-gettyimages-512366437.jpg" />
                    </a>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="panel">
                <div class="panel-body text-center">
                    <a href="http://www.petmd.com/sites/default/files/early-death-puppies.jpg"
                       title="Image"
                       data-toggle="lightbox"
                       data-type="image"
                       data-gallery="puppies-gallery"
                       data-title="Puppy 2"
                       data-footer="">
                        <img id="puppy_2" class="center-block thumbnail img-thumbnail"
                             style="width:300px;height:200px;"
                             alt="Puppy2"
                             src="http://www.petmd.com/sites/default/files/early-death-puppies.jpg" />
                    </a>
                </div>
            </div>
        </div>

    </div>
</div>

<script type="text/javascript">

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

</script>

Error shown in jQuery when clicking on the image (the modal window opens), note that I created the variable theData trying to figure out what was wrong with the function, thanks in advance!

[ashleydw]

https://github.com/ashleydw/lightbox/issues/202