Open SebCorbin opened 7 years ago
Exactly the same issue here, clicking on a button to open a single image.
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"
...
Create a full example and I might be able to help you
Somehow I haven't been able to reproduce this through a jsfiddle, but here are my versions:
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);
<div class="modal-dialog" role="document"><div class="modal-content">${header}${body}${footer}</div></div>
.modal()
from bootstrap with this._config
containing the remote image url.modal-content
as raw, thus deleting the content put by lightbox (http://getbootstrap.com/javascript/#modals-options)_handle()
is called but the _containerToUse()
which it processes is not in the DOM anymoreI also have this problem. Bootstrap v4 beta 5, jquery 3.2.1 data-type also doesn't help.
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).
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.
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:
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 thedata-type
.