Topic: Lightbox Gallery Background scroll
Expected behavior On image open no background scrolling is happening. If you scroll horizontal images change, nothing else should happen during scroll. Actual behavior Image is opened with the black background. If you scroll horizontal with even a little vertical (who scrolls 100% horizontal??) the scroll position of the whole page is moving up/down. Resources (screenshots, code snippets etc.)
To resolve the problem with fullscreen, please update screenfull library version:
"screenfull": "^4.2.1",
As for the background scroll - this is something we need to fix on our end. However, you can try to add this workaround to your application:
In lightbox component HTML:
<mdb-image-modal [modalImages]="imagesBasic" type="no-margin" (cancelEvent)="onCancel()"></mdb-image-modal>
In lightbox component TS:
constructor(private renderer: Renderer2) { }
imagesBasic = [
{ img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(117).jpg', thumb:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(117).jpg', description: 'Image 1' },
{ img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(98).jpg', thumb:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(98).jpg', description: 'Image 2' },
{ img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(131).jpg', thumb:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(131).jpg', description: 'Image 3' },
{ img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(123).jpg', thumb:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(123).jpg', description: 'Image 4' },
{ img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(118).jpg', thumb:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(118).jpg', description: 'Image 5' },
{ img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(128).jpg', thumb:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(128).jpg', description: 'Image 6' },
{ img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(132).jpg', thumb:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(132).jpg', description: 'Image 7' },
{ img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(115).jpg', thumb:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(115).jpg', description: 'Image 8' },
{ img: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(133).jpg', thumb:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(133).jpg', description: 'Image 9' }
];
ngOnInit(): void {
}
ngAfterViewInit() {
const imagesContainer = document.querySelector('.mdb-lightbox');
this.renderer.listen(imagesContainer, 'click', () => {
document.body.style.overflow = 'hidden';
});
}
onCancel() {
document.body.style.overflow = '';
}
alex737876 premium commented 4 years ago
I will try it and let you know.Meanwhile i have a question: Why is everything working as a charm with my iphone in https://mdbootstrap.com/docs/angular/advanced/gallery/, are the docs on an older version of MDB?
Arkadiusz Idzikowski staff commented 4 years ago
This example in documentation is outdated, please take a look at this demo: https://ng-demo.mdbootstrap.com/advanced/gallery
alex737876 premium commented 4 years ago
@Arkadiusz Idzikowski Thanks for that link! Also your w/a solved the background-scroll issue, THX! The margin issue still exists, you know a fix for that as well?
But how can it be, that the outdated version is working, while the up-to-date isn't??On ng-demo page with my iPhone SE (2020) it is behaving exactly as in my demo app before w/a?This is really not satisfying. I'd miss at least: - Scrolling up/down shall close the 'image window' smoothly (as in outdated demo) - Smooth right/left scroll to switch images (this is really cool, as in outdated demo) - Fullscreen icon shall have function (if icon is visible) (as in outdated demo)
Do you know if/when this is getting fixed?
Arkadiusz Idzikowski staff commented 4 years ago
The components in the documentation page were from different MDB version (jQ) and were left there by mistake. As you can see, these components are currently based on a different specification and we haven't had a chance to update the Angular component yet. We updated the documentation page to avoid confusion.
We are aware that the current version of the lightbox lacks many useful features, and we have plans to update the component. However, to do that we would need to completely rewrite the code and we can't provide an ETA for that.
To enable left/right swipe feature in Angular app, you need to add HammerModule to your modules imports list.
alex737876 premium commented 4 years ago
Thank you fot informing me! could you fullfill one last wish for me to be happy: On my iphone SE (2020) when i open an image, there is still a black margin on right/left side around the image. if i tap the image one time, the margin disappeared, and the image fits the screen left and right. For a better UX i wish the image to fit to screen as soon as i open it. Could you create a WA for this?
alex737876 premium commented 4 years ago
@Arkadiusz Idzikowski See above, i forgot to @mention you
Arkadiusz Idzikowski staff commented 4 years ago
@alex737876 You can try to override transform styles for the images: ng-gallery-content .effect { transform: scale(1, 1) }
alex737876 premium commented 4 years ago
@Arkadiusz IdzikowskiI tried the styles but even with ng-deep and !important it did not work.
I was able to get the lightbox object via
@ViewChild("siteGallery", {static: false}) gallery: ImageModalComponent;
after i assigned #siteGallery ID to the HTML element. There is a property zoom and zoomed which seem to do the job, but the ImageModalComponent seems not be initialized when i access the properties in ngAfterViewInit() so i cannot set them there. Can you help me settings this properties correctly? How to wait for the initialization? Best would be if it is set only if the isMobile equals to true. Thanks in advance!
Arkadiusz Idzikowski staff commented 4 years ago
@alex737876 Did you try to add the styles to the global styles.scss file? I just tested that and it worked correctly.
Modifying component internal variables is not something we would recommend in this case.
alex737876 premium commented 4 years ago
@Arkadiusz Idzikowski I re-checked it and realized you forgot the 'dot' before ng-gallery-content. With this added, it seems to work. So im happy with this and you can consider this as closed. THX
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Premium
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: 10.1.1
- Device: any mobile i tested
- Browser: Safari, Chrome and Firefox
- OS: Android and iOS
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 4 years ago
Please provide more information about the problem and an example code on which we will be able to reproduce the problem on our end.
alex737876 premium commented 4 years ago
@Arkadiusz Idzikowski i just started using the lightbox/gallery with just the sample code, no change. Code used:
<div class="row"> <mdb-image-modal [modalImages]="imagesBasic" type="no-margin"></mdb-image-modal> </div>When i browse mith my iphone to your example page, it all works. What did i miss?I installed screenfull library and added it to imports in angular.json. I am importing MDBBootstrapModulesPro in app.module (which should include all MDB modules, right?)
alex737876 premium commented 4 years ago
My Problem: scrolling up/down with an image open does not close the image, but scrolls the whole site and lets the image open. Also the Maximise button is visible in my app on iphone, but is not there in your example. Also in my app the image is not fullscreen but has a margin. In your example it fills the full screen.In my app it is getting fullscreen if i tap the image. If i tap again the margin is back. Any clue?
Arkadiusz Idzikowski staff commented 4 years ago
Are there any errors in the console when you test the lightbox component? Can you prepare a simple demo and sent it to a.idzikowski@mdbootstrap.com, so we can reproduce this problem and make sure that the project is configured properly?
alex737876 premium commented 4 years ago
When i click the fullscreen icon in Chrome debugger with "mobile window option", i get: scripts.9bf78cf4ab8c1064a5c0.js:1 Uncaught (in promise) TypeError: Failed to execute 'requestFullscreen' on 'Element': cannot convert to dictionary. at Object.request (scripts.9bf78cf4ab8c1064a5c0.js:1) at Object.toggle (scripts.9bf78cf4ab8c1064a5c0.js:1) at t.fullScreen (main-es2015.ef7f90adf1421bd5c644.js:1) at main-es2015.ef7f90adf1421bd5c644.js:1 at hs (main-es2015.ef7f90adf1421bd5c644.js:1) at i (main-es2015.ef7f90adf1421bd5c644.js:1) at HTMLAnchorElement. (main-es2015.ef7f90adf1421bd5c644.js:1) at l.invokeTask (polyfills-es2015.0f5fed3c2c3460ab4694.js:1) at Object.onInvokeTask (main-es2015.ef7f90adf1421bd5c644.js:1) at l.invokeTask (polyfills-es2015.0f5fed3c2c3460ab4694.js:1)
I am prepareing the sample project and send it to you ASAP