Link to trigger gallery loads the raw data of image

[SebCorbin]

So the demo shows only examples where images link to themselves (even with hidden elements), and I'm willing to trigger the lightbox gallery through a link, so here's my code:

<a class="text-muted" href="#" data-toggle="open-gallery">
  <span class="glyphicon glyphicon-picture"></span>
</a>
{% for photo in object.photos.all %}
<div data-toggle="lightbox" data-gallery="gallery-{{ object.id }}" data-type="image" data-remote="{{ photo.photo.thumbnail.1000x1000 }}"></div>
{% endfor %}
<script>
    (function ($) {
        $(function () {
            $(document).on('click', '[data-toggle="open-gallery"]', function (event) {
                event.preventDefault();
                $(this).next('div').ekkoLightbox();
            });
        });
    })(jQuery);
</script>

The problem is, bootstrap-lightbox thinks its a page, and load the raw data of the image into div.modal-content, resulting in something weird, even if I try to set the data-type.

[slightHYP]

Exactly the same issue here, clicking on a button to open a single image.

[ashleydw]

See http://ashleydw.github.io/lightbox/#force-type

[SebCorbin]

Well, I thought my issue description was clear:

The problem is, bootstrap-lightbox thinks its a page, and load the raw data of the image into div.modal-content, resulting in something weird, even if I try to set the data-type.

Also, my code example also mentions data-type="image"...

[ashleydw]

Create a full example and I might be able to help you

[SebCorbin]

Somehow I haven't been able to reproduce this through a jsfiddle, but here are my versions:

• Firefox 54
• jQuery v1.11.1
• Bootstrap v3.3.4
• ekko Lightbox v5.2.0 (from CDN)

But I've stumbled upon these kind of results, https://stackoverflow.com/questions/12694410/twitter-bootstrap-modal-not-displaying-remote-image and doing some debugging:

this._$modal.on('show.bs.modal', this._config.onShow.bind(this)).on('shown.bs.modal', function () {
  _this._toggleLoading(true);
  _this._handle();
  return _this._config.onShown.call(_this);
}).on('hide.bs.modal', this._config.onHide.bind(this)).on('hidden.bs.modal', function () {
  if (_this._galleryName) {
    $(document).off('keydown.ekkoLightbox');
    $(window).off('resize.ekkoLightbox');
  }
  _this._$modal.remove();
  return _this._config.onHidden.call(_this);
}).modal(this._config);

1. The modal is filled by ekko with <div class="modal-dialog" role="document"><div class="modal-content">${header}${body}${footer}</div></div>
2. It then fires the original .modal() from bootstrap with this._config containing the remote image url
3. Bootstrap 3, through jQuery loads the remote data, fetches the image and puts it in .modal-content as raw, thus deleting the content put by lightbox (http://getbootstrap.com/javascript/#modals-options)
4. _handle() is called but the _containerToUse() which it processes is not in the DOM anymore

[CritLoren]

I also have this problem. Bootstrap v4 beta 5, jquery 3.2.1 data-type also doesn't help.

[bogal]

I'm having the same issue. Bootstrap modal is showing raw data, starting with exif data. Have set data-type and data-remote but has made no difference. Loading an image outside of document root, so using a script to file_get_contents and set appropriate header MIME types before flushing to browser. Using bootstrap 3.3.7, firefox 57, zend framework 2 app (php 7.1).

[bogal]

I found i was able to (partially) fix my issue, by setting the data-type to "image" and the data-remote to the uri of the image. My link looks like this:

< a data-toggle="lightbox" data-type="image" data-remote="link/to/image/" >< i class = "fa fa-camera" style = "padding-right: 0.5em;"></ i>image filename</ a>

However, this has raised another issue, in that the width of the image is ignored, but i shall open a new issue to explain this.