:::: MENU ::::

Sencha Touch image gallery

Few days ago I was searching for a mobile image gallery with sencha and I found a great extension for jQuery Mobile at PhotoSwipe . It seems almost all the apps developed with jQuery Mobile and with an Image gallery are actually using this extension for the gallery.

However, while searched for the same with Sencha Touch, I hardly found something readily available. A number of  posts are there in the Sencha Touch forum asking for a ready-made component – but there isn’t available till now. So, here is one simple photo gallery with a tweak which I used lately for one of our products.

gallery

Let’s start with creating a Sencha Touch project. There are mostly two views – one panel to show the thumbnails and the other is a Carousel to show full view of the images. I have used a Sencha Container to show thumbnails with template. However, you can use a Dataview if necessary but in that case you need to change the css a bit.

For the images, we  simply use Flickr image feed api. So, the Gallery,js file looks like this:

Gallery.js

If there is no image, we will show a message. Flickr api provides multiple sizes of every image (check it here). The public feed provides only “_m” size images – hence template functions getThumbnail and getFullImage provide “_t” (i.e. thumbnail) and “_n” (i.e. mobile image sizes) urls.

We add a loadImages method in Gallery view which fetches the feed data from Flickr API and add the images.

loadImages()

Now, lets call this loadImages from initialize method.

initialize()

And here we get the gallery:

gallery_3

To get a mosaic layout, we need to add -webkit-column-count to the parent container’s style.

And here is what we get:

gallery_1

So, we are done with the first view displaying all the image thumbnails as mosaic layout. We need to handle image tap event but before that, lets create a Gallery Carousel panel to show the full screen images.

GalleryCarousel.js

While creating an instance of this carousel, we will need to send all the images as an array to this carousel as config item. Inside initialize function, for each image create a container and add a “index” property to be used at the bottom bar. We add a listener for “activeitemchange” which fires every time we change one image to another and subsequently it updates the bottom bar title with the current image index.

Css for this carousel goes here:

Now the only task pending is to open this carousel while user taps on an image. For this, lets add a “showGalleryCarousel” function in Gallery.js.

showGalleryCarousel()

In this function, we first create an instance of the Gallery Carousel passing all the images as an array. In addition, we keep a track of the image index which is selected so that we can activate that Container in the Carousel. Last task is to close and destroy the carousel while the “close” icon is tapped. We add  a certain time delay before destroying the carousel in order to maintain the hide transition. And here is how the full screen image looks:

gallery_4

So, this is the first part of the Mosaic Gallery component. In next version, we probably will add pinch-to-zoom, image info and some more functionality.


  • Richard

    Hi Swarnendu,
    Would you have any idea using Sencha Touch to mosaie Gallery from local storage photo gallery inside the device (mobile) rather than from flickr.com?
    Thanks