Ionic Gallery

Ionic Gallery

Ionic Image Gallery

Free!

(16)
Pedro Abreu

Pedro Abreu

Member since 2015

Details

Version:
0.1.14
Size:
0mb
Ionic:
1.0.0
Platforms:
iOS, Android
View ID:
150745FE
Released:
9 years ago
Updated:
8 years ago
Category:
Plugins
Tags:
ionic, gallery, image, slideshow

ion-gallery

Ionic gallery with slider

Demo availabe in Ionic View with id 150745FE

$ bower install --save ion-gallery

Features

  • Define number of collums to present (1 to array length)
  • Pinch and double tap do zoom on picture

Usage

Load script and css on the html

<link href="lib/ion-gallery/dist/ion-gallery.css" rel="stylesheet">
...
<script src="lib/ion-gallery/dist/ion-gallery.min.js"></script>

Add ion-gallery as dependency to your project

angular
 .module('starter', ['ionic','ion-gallery'])

Add gallery directive with array of photos:

<ion-gallery ion-gallery-items="items"></ion-gallery>

Data source example

$scope.items = [
  {
    src:'http://www.wired.com/images_blogs/rawfile/2013/11/offset_WaterHouseMarineImages_62652-2-660x440.jpg',
    sub: 'This is a <b>subtitle</b>'
  },
  {
    src:'http://www.gettyimages.co.uk/CMS/StaticContent/1391099215267_hero2.jpg',
    sub: '' /* Not showed */
  },
  {
    src:'http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg',
    thumb:'http://www.gettyimages.co.uk/CMS/StaticContent/1391099215267_hero2.jpg'
  }
]

Thumbnail property is also optional. If no thumbnail, the source content will be used

Subtitle property is optional. If no property present, nothing is showed (Same for empty string). Supports html tags.

UI will reflect changes on the content object passed to the directive. Example of adding and removing pictures can be seen in the ionic view app.

Config

  • Via provider:

Default values in example.

app.config(function(ionGalleryConfigProvider) {
  ionGalleryConfigProvider.setGalleryConfig({
                          action_label: 'Close',
                          toggle: false,
                          row_size: 3,
                          fixed_row_size: true
  });
});
Default values
action_label - 'Close' (String)
toggle - false (Boolean)
row_size - 3 (Int)
fixed_row_size - true (boolean). If true, thumbnails in gallery will always be sized as if there are "row_size" number of images in a row (even if there aren't). If set to false, the row_size will be dynamic until it reaches the set row_size (Ex: if only 1 image it will be rendered in the entire row, if 2 images, both will be rendered in the entire row)
  • Via markup:

Markup overrides provider definitions

  • ion-gallery-row: Defines size of the row. Default to 3 images per row

        <ion-gallery ion-gallery-items="items" ion-gallery-row="5"></ion-gallery>
  • ion-gallery-toggle: Sets one tap action on slideshow to hide/show subtitles and "Done" button. Default: true

        <ion-gallery ion-gallery-items="items" ion-gallery-toggle="false"></ion-gallery>
  • ion-item-callback: Overrides the default action with a custom callback when an item is tapped. Default: opens the slider modal

        <ion-gallery ion-gallery-items="items" ion-item-callback="callback(item)"></ion-gallery>

Hey there! You'll need to log in before you can leave a comment here.

pawan jain

pawan jain   ·   9 years ago

Hello Pedro, Your Gallery plugin saved my day. Can you please add an option to directly launch the image slider without opening the Gallery image grid? Or if possible, can you please publish the image slider with all of the zoom/pan functions as a separate plugin? Thanks.

Pedro Abreu

Pedro Abreu   ·   9 years ago

Hi Pawan, I was thinking about that the other day and it seems to me that the best option would be to break it down to two different plugins, one for the gallery and the other for the slider. I'll have a look at this soon.

pawan jain

pawan jain   ·   9 years ago

Hello Pedro, Thanks for considering this. It would be great for us if you can publish this plugin at the earliest. I was going through the plugin's code in "gallery.html" and have this question that how are you able to access and call the "showImage()" function of the ion-slider directive's controller from inside of the ion-gallery directive's code? : <div class="gallery-view"> <div class="row" ng-repeat="item in items track by $index" ion-row-height> <div ng-repeat="photo in item track by $index" class="col col-{{responsiveGrid}} image-container"> <img ion-image-scale ng-src="{{photo.src}}" ng-click="showImage({{$parent.$index}},{{$index}})"> </div> </div> <div ion-slider></div> </div>

pawan jain

pawan jain   ·   9 years ago

Hello Pedro, We managed to use the slider code from your plugin into our app. Thanks. There is a CORRECTION in "slider.js". In the "$scope.slideChanged" method on line number 111 the statement is "if( currentImage > galleryLength )". It should be "if( currentImage >= galleryLength )". Otherwise one of the images in the slider gets duplicated and repeats.

Basaita Omar

Basaita Omar   ·   9 years ago

It's amazing ... tested it and worked perfectly ... Just wondering if you can make a config for passing a single value or table of values ...it would be great

Pedro Abreu

Pedro Abreu   ·   9 years ago

@Basaita Omar, open an issue on Github and explain that. Can't understand what would be the functionality/use case for that

Pedro Abreu

Pedro Abreu   ·   9 years ago

@pawan jain, submit a PR on github. It's easier that way, so I can test it out

dev null

dev null   ·   8 years ago

Im new to ionic/angular and tried implementing this plugin. Everything works great except now im trying to figure out how to dynamically insert a URL into the $scope.items = [] array. Im using "$http.get" to hit a php file and get back a json object. Im stuck trying to figure how how to insert the data i get from this json object into the 'src' and 'sub' properties. Thanks.

Pedro Abreu

Pedro Abreu   ·   8 years ago

Try using the latest version that's on github. That one I'm sure it's prepared to update the items and refresh the view. It would actually be a cool feature here if it could grab the latest version on github

Kiran

Kiran   ·   8 years ago

Great plugin. Can we do lazy image loading with this plugin ?

pawan jain

pawan jain   ·   8 years ago

Ability to pan across a zoomed image by a single finger swipe instead of two Hello Pedro. Thanks for sharing this awesome plugin, it was a lot helpful to us. Just a small correction - if it can be done: After zooming an image using pinch or double tap, if we use a single finder swipe then the slider image changes instead of panning the zoomed image. For panning across the zoomed image, two finger swipe is required. Can you/anyone provide a quick fix/workaround to PAN across a zoomed image using a single finger swipe? Thanks.

Nithin Krishnan

Nithin Krishnan   ·   8 years ago

hello Pedro, thatnks for this awesome feature you developed. Wished to know if we this feature already has pinch zoom in it? Found the code in library but the images don't zoom in android and ios, especially in the modal having the close button, is there anything that we need to implement for it?

andrew

andrew   ·   8 years ago

awesome! , though I really want to change this blackbackground , where to change color , or transparency will be better, I just hit https://market.ionic.io/plugins/ionicdatepicker and if we see very first screenshot, the way calendar is popping and background goes blur, I really love this effect.

Jodie

Jodie   ·   8 years ago

Great! Bookmarked!

bala guru

bala guru   ·   8 years ago

Great work! awesome!! How to get the image link in the popup. I would like to add Share option in image popup

Vitor Pereira

Vitor Pereira   ·   8 years ago

Good job, thanks

Dario

Dario   ·   8 years ago

Hi Pedro, thanks for this awesome plugin. I would make another button under the close button, how could i do? can you help me pls? thanks

RonRun

RonRun   ·   8 years ago

Hello, Don't you think that a ng-repeat for each row is to excessive ? There is a trick to avoid that with $index

zhoudd

zhoudd   ·   8 years ago

mark!thinks

Filipe Freire

Filipe Freire   ·   8 years ago

Do you have this for ionic2? Ore how can i use it with ionic2?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Low Pei Wen

Low Pei Wen   ·   8 years ago

This demo does not include the Add and Remove function?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

vicky

vicky   ·   7 years ago

This is really good plugin but how we can change the position of DONE/CLOSE Button

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Vincent Crepin

Vincent Crepin   ·   7 years ago

Has some experience the fact that the rendering of the gallery is VERY slow with 5-6 pictures ?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Arjun G N

Arjun G N   ·   7 years ago

Hi! is it only bower or there exists a version on npm...

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Samuel Perfidio

Samuel Perfidio   ·   7 years ago

We are from Brazil and we develop Apps I would like to offer your tool to our customers How could we work together? The idea would be to include your plugin within our apps We are more than 485 developers and we work with an open source platform Http://developer.siberiancms.com/ Is it possible to integrate? Your plugins can be offered in our marketplace https://extensions.siberiancms.com/downloads/category/siberian-plugins-commercial-editions/mae-pe-modules/ []s Samuel

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Jigar

Jigar   ·   7 years ago

Does this provide video gallery too ??

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Kwun Yeung

Kwun Yeung   ·   7 years ago

Very nice plugin! Thank you!

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

John

John   ·   7 years ago

When I click the iamge, it doesnt get the css, any help?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

John

John   ·   7 years ago

When I click the iamge, it doesnt get the css, any help?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Kwun Yeung

Kwun Yeung   ·   7 years ago

Very nice plugin! Thank you!

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Jigar

Jigar   ·   7 years ago

Does this provide video gallery too ??

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Samuel Perfidio

Samuel Perfidio   ·   7 years ago

We are from Brazil and we develop Apps I would like to offer your tool to our customers How could we work together? The idea would be to include your plugin within our apps We are more than 485 developers and we work with an open source platform Http://developer.siberiancms.com/ Is it possible to integrate? Your plugins can be offered in our marketplace https://extensions.siberiancms.com/downloads/category/siberian-plugins-commercial-editions/mae-pe-modules/ []s Samuel

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Arjun G N

Arjun G N   ·   7 years ago

Hi! is it only bower or there exists a version on npm...

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Vincent Crepin

Vincent Crepin   ·   7 years ago

Has some experience the fact that the rendering of the gallery is VERY slow with 5-6 pictures ?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

vicky

vicky   ·   7 years ago

This is really good plugin but how we can change the position of DONE/CLOSE Button

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Low Pei Wen

Low Pei Wen   ·   8 years ago

This demo does not include the Add and Remove function?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Filipe Freire

Filipe Freire   ·   8 years ago

Do you have this for ionic2? Ore how can i use it with ionic2?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

zhoudd

zhoudd   ·   8 years ago

mark!thinks

RonRun

RonRun   ·   8 years ago

Hello, Don't you think that a ng-repeat for each row is to excessive ? There is a trick to avoid that with $index

Dario

Dario   ·   8 years ago

Hi Pedro, thanks for this awesome plugin. I would make another button under the close button, how could i do? can you help me pls? thanks

Vitor Pereira

Vitor Pereira   ·   8 years ago

Good job, thanks

Pedro Abreu

Pedro Abreu   ·   9 years ago

Hi Pawan, I was thinking about that the other day and it seems to me that the best option would be to break it down to two different plugins, one for the gallery and the other for the slider. I'll have a look at this soon.

Jodie

Jodie   ·   8 years ago

Great! Bookmarked!

andrew

andrew   ·   8 years ago

awesome! , though I really want to change this blackbackground , where to change color , or transparency will be better, I just hit https://market.ionic.io/plugins/ionicdatepicker and if we see very first screenshot, the way calendar is popping and background goes blur, I really love this effect.

Nithin Krishnan

Nithin Krishnan   ·   8 years ago

hello Pedro, thatnks for this awesome feature you developed. Wished to know if we this feature already has pinch zoom in it? Found the code in library but the images don't zoom in android and ios, especially in the modal having the close button, is there anything that we need to implement for it?

pawan jain

pawan jain   ·   8 years ago

Ability to pan across a zoomed image by a single finger swipe instead of two Hello Pedro. Thanks for sharing this awesome plugin, it was a lot helpful to us. Just a small correction - if it can be done: After zooming an image using pinch or double tap, if we use a single finder swipe then the slider image changes instead of panning the zoomed image. For panning across the zoomed image, two finger swipe is required. Can you/anyone provide a quick fix/workaround to PAN across a zoomed image using a single finger swipe? Thanks.

Kiran

Kiran   ·   8 years ago

Great plugin. Can we do lazy image loading with this plugin ?

Pedro Abreu

Pedro Abreu   ·   8 years ago

Try using the latest version that's on github. That one I'm sure it's prepared to update the items and refresh the view. It would actually be a cool feature here if it could grab the latest version on github

dev null

dev null   ·   8 years ago

Im new to ionic/angular and tried implementing this plugin. Everything works great except now im trying to figure out how to dynamically insert a URL into the $scope.items = [] array. Im using "$http.get" to hit a php file and get back a json object. Im stuck trying to figure how how to insert the data i get from this json object into the 'src' and 'sub' properties. Thanks.

Pedro Abreu

Pedro Abreu   ·   9 years ago

@pawan jain, submit a PR on github. It's easier that way, so I can test it out

Pedro Abreu

Pedro Abreu   ·   9 years ago

@Basaita Omar, open an issue on Github and explain that. Can't understand what would be the functionality/use case for that

Basaita Omar

Basaita Omar   ·   9 years ago

It's amazing ... tested it and worked perfectly ... Just wondering if you can make a config for passing a single value or table of values ...it would be great

pawan jain

pawan jain   ·   9 years ago

Hello Pedro, We managed to use the slider code from your plugin into our app. Thanks. There is a CORRECTION in "slider.js". In the "$scope.slideChanged" method on line number 111 the statement is "if( currentImage > galleryLength )". It should be "if( currentImage >= galleryLength )". Otherwise one of the images in the slider gets duplicated and repeats.

pawan jain

pawan jain   ·   9 years ago

Hello Pedro, Thanks for considering this. It would be great for us if you can publish this plugin at the earliest. I was going through the plugin's code in "gallery.html" and have this question that how are you able to access and call the "showImage()" function of the ion-slider directive's controller from inside of the ion-gallery directive's code? : <div class="gallery-view"> <div class="row" ng-repeat="item in items track by $index" ion-row-height> <div ng-repeat="photo in item track by $index" class="col col-{{responsiveGrid}} image-container"> <img ion-image-scale ng-src="{{photo.src}}" ng-click="showImage({{$parent.$index}},{{$index}})"> </div> </div> <div ion-slider></div> </div>

pawan jain

pawan jain   ·   9 years ago

Hello Pedro, Your Gallery plugin saved my day. Can you please add an option to directly launch the image slider without opening the Gallery image grid? Or if possible, can you please publish the image slider with all of the zoom/pan functions as a separate plugin? Thanks.

bala guru

bala guru   ·   8 years ago

Great work! awesome!! How to get the image link in the popup. I would like to add Share option in image popup

Hey there! You'll need to log in before you can leave a rating here.

Noodlio   ·     ·   9 years ago

Really nice!

pawan jain   ·     ·   9 years ago

Thanks.

Rui Patricio   ·     ·   9 years ago

Show. Obrigado.

teddy   ·     ·   9 years ago

Thanks

Basaita Omar   ·     ·   9 years ago

Thanks for sharing

yinka   ·     ·   8 years ago

great plugin

Nicola Di Giorgio   ·     ·   8 years ago

Awesome!

Kiran   ·     ·   8 years ago

Great !

Nithin Krishnan   ·     ·   8 years ago

It's a real good plugin ... thanks for creating this nice piece of art... :)

Nithin Krishnan   ·     ·   8 years ago

Real good Plugin, thanks for this nice piece of work... :)

Kannugo Prithvi   ·     ·   8 years ago

Working perfectly as expected, 5 star rating

Michael Khalili   ·     ·   8 years ago

Works very well and the developer was really helpful with my unconventional code requirements in how I implemented the gallery. Thanks!

wei chien   ·     ·   8 years ago

.

Fire crow   ·     ·   8 years ago

this plugin is perfect !

Aurélien Wolz   ·     ·   8 years ago

Really nice, good work !

Hüseyin temizyürek   ·     ·   7 years ago

Great plugin !

  ·     ·   just now

{{ rating.comment }}

  ·     ·   just now

{{ rating.comment }}

Hüseyin temizyürek    ·     ·   7 years ago

Great plugin !

Aurélien Wolz    ·     ·   8 years ago

Really nice, good work !

Fire crow    ·     ·   8 years ago

this plugin is perfect !

wei chien    ·     ·   8 years ago

.

Michael Khalili    ·     ·   8 years ago

Works very well and the developer was really helpful with my unconventional code requirements in how I implemented the gallery. Thanks!

Kannugo Prithvi    ·     ·   8 years ago

Working perfectly as expected, 5 star rating

Nithin Krishnan    ·     ·   8 years ago

Real good Plugin, thanks for this nice piece of work... :)

pawan jain    ·     ·   9 years ago

Thanks.

Kiran    ·     ·   8 years ago

Great !

Nicola Di Giorgio    ·     ·   8 years ago

Awesome!

yinka    ·     ·   8 years ago

great plugin

Basaita Omar    ·     ·   9 years ago

Thanks for sharing

teddy    ·     ·   9 years ago

Thanks

Rui Patricio    ·     ·   9 years ago

Show. Obrigado.

Noodlio    ·     ·   9 years ago

Really nice!

Nithin Krishnan    ·     ·   8 years ago

It's a real good plugin ... thanks for creating this nice piece of art... :)