Showing image as bits when using data-remote under BS3

[mickey9801]

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:

[AdrianHL]

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.

[ashleydw]

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

[AdrianHL]

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

[ashleydw]

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

[AdrianHL]

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

[mlt]

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.