Skip to content
This repository has been archived by the owner on May 22, 2020. It is now read-only.

Showing image as bits when using data-remote under BS3 #309

Open
mickey9801 opened this issue Jul 29, 2018 · 8 comments · May be fixed by #337
Open

Showing image as bits when using data-remote under BS3 #309

mickey9801 opened this issue Jul 29, 2018 · 8 comments · May be fixed by #337
Labels

Comments

@mickey9801
Copy link

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: data-remote bug on BS3

@mickey9801 mickey9801 changed the title Opening image as bits when using data-remote under BS3 Showing image as bits when using data-remote under BS3 Jul 29, 2018
@AdrianHL
Copy link

AdrianHL commented Aug 3, 2018

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
Copy link
Owner

ashleydw commented Aug 6, 2018

@AdrianHL
Copy link

AdrianHL commented Aug 6, 2018

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
Copy link
Owner

ashleydw commented Aug 8, 2018

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
Copy link

AdrianHL commented Aug 9, 2018

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.

@AdrianHL
Copy link

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.

@mlt
Copy link

mlt commented May 1, 2020

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

image

mlt added a commit to mlt/lightbox that referenced this issue May 1, 2020
@mlt mlt linked a pull request May 1, 2020 that will close this issue
@mlt
Copy link

mlt commented May 6, 2020

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.

mlt added a commit to mlt/lightbox that referenced this issue May 7, 2020
mlt added a commit to mlt/lightbox that referenced this issue May 7, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants