Lightbox Zoom animations

Topic: Lightbox Zoom animations

Ideal_Poster pro asked 6 years ago

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

Damian Gemza staff commented 6 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, Damian

Ideal_Poster pro commented 6 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 effect

Damian Gemza staff commented 6 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, Damian

Sebopede free commented 4 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 4 years ago

Hi @Sebopede

Can you tell me more information about your project? Version, code. Do you have any errors in the console?

Sebopede free commented 4 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" } }

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+<a href="https://oauth2" target="_blank" rel="nofollow">https://oauth2</a>:*****@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"
 }
}

Please insert min. 15 characters.

Konrad Stępień staff commented 4 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 free commented 4 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!

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Ideal_Poster

Pro User 0Support score
2Questions 0Answers 0Snippets