Topic: Lightbox Zoom animations
Hello I'm using MDB with angular 6 and the lightbox animations seem not to be working. The zoom animations does not happen and the mouse drag gestures to navigate between images doesnt either. Even if I copy and paste the code into a pre configured folder from my account
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Open
Specification of the issue
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Damian Gemza staff commented 7 years ago
Dear Ideal_Poster, In which scenario zoom doesn't work to you? I've checked this right now, and for me, if I click on photo in lightbox (or zoom icon in lightbox), my images are zoomed. About drag gestures: I need to take a deeper look into this. Please let me know about my question. Best Regards, DamianIdeal_Poster pro commented 7 years ago
I should be more specific the zoom fuction works. Im referring to the transition animation once an image is clicked. Once an image is clicked the light box pops up without any transition effectDamian Gemza staff commented 7 years ago
Dear Ideal_Poster, Please check this link. I've recorded a screen movie which shows the actual behavior of my LightBox Component. On my movie, Lightbox works properly. Please check if it looks same in your app, or different. If different, please provide me your environment informations (OS, Browser, Angular version, MDB Version). Link: https://drive.google.com/file/d/1bggC7f7MHCK9NSCQRL6HJaAYRvQEJMBi/view?usp=sharing Best Regards, DamianSebopede commented 5 years ago
Greetings! I am using the Lightbox under mdbootstrap pro version for angular. As mentionned previously, the lightbox does not prompt the zoom in and zoom out animations that it should when being clicked. Is there a workaround for this? I have copied the code directly from the template, and still no zoom transition. Please advise!
Konrad Stępień staff commented 5 years ago
Hi @Sebopede
Can you tell me more information about your project? Version, code. Do you have any errors in the console?
Sebopede commented 5 years ago
Hello, here is package.json that shows all versions of what i am using for the screenfull library. Once again, the lightbox does work but does not contain the zoom in/zoom out nor swipe left/ swipe right compatilibty like in the featured template. Furthermore, i would like to know if there is a way to access the .show() .hide() features of the lightbox. When using lightbox from within a modal, the lightbox is contricted to that modal instead of becoming full page as required. Please advise , and thanks for the help!
{ "name": "masterpiece-granite", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@agm/core": "^1.1.0", "@angular/animations": "~9.0.7", "@angular/cdk": "~8.2.3", "@angular/common": "~9.0.7", "@angular/compiler": "~9.0.7", "@angular/core": "~9.0.7", "@angular/forms": "~9.0.7", "@angular/material": "^8.2.3", "@angular/platform-browser": "~9.0.7", "@angular/platform-browser-dynamic": "~9.0.7", "@angular/router": "~9.0.7", "@fortawesome/fontawesome-free": "^5.11.2", "@types/chart.js": "^2.9.3", "@types/googlemaps": "^3.39.3", "angular-screenfull": "^1.0.0", "animate.css": "^3.7.2", "aos": "^2.3.4", "chart.js": "^2.5.0", "easy-pie-chart": "^2.1.7", "hammerjs": "^2.0.8", "jarallax": "^1.12.0", "ng-uikit-pro-standard": "git+https://oauth2:*****@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git", "ng2-search-filter": "^0.5.1", "ngx-trim-directive": "^1.0.11", "primeicons": "^2.0.0", "primeng": "^9.0.0-rc.2", "rxjs": "^6.5.4", "screenfull": "^5.0.2", "tslib": "^1.10.0", "web-animations-js": "^2.3.2", "zone.js": "~0.10.2" }, "devDependencies": { "@angular-devkit/build-angular": "~0.900.7", "@angular/cli": "~9.0.7", "@angular/compiler-cli": "^9.0.7", "@angular/language-service": "~9.0.7", "@types/jasmine": "~3.3.8", "@types/jasminewd2": "~2.0.3", "@types/node": "^12.11.1", "codelyzer": "^5.1.2", "jasmine-core": "~3.4.0", "jasmine-spec-reporter": "~4.2.1", "karma": "^4.4.1", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~2.0.1", "karma-jasmine-html-reporter": "^1.4.0", "protractor": "~5.4.0", "ts-node": "^8.7.0", "tslint": "~5.15.0", "typescript": "~3.7.5" } }
Konrad Stępień staff commented 5 years ago
If you need help with lightbox + modal, could you make for me a simple project and send me for mail k.stepien@mdbootstrap.com? Od on GitHub without the token.
Also, we will refactor of this component and add swipes, fix zoom, so please wait for the update. Or if you send me a project we will try to fix all your issues.
Best, Konrad.
Sebopede commented 5 years ago
Hello Konrad! thanks for you reply. I will create a simple demo project with the lightbox and you will see its behaviour. I will send you the project to your email. Looking forward to hearing from you, thanks for all the help!