Giter Club home page Giter Club logo

colliegallery's Introduction

CollieGallery

Version License Platform

CollieGallery is a fullscreen image gallery with support for local and remote images and it has a lot of built-in features like zooming, panning, interactive transitions and more! The gallery is highly customizable and it’s really easy to make it look and work the way you want.

Interactive Transition Paging Zoom

Installation

CollieGallery is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod "CollieGallery"

Usage

CollieGallery is really easy to use! You just need to follow these steps:

  1. Import the CollieGallery module:

    import CollieGallery
  2. Create an array to hold the pictures:

    var pictures = [CollieGalleryPicture]()
  3. Add all the pictures that should be displayed in the gallery to the array. You can create a picture object from an UIImage or from a String representing the remote image url:

    • Creating from an UIImage:

       let image = UIImage(named: "example")!
       
       let picture = CollieGalleryPicture(image: image)
       pictures.append(picture)
       
       let pictureWithCaption = CollieGalleryPicture(image: image, title: "Collie Picuture", caption: "Picture with caption"))
       pictures.append(pictureWithCaption)
    • Creating from a remote url:

       let url = "http://example.com/picture.jpg"
       let picture = CollieGalleryPicture(url: url)
       pictures.append(picture)
  4. Create a gallery with the pictures:

    let gallery = CollieGallery(pictures: pictures)
  5. Show the gallery in the current view controller:

    gallery.presentInViewController(self)
  6. You can also scroll to the desired page by index:

    gallery.scrollToIndex(5)

Delegate Functions

  • CollieGalleryDelegate:
optional func gallery(gallery: CollieGallery, indexChangedTo index: Int)

Customization

Options

The available options for customization are:

  • parallaxFactor: The amount of the parallax effect from 0 to 1.
  • enableZoom: Indicates weather the pictures can be zoomed or not.
  • maximumZoomScale: The maximum scale that images can reach when zoomed.
  • showProgress: Indicates weather the progress should be displayed or not.
  • preLoadedImages: The amount of pictures that should be preloaded next to the current displayed picture.
  • gapBetweenPages: The space between each scrollview's page.
  • enableSave: Indicates if the user should be able to save the picture.
  • enableInteractiveDismiss: Indicates if the user should be able to dismiss the gallery interactively with a pan gesture.
  • customActions: Array with your custom actions that will be displayed in the actions dialog.
  • excludedActions: Array with the system actions that should not be displayed in the actions dialog.

To change the way CollieGallery works you should use the CollieGalleryOptions class. You can change the options in two ways:

  1. Use the sharedOptions object. All the changes made in the sharedOptions will affect all new instances of the gallery. For example, if you set the enableZoom property to false, all new instances will have the picture zoom disabled:

    CollieGalleryOptions.sharedOptions.enableZoom = false
  2. Create a new CollieGalleryOptions object, customize it and pass as the second parameter in the CollieGallery initializer:

    let options = CollieGalleryOptions()
    options.enableZoom = false
    
    let gallery = CollieGallery(pictures: pictures, options: options)

Appearance

The available options for appearance customization are:

  • backgroundColor: The background color of the gallery.
  • progressBarColor: The color of current progress in the progress bar.
  • activityIndicatorColor: The color of the activity indicator.
  • closeButtonColor: The color of the close button icon.
  • actionButtonColor: The color of the action button icon.

To change the way CollieGallery looks you should use the CollieGalleryAppearance class. You can change the gallery appearance in two ways:

  1. Use the sharedAppearance object. All the changes made in the sharedAppearance will affect all new instances of the gallery. For example, if you set the backgroundColor property to blue, all new instances will have a blue background:

    CollieGalleryAppearance.sharedAppearance.backgroundColor = UIColor.blueColor()
  2. Use the CollieGalleryTheme class. You can use one of the pre-defined themes or you create your theme and pass it as the third parameter in the CollieGallery initializer:

    • Pre-defined themes:

       let gallery = CollieGallery(pictures: pictures, options: nil, theme: CollieGalleryTheme.Dark)
    • Custom theme:

       let appearance = CollieGalleryAppearance()
       appearance.backgroundColor = UIColor.blueColor()
       
       let theme = CollieGalleryTheme(appearance: appearance)
       
       let gallery = CollieGallery(pictures: pictures, options: nil, theme: theme)

Transitions

To change the transition that is used to present and dismiss the gallery you should use the CollieGalleryTransitionType class. You can pass one of the available transition types as the second parameter of the presentInViewController function:

gallery.presentInViewController(self, CollieGalleryTransitionType.Default)

Zoom Transition

Interactive Transition

To use the zoom transition you need to folow these steps:

  1. Indicate that your view controller will implement the CollieGalleryZoomTransitionDelegate:

    class ViewController: UIViewController, CollieGalleryZoomTransitionDelegate {
  2. Implement the CollieGalleryZoomTransitionDelegate methods:

    • Indicate the bounds where the image could be dismissed with the zoom effect:

       func zoomTransitionContainerBounds() -> CGRect {
       	return self.view.frame
       }
    • Indicate to which view the picture will be zoomed out when dismissed:

       func zoomTransitionViewToDismissForIndex(index: Int) -> UIView?
       	return self.imageViews[index]
       }
  3. Present the gallery indicating from which view the gallery will be zoomed in and passing the view controller as delegate:

    let zoomTransition = CollieGalleryTransitionType.Zoom(fromView: aView, zoomTransitionDelegate: self)
    gallery.presentInViewController(self, transitionType: zoomTransition)

Custom Actions

Custom Action

To create your own actions just follow the next example:

let options = CollieGalleryOptions()

let customAction = CollieGalleryCustomAction(title: "Custom Action", imageName: "imageName") { () -> () in
    print("Custom Action Tapped!")
}

options.customActions = [customAction]

let gallery = CollieGallery(pictures: pictures, options: options)

Excluded Actions

To remove default actions from the dialog just follow the next example:

let options = CollieGalleryOptions()
        
let customAction = CollieGalleryCustomAction(title: "Custom Action", imageName: "settings") { () -> () in
    print("Custom Action Tapped!")
}

options.excludedActions = [UIActivityTypeAssignToContact, UIActivityTypeCopyToPasteboard, UIActivityTypePrint]

let gallery = CollieGallery(pictures: pictures, options: options)

Requirements

  • iOS 8.0

Changelog

See CHANGELOG.md.

Author

Guilherme Munhoz, [email protected]

License

CollieGallery is available under the MIT license. See the LICENSE file for more info.

colliegallery's People

Contributors

alexfedosov avatar balitax avatar freeskys avatar gmunhoz avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

colliegallery's Issues

Scroll to Index not working

When calling scrollToIndex() after presentInViewController(_:), always the first image will appear. When calling scrollToIndex() before presentInViewController(_:).

Double tap to zoom currently zooms to scrollView's max zoom scale.

Can double tap to zoom an image zoom scale be less than scrollview's max zoom scale. On pinching zoom of image let the scroll view zoom to its max scale. For example:
Lets say,
scrollView's max zoom scale = 4

On double tap, scrollView zooms to 3
On pinch to zoom, scrollView zooms to its max zoom scale.

Share feature

Feature request:
Would be cool if you can add share option. You can have into a corner a share icon and when you tap on it, to show default iOS share menu. As I know, in iOS share menu you also could have save image option.

Thank you !

Support Swift 4.2

Hi! Really good stuff with this library, I really like it. I was wondering if you're planning to support Swift 4.2, the conversion should be pretty straightforward with the automatic converter in Xcode.

action button doesn't work

When I hit action button with

let options = CollieGalleryOptions()

options.enableSave = true;

let gallery = CollieGallery(pictures: pictures, options: options)

gallery.presentInViewController(self)

*** Terminating app due to uncaught exception 'NSGenericException', reason: 'Your application has presented a UIAlertController (<UIAlertController: 0x7cac9e00>) of style UIAlertControllerStyleActionSheet. The modalPresentationStyle of a UIAlertController with this style is UIModalPresentationPopover. You must provide location information for this popover through the alert controller's popoverPresentationController. You must provide either a sourceView and sourceRect or a barButtonItem. If this information is not known when you present the alert controller, you may provide it in the UIPopoverPresentationControllerDelegate method -prepareForPopoverPresentation.'

Crash after rotation and fix

Steps to reproduce:

  • Open example app
  • Tap on bottom picture, gallery will open
  • Rotate the device and boom

Here is a screenshot:
screen shot 2016-05-05 at 17 02 34

The problem:
You have an implicitly unwrapped variable private var alertController: UIAlertController! that is instantiated only in showActionsMenu function which has not been called yet.

The fix:
Put ? after self.alertController
self.alertController?.popoverPresentationController?.sourceView = self.view self.alertController?.popoverPresentationController?.sourceRect = popOverPresentationRect

scripting additional options on details view

Hi

I'm just wondering if there is any way to hook up own functions / views over detailed views of image. I mean - let's say that I would like to add own icons next to "x" and "..." icons, or just display some meta data when tap on image ?

If there is any "easy" way to do it ?

bdw: great project, works like a charm !

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.