Ionic Image Zoom with Swiper

preview_player
Показать описание
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!

#############################

👨‍💻 Want to read instead of watch?

😱 NEW: Capacitor Crash Course!

⚡️Take my famous 7 Day Ionic Crash Course

🤷‍♂️Want more Ionic tutorials?

#############################

❤️You can also find me...

Or join our Facebook group:

#############################

00:00 Intro
01:30 App setup & Image gallery
06:35 Image zoom modal
16:59 Outro
  1. Simon Grimm
  2. ionic framework
  3. learn ionic
  4. angular
  5. ionic angular
  6. ionic guide
Рекомендации по теме
Ionic Image Zoom 0:17:53

Ionic Image Zoom with Swiper

How to implement 0:08:54

How to implement Swiper with Ionic 7 (ion-slides removed)

How to Zoom 0:05:01

How to Zoom Image in Ionic in 5 Minutes

The Essential Ionic 0:27:55

The Essential Ionic Image Zoom Guide (Modal & Cards)

How to Create 0:17:00

How to Create an Ionic 4 Image Gallery with Zoom

Ionic 6 Angular 0:07:09

Ionic 6 Angular image magnifier

Ionic Swiper Slide 0:21:45

Ionic Swiper Slide using Swiper 9 (alternative of ion-slides)

Part 1 How 0:07:14

Part 1 How to use Swiper 9 with Ionic 7 Angular Application ?

Simple Custom ionic 0:03:40

Simple Custom ionic slides with image animation - Real Quick

How to use 0:19:09

How to use Swiper with Ionic (instead of ion-slides)

Ionic Slide with 0:00:22

Ionic Slide with Pinch, Pan Zoome

How to use 0:06:42

How to use slider feature in ionic 6 with latest angular version using swiper plugin

Photo Viewer plugin 0:03:54

Photo Viewer plugin for zooming , sharing , full screen of photo in ionic capacitor app

Ionic Framework Animation 0:00:25

Ionic Framework Animation (SWIPE)

This hover image 0:00:13

This hover image zoom effect is super smooth way how to enhance your website 🚀

Ionic 6 On-Boarding 0:14:31

Ionic 6 On-Boarding Screens using Swiper.js | Uber Eats App 2022 | Episode - 6

How to use 0:04:44

How to use SwiperJS with Ionic and Angular

🔴 Integrando Ionic 0:36:29

🔴 Integrando Ionic 5 com o Zoom

PlugPDF: Pinch Zoom-In 0:00:15

PlugPDF: Pinch Zoom-In and Double Tap Zoom-Fit

Lazy loading images 0:02:52

Lazy loading images in Ionic 6 and Angular Applications

Responsive Slider | 0:16:27

Responsive Slider | Swiper Slider 3D-Coverflow Effect React JS

How to Add 0:11:34

How to Add Watermarks to Your Ionic Images

Ionic 6 Angular 0:06:58

Ionic 6 Angular Photviewer : How to show a picture from an URL into a Photo Viewer

Ionic intro | 0:03:14

Ionic intro | S02E35 | Ionic slides bg-image

Комментарии
Автор

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.

usanzadunje
Автор

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 ...

mohamedimran
Автор

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

koustavsarkar
Автор

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

calexandre
Автор

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

kd
Автор

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.

kaidozCS
Автор

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.

milothoxha
Автор

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

InvaderRuben