Load FullDefinition image on demand

[smardine]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[x] Feature request
[ ] Documentation issue or request
[ ] Support request

Current behavior

Is there any way to first load only thumnail image and when i click on it, make a request to my server to get the full def of the corresponding image?

What is the motivation / use case for changing the behavior?

We plan to use the gallery on webapp witch is used on phone, so due to network speed, we try to get as less data as we can.

Environment (the most important section to fill very carefully)

- Node version: v8.9.4  
- npm version: 6.4.1  
- Operating System and version: Windows 
- Angular version: 6.0.7 
- angular-cli version (or SystemJS/Webpack): 6.1.1 
- I'm using Server Side Rendering with angular-universal: NO
- I'm compiling with mode: DEBUG / PROD / PROD with AOT



Browser:
- [x] Chrome (desktop) version XX
- [x] Chrome (Android) version XX
- [x] Chrome (iOS) version XX
- [x] Firefox version XX
- [x] Safari (desktop) version XX
- [x] Safari (iOS) version XX
- [x] IE version XX
- [x] Edge version XX

Others:

[Ks89]

Sure.
The library already have this feature.
When you instantiate an image, set the modal path with the bigger image and inside the plain path the smaller one.

If you check on the documentation website (features - modal gallery) you could find the full definition of Image class.

If you have other questions or problems feel free to ask.

[smardine]

Hi, thanks for your answer (and your component :) )
the scenario is this:

when my componenet is loaded, i take from the server juste the thumbnail image as base64string and i put in the modal path so my users can see the gallery as soon as the component is loaded.

then,in a synchronous task witch is triggered when the user click on the gallerry to open it in modal, i take the "fulldef" base64 string from the server and make an update of the modal path with this new base64 string and plain path with the thumbnail base64 string.

the reason i'm doing it this way is to limit the bandwidth used by the customer because they mostely use the app on their phones

The problem i'm facing of is:
if the user click on the gallery "too soon", the thumbnail appear, i have to go to the next picture and go again to my first pcture to show the "fulldef" image.
I wonder if there is an event i can send to "refresh" the modal image witch is allready on screen without having to go between images.

An other way would be to intercept the "onClick" of the gallery to get the image from the server and then, when my asynchronous task as ended, show the gallery but i don't know if there is a way to do this.

Thanks again for your time.

Regards,

[Ks89]

If you read the documentation you will see that there are also output events. Also, there are many demos to see all features.

What you are asking is a very specif use case. In fact, you want to load dynamically a base64 forcing it externally updating the image array.
This is not a feature that I support and It's not something with high priority. If you want to help me and add it to the library I'll happy to help you.

However, why are you using base64? I suggest to load thumbs with base64, but add real img ad modal. In this way they were loaded asynchronously only when requested (also with a configurable spinner)

[smardine]

the images are stored in database as base64 string because they are image uploaded by the users.
i use aspnet core and sql server database.
If i understand correctly, i should put an url in modal path?

As i can see in your samples, you put relative path like '../assets/images/...' or base64 string but no url.

Do you know if there is any way for my server to generate un url from a base64 string?

thanks again

[Ks89]

I'm adding urls in this way because my images are stored locally. However you could add also external paths, but I suggest to use local images to be able to use download features.

I never tried to use base 64 from url.

[smardine]

I'ts me again,
i find a way to do it with the galleryservice
I forked your repos and modify some files but how can i submit i to you ?
The only modified files are 'modal-gallery.component.ts' and 'gallery.service.ts'

the commit is here

[Ks89]

You should create a pull request on github following the official tutorial of how to create a pull request

[smardine]

ok, in witch branche should i make the pullrequest?

[Ks89]

Develop

[Ks89]

I'll port your fix to the next major release by myself

[smardine]

ok, thanks

[Ks89]

Ok I merged the pull request applying some fixes and improvements into develop branch