Ionic Image Zoom with Swiper

Learn to create an image zoom functionality within Ionic Angular apps using Swiper. On top of that we add a cool blurred modal light box!
🔥 Learn Ionic faster with the Ionic Academy: ionicacademy.com/
🎉 Get my Practical Ionic Book: devdactic.com/practical-ionic/
#############################
👨‍💻 Want to read instead of watch?
Here's the full Ionic tutorial: ionicacademy.com/ionic-image-...
😱 NEW: Capacitor Crash Course!
ionicacademy.com/capacitor-cr...
⚡️Take my famous 7 Day Ionic Crash Course
ionicacademy.com/ionic-crash-...
🤷‍♂️Want more Ionic tutorials?
There you go: devdactic.com/
#############################
❤️You can also find me...
on / simongrimm_
on / schlimmson
on / devdactic
Or join our Facebook group:
/ simonics
#############################
00:00 Intro
01:30 App setup & Image gallery
06:35 Image zoom modal
16:59 Outro

[@koustavsarkar3378]

Keep it up Simon u are always the best ionic master ❤️

[@Channel-kc7px]

nice tutorial , thanks Simon

[@aabuabara]

Excellent tutorial!

[@galaxies_dev]

Thank you!

[@mohamedimran9702]

How show slider in that viewer itselef i dont need to go back and click each image to view or zoom if i slide means i need to able to see next images ...

[@helper4665]

Excellent!

[@galaxies_dev]

Glad you liked it!

[@usanzadunje]

I actually had performance issues when using backdrop-blur or blur on lower end phones. It slowed app down so much it wasnt usable. On newer phones it wasnt that bad. After some googling i found out it is pretty new feature and not optimized that well yet.

[@galaxies_dev]

Thanks for the info Dusan, guess I should get some older devices for testing x)

[@calexandre496]

How to put animated splash screen on capacitor? the old method no longer works :/

[@milothoxha4430]

Out of topic question: How can I change a JSON File that is on assets/i18n/en.json, to be updated from API data, without the need to reupload a new APK? I have an APP that has two different languages, but these languages are updated frequently. The way that i18n translator is made is that that file is read only from assets folder. Is there any way that i can access and edit that file? I have seen different stuff but none provides with that and that the FileSystem of Capacitor does not provide access to assets folder. Even that I can access the file it self, and change any data to it, it wont reflect it. Thanks alot.

[@galaxies_dev]

Haven't tried anything like that yet..Yeah you can't write to that folder, but maybe you can use a different location on the file system and tell the Angular i18n package to read the file from there instead?

[@kaidozCS12]

It is not working on ionic 6.5. I already installed swiper but It says that "Cannot find module 'swiper/angular' or its corresponding type declarations." after importing it.

[@galaxies_dev]

Swiper just released a major new version that changed how to use it - will create something about it!

[@kd7944]

Hi Simon, thanks for sharing. I have tried and it is not working on Ionic 6

[@galaxies_dev]

What happened?

[@InvaderRuben]

doesn't found "swiper/angular"? downgrade to 8.4