Showing image as bits when using data-remote under BS3
mickey9801 opened this issue · comments
I found that the "data-remote" attr isn't work with Bootstrap 3.3.7. It will showing bits rather than and image, even the image is loaded correctly within microseconds. Can anyone tell me how to fix it?
I am test it with Google Chrome. You may try it on official site: http://ashleydw.github.io/lightbox/bs3.html#data-remote
The screenshot:
I have found the same issue today. I guess that the error is located in how the image is requested to the server because the same request is sent twice but the first one is requested as X-Requested-With: XMLHttpRequest even if the data-type is set to image.
In the library example it works for the youtube video (if you change the data-remote) but doesn't with the image. I'm trying to find the issue in the library code but it's not clear where it does the double request.
I have tried that and got the same result (using Bootstrap 3). Also tried the disable-external-check option.
In addition, as @mickey9801 said it is visible in this url http://ashleydw.github.io/lightbox/bs3.html#data-remote
Didn't realise it was Bootstrap 3 - I'm not sure, it looks like the entire content div is getting replaced. I suggest going back to an older version; something like https://github.com/ashleydw/lightbox/releases/tag/v3.3.3
It works but there is an error in the console
Uncaught TypeError: url.indexOf is not a function
at jQuery.fn.init.jQuery.fn.load (libs.js:9857)
at Image.d.onload (project-view.js:14810)
| jQuery.fn.load | @ | libs.js:9857
| d.onload | @ | project-view.js:14810
| load (async) | |
| preloadImage | @ | project-view.js:14809
| detectRemoteType | @ | project-view.js:14784
| modal_shown | @ | project-view.js:14758
| (anonymous) | @ | project-view.js:14748
| dispatch | @ | libs.js:5183
| elemData.handle | @ | libs.js:4991
| trigger | @ | libs.js:8249
| (anonymous) | @ | libs.js:8327
| each | @ | libs.js:354
| each | @ | libs.js:189
| trigger | @ | libs.js:8326
| (anonymous) | @ | libs.js:11383
| fn | @ | libs.js:4932
| handle | @ | libs.js:10437
| dispatch | @ | libs.js:5183
| elemData.handle | @ | libs.js:4991
The line 14810 is part of this library:
var b;return b = a("<img />"), b.attr("src", d.src), b.addClass("img-responsive"), e.lightbox_body.html(b), e.modal_arrows && e.modal_arrows.css("display", "block"), b.load(function () {
return e.resize(d.width), e.options.onContentLoaded.call(e);
});
Maybe it needs a different jQuery version but that will be too much downgrade to fix this. I'll try to attribute around the image with the image ref instead of using data-remote and see what I get.
I wrapped the image with an element with the library data attributes and it does the job but the data-remote issue still there in BS3.
I suggest we rename data remote into something like src (data-src). Or maybe as a fallback in addition to data-remote so current library user's won't have to change existing code. It conflicts with Bootstrap 3 usage of remote modal that was deprecated and removed in BS 4.
https://getbootstrap.com/docs/3.4/javascript/#modals-options
Perhaps it can and should be done without renaming. The real culprit is copying data to _config and passing it along with data-remote to .modal.