Image Viewer | Pinch to zoom | Double Tap to zoom | Animated Zoom

Dreamers’ LAB : Image Viewer

Today I present my Image Viewer extension. You can use this extension to view images like Facebook and Instagram etc. The user can double tap or pinch to zoom. It supports all images : URL, assets, local.

Blocks

create

Create Image Viewer in a layout.

Layout : Arangements, Cardviews etc.
Path : Path to image. You can change it later

scale_changed

Event triggered when scale changes. You can find current scale, x and y positions.

path

Change image path. It supports all images : URL, assets, local.

duration

Set animation duration in milli seconds

zoomable

Enable or disable zoom

scale_type

Set initial scale type of image.

scale_types

Avaliable image scale types


Sample Usage

blocks


Demo


Files

AIA File : ImageView.aia (777.3 KB)
AIX File : com.dreamers.ImageViewer.aix (43.8 KB)


NOTE : The extension loads images asynchronously but doesn’t support caching. The caching issue can be hopefully fixed if @DevYB makes slight changes in his extension.

34 Likes

Another wonderful contribution :+1:

1 Like

Good extension

1 Like

How is take from internal storage not link?

1 Like

Just pass the path to local image and the rest will be handled by the extension but you need to have storage access permission if you want to show image from storage.

1 Like

Please add cache .

1 Like

I am glad by seeing this nice extension :blush:

1 Like

Compatible with ai2?

1 Like

Yes it works there too

Gifs ? (wishful thinking…)

1 Like

Gifs are not supported because this extension just wraps around ImageView and adds zooming functionality.

1 Like

Please add cache.

Awesome extension. Thank you!

What would it take to implement a swipe left, right, up, down action to an image that’s at scale to fit?

Again Awesome Extension Superb :love_you_gesture: :love_you_gesture:
Can we use multiple Images
I mean If Slide right then open next image & If slide left then open previous Image ??
Is it possible ??

2 Likes

You can use my view pager extension and this one to acheive what you want

1 Like

@zainulhassan I’m having a problem when I load multiple images into an arrangement using imageviewer .Create.

It seems like each previous image is not “unloaded” and by the time I get to about to the 30th image, the phone slows right down and the zoom function is very slow.

If I zoom each image before I load the next, I can see the previous images under the latest image (image size is smaller than the arranbgement size, so there’s a band at the top and bottom).

Am I missing an unload function?

1 Like

When you use the create block it creates a new image view each time. So thats why older images are still visible. If you want to view multiple images in only one image viewer by replacing the previous ones, use this block to update new path :

1 Like

Thank you @zainulhassan I will try this when I’m back at the machine.

In theory, I feel I should use the .Create block as a setup function (perhaps with a blank image) and just use the .Path function to load each of my images when I’m ready to load them.

1 Like

I’m having a problem when I load multiple images into an arrangement using imageviewer .Create.

It seems like each previous image is not “unloaded” and by the time I get to about to the 30th image, the phone slows right down and the zoom function is very slow.

If I zoom each image before I load the next, I can see the previous images under the latest image (image size is smaller than the arranbgement size, so there’s a band at the top and bottom).

Am I missing an unload function?

Solved, thanks to @zainulhassan.

I set up the view first using:

and then call a new path for each image (in my case the image paths are stored in a list)

Works perfectly.

1 Like