thiagoperes/idmphotobrowser

Photo Browser / Viewer inspired by Facebook's and Tweetbot's with ARC support, swipe-to-dismiss, image progress and more

IDMPhotoBrowser

IDMPhotoBrowser is a new implementation based on MWPhotoBrowser.

We've added both user experience and technical features inspired by Facebook's and Tweetbot's photo browsers.

New features:

• Uses ARC
• Uses SDWebImage for image loading
• Image progress shown
• Minimalistic Facebook-like interface, swipe up/down to dismiss
• Ability to add custom actions on the action sheet

Features

• Can display one or more images by providing either UIImage objects, file paths to images on the device, or URLs to images online
• Handles the downloading and caching of photos from the web seamlessly
• Photos can be zoomed and panned, and optional captions can be displayed

Screenshots

Usage

See the code snippet below for an example of how to implement the photo browser.

First create a photos array containing IDMPhoto objects:

// URLs array
NSArray *photosURL = @[[NSURL URLWithString:@"http://farm4.static.flickr.com/3567/3523321514_371d9ac42f_b.jpg"], 
[NSURL URLWithString:@"http://farm4.static.flickr.com/3629/3339128908_7aecabc34b_b.jpg"], 
[NSURL URLWithString:@"http://farm4.static.flickr.com/3364/3338617424_7ff836d55f_b.jpg"], 
[NSURL URLWithString:@"http://farm4.static.flickr.com/3590/3329114220_5fbc5bc92b_b.jpg"]];
    
// Create an array to store IDMPhoto objects
NSMutableArray *photos = [NSMutableArray new];

for (NSURL *url in photosURL) {
	IDMPhoto *photo = [IDMPhoto photoWithURL:url];
	[photos addObject:photo];
}
	
// Or use this constructor to receive an NSArray of IDMPhoto objects from your NSURL objects
NSArray *photos = [IDMPhoto photosWithURLs:photosURL];

There are two main ways to presente the photoBrowser, with a fade on screen or with a zooming effect from an existing view.

Using a simple fade transition:

IDMPhotoBrowser *browser = [[IDMPhotoBrowser alloc] initWithPhotos:photos];

Zooming effect from a view:

IDMPhotoBrowser *browser = [[IDMPhotoBrowser alloc] initWithPhotos:photos animatedFromView:sender];

When using this animation you can set the scaleImage property, in case the image from the view is not the same as the one that will be shown on the browser, so it will dynamically scale it:

browser.scaleImage = buttonSender.currentImage;

Presenting using a modal view controller:

[self presentViewController:browser animated:YES completion:nil];

Customization

Toolbar

You can customize the toolbar. There are three boolean properties you can set: displayActionButton (default is YES), displayArrowButton (default is YES) and displayCounterLabel (default is NO). If you dont want the toolbar at all, you can set displayToolbar = NO.

Toolbar setup example:

browser.displayActionButton = NO;
browser.displayArrowButton = YES;
browser.displayCounterLabel = YES;

It is possible to use your own image on the toolbar arrows:

browser.leftArrowImage = [UIImage imageNamed:@"IDMPhotoBrowser_customArrowLeft.png"];
browser.rightArrowImage = [UIImage imageNamed:@"IDMPhotoBrowser_customArrowRight.png"];
browser.leftArrowSelectedImage = [UIImage imageNamed:@"IDMPhotoBrowser_customArrowLeftSelected.png"];
browser.rightArrowSelectedImage = [UIImage imageNamed:@"IDMPhotoBrowser_customArrowRightSelected.png"];

If you want to use custom actions, set the actionButtonTitles array with the titles for the actionSheet. Then, implement the photoBrowser:didDismissActionSheetWithButtonIndex:photoIndex: method, from the IDMPhotoBrowser delegate

browser.actionButtonTitles = @[@"Option 1", @"Option 2", @"Option 3", @"Option 4"];

Others

Others customizations you can make are: use white background color, don't display the done button and change the done button background image:

browser.useWhiteBackgroundColor = YES;
browser.displayDoneButton = NO;
browser.doneButtonImage = [UIImage imageNamed:@"IDMPhotoBrowser_customDoneButton.png"];

If you want to keep the interface shown when the user is scrolling :

browser.autoHideInterface = NO;

You can use a smooth pop animation when presenting and dismissing a photo:

browser.usePopAnimation = YES;

If the presenting view controller doesn't have a status bar, in some cases you can force it to be hidden:

browser.forceHideStatusBar = YES;

It's possible to disable the vertical dismiss swipe gesture:

browser.disableVerticalSwipe = YES;

Dismiss the photo browser with a touch (instead of showing/hiding controls):

browser.dismissOnTouch = YES;

Photo Captions

Photo captions can be displayed simply by setting the caption property on specific photos:

IDMPhoto *photo = [IDMPhoto photoWithFilePath:[[NSBundle mainBundle] pathForResource:@"photo2l" ofType:@"jpg"]];
photo.caption = @"Campervan";

No caption will be displayed if the caption property is not set.

Custom Captions

By default, the caption is a simple black transparent view with a label displaying the photo's caption in white. If you want to implement your own caption view, follow these steps:

1. Optionally use a subclass of IDMPhoto for your photos so you can store more data than a simple caption string.
2. Subclass IDMCaptionView and override -setupCaption and -sizeThatFits: (and any other UIView methods you see fit) to layout your own view and set it's size. More information on this can be found in IDMCaptionView.h
3. Implement the -photoBrowser:captionViewForPhotoAtIndex: IDMPhotoBrowser delegate method (shown below).

Example delegate method for custom caption view:

- (IDMCaptionView *)photoBrowser:(IDMPhotoBrowser *)photoBrowser captionViewForPhotoAtIndex:(NSUInteger)index {
	IDMPhoto *photo = [self.photos objectAtIndex:index];
	MyIDMCaptionViewSubclass *captionView = [[MyIDMCaptionViewSubclass alloc] initWithPhoto:photo];
	return captionView;
}

Adding to your project

Using CocoaPods

Just add pod 'IDMPhotoBrowser' to your Podfile.

Including Source Directly Into Your Project

Opensource libraries used

• SDWebImage
• DACircularProgress
• pop

Licence

This project uses MIT License.

idmphotobrowser's Issues

Update cocapods tag

The cocoapods file should always be updated to the latest release tag.

Orientation of root view

I've added to demo project(menu.m):

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return YES;
}

When I open photo and turn the device, it only changes the orientation of the IDMPhotoBrowser interface. The root view does not change orientation. How can I fix it(for example, your demo project)?

Deprecated warning when iOS Deployment Target is iOS 7.0

Support for AFNetworking 2.0

Hi, I'm using newest AFNetworking 2.0 in my iOS 7 project, and I would also like to use IDMPhotoBrowser, since I've got great experience with it. Unfortunately I can't - cocoapods says that it needs AFNetworking 1.3.1. Can I do something about it, or it needs to be fixed and updated?

CGContextSetFillColorWithColor error

Swipe up/down to dismiss

Hi! Is there a way to disable the swipe up/down to dismiss the photo browser? I checked the header file but didn't come across any property or anything.

Grid of thumbnails?

Hello,
I love your work, just a feature request, do you plan to implement the grid of thumbnails (just like in MWPhotoBrowser)?
Thanks

Is there a way to remove a photo from the current visible gallery?

i want to be able to delete a photo from the current visible gallery. a second approach could be dismissing the gallery manually and delete then the photo from the datasource array provided for the gallery initialization.

are any of these features somehow feasible?

regards

markus

iOS 7 status bar hiding/showing jumpy

If you look at the demo project on iOS 7, when you click on a photo, in the second while the photo is animating to be presented, you can see the status bar disappear and the navigation bar and the entire contents of the view visibly shift upwards (not animated or sliding, but abruptly jumps) by the size of the status bar.

After dismissing the photo browser, you can also see the status bar appearing, sliding everything down, although this seems to be in some kind of animation.

Is there a way to get rid of this shifting?

Supporting SDWebImage

Would this project be open to supporting SDWebImage as the image cache and download engine, in addition to AFNetworking? Essentially, you could support both by breaking the URL loading and caching code into a category of IDMPhoto. Then, use cocoapods subspecs to allow developers to choose between SDWebImage and AFNetworking when installing the IDMPhotoBrowser pod. In fact, this strategy could be extended Here's what it would look like:

Install with AFNetworking:
pod 'IDMPhotoBrowser/Core'
pod 'IDMPhotoBrowser/AFNetworking ' # This adds IDMPhoto+AFNetworking

OR

Install with SDWebImage:
pod 'IDMPhotoBrowser/Core'
pod 'IDMPhotoBrowser/SDWebImage' # This adds IDMPhoto+SDWebImage

Both categories on IDMPhoto would have the same networking methods (+ (IDMPhoto *)photoWithURL:(NSURL *)url;), just different implementations.

Use NSInteger instead of int (in scrollViewDidScroll)

Keep zoom on Rotation?

Is there a way to keep the zoom on rotation?
Also is there a way to change the animation effect when rotating?

Thank you

quick fix for a warning when dismissing the modal view.

Hello.
First of all thanks for the great library. Excellent work.

in the - (void)doneButtonPressed:(id)sender method
you call performCloseAnimationWithScrollView
which on the animation completion handler it calls the same method, doneButtonPressed, again with a nil sender.

this causes the following warning:
Warning: Attempt to dismiss from view controller <UINavigationController: ......> while a presentation or dismiss is in progress!

in order to fix this you can add this:
if ([self isBeingDismissed]) {
return;
}

on top of the - (void)doneButtonPressed:(id)sender method
before anything else. this way it will not try to dismiss the controller a second time.

if someone has a better solution for this please let us know

thanks

Problem with iOS 7 presenting the the browser through navigation controller

Using the browser in iOS 7 and presenting it through navigation controller causes the first image to appear clipped to the top region. Also the image can be scrolled to top and bottom.

But flipping to the next image removes the problem, How ever the images can be scrolled in all directions, can it get fiexed. Please concentrate on iOS 7 coz i need to update my app.

rotation problem with uitabbar control

hi,
i know that your are working for iOS7 support.
when do u deal with rotation, consider that there is a bug if you use IDM with UITabBarController.
here is the bug:
-all the tabs runs just in Portrait mode. (shouldautorotate=NO)
-open the IDM photo browser as Modal.
-rotate to landscape.
-close the IDM
-you will see that Status bar is still LandscapeMode.
-then if you open MoviePlayerController, it runs in landscape mode. after closing the movie player (status bar's old value is Landspace), it automatically rotates the tab bar to landscape.
-As 'shouldautorotate' is NO , its impossible to rotate to portrait.

thanks…

Display Gif image

Dear team, i have a problem with Gif image, when i use
NSArray *photos = [IDMPhoto photosWithURLs:imageArr];
imageArr include GIF image link , but when IDMPhoto show , image gif display only 1 frame. How i do to fix this?
Many thanks!

compile failed when set iOS Deployment Target to 6.0

rt, could you please use the AFNetworking 1.x ?
cause many app want to deploy to 6.0

Linker Error _OBJC_CLASS_$IDMPhoto and IDMPhotoBrowser

Hey man,

Im probably doing something wrong here, but I'm getting 3 Linker errors on my project.
I imported all the classes to my project and tried to make a simple displayer, made the

import "IDMPhotoBrowser.h" and wrote the code.

Ill attach some images that might help you in helping me :)
Thanks very much.

Use NSInteger instead of int (in titlePages)

Scrolling is not completed on large values of the index of the array pictures

Hi,
When I did try use IDWPhotoBrowser on the big array of the pictures, I find the problem with scrolling picture.
On iPad or iPad-simulator scroll don’t completed.
You can see this effect on scroll pictures with array more 20000 pictures and index more 18000.
This is the sample code in the file «menu.m» for view this effect scrolling:

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    // Create an array to store IDMPhoto objects
    NSMutableArray *photos = [NSMutableArray new];
    
    IDMPhoto *photo;
    
    if(indexPath.section == 0) // Local photo
    {
        photo = [IDMPhoto photoWithFilePath:[[NSBundle mainBundle] pathForResource:@"photo2l" ofType:@"jpg"]];
        photo.caption = @"The London Eye is a giant Ferris wheel situated on the banks of the River Thames, in London, England.";
        [photos addObject:photo];
    }
    else if(indexPath.section == 1) // Multiple photos
    {
        if(indexPath.row == 0) // Local Photos
        {
            photo = [IDMPhoto photoWithFilePath:[[NSBundle mainBundle] pathForResource:@"photo1l" ofType:@"jpg"]];
            photo.caption = @"Grotto of the Madonna";
            [photos addObject:photo];
           
            photo = [IDMPhoto photoWithFilePath:[[NSBundle mainBundle] pathForResource:@"photo2l" ofType:@"jpg"]];
            photo.caption = @"The London Eye is a giant Ferris wheel situated on the banks of the River Thames, in London, England.";
            [photos addObject:photo];
            
            photo = [IDMPhoto photoWithFilePath:[[NSBundle mainBundle] pathForResource:@"photo3l" ofType:@"jpg"]];
            photo.caption = @"York Floods";
            [photos addObject:photo];
            
            photo = [IDMPhoto photoWithFilePath:[[NSBundle mainBundle] pathForResource:@"photo4l" ofType:@"jpg"]];
            photo.caption = @"Campervan";
            [photos addObject:photo];
        }
        else if(indexPath.row == 1 || indexPath.row == 2) // Photos from Flickr or Flickr - Custom
        {
            for (int i=0; i < 25000; i++) {
                [photos addObject:[IDMPhoto photoWithURL:[NSURL URLWithString:@"http://farm4.static.flickr.com/3567/3523321514_371d9ac42f_b.jpg"]]];
            }
        }
    }
    
    // Create and setup browser
    IDMPhotoBrowser *browser = [[IDMPhotoBrowser alloc] initWithPhotos:photos];
    browser.delegate = self;

    [browser setInitialPageIndex:20000];

    if(indexPath.section == 1) // Multiple photos
    {
        if(indexPath.row == 1) // Photos from Flickr
        {
            browser.displayCounterLabel = YES;
            browser.displayActionButton = NO;
        }
        else if(indexPath.row == 2) // Photos from Flickr - Custom
        {
            browser.actionButtonTitles      = @[@"Option 1", @"Option 2", @"Option 3", @"Option 4"];
            browser.displayCounterLabel     = YES;
            browser.useWhiteBackgroundColor = YES;
            browser.leftArrowImage          = [UIImage imageNamed:@"IDMPhotoBrowser_customArrowLeft.png"];
            browser.rightArrowImage         = [UIImage imageNamed:@"IDMPhotoBrowser_customArrowRight.png"];
            browser.leftArrowSelectedImage  = [UIImage imageNamed:@"IDMPhotoBrowser_customArrowLeftSelected.png"];
            browser.rightArrowSelectedImage = [UIImage imageNamed:@"IDMPhotoBrowser_customArrowRightSelected.png"];
            browser.doneButtonImage         = [UIImage imageNamed:@"IDMPhotoBrowser_customDoneButton.png"];
            browser.view.tintColor          = [UIColor orangeColor];
            browser.progressTintColor       = [UIColor orangeColor];
            browser.trackTintColor          = [UIColor colorWithWhite:0.8 alpha:1];
        }
    }
    
    // Show
    [self presentViewController:browser animated:YES completion:nil];
    //[self.navigationController pushViewController:browser animated:YES];
    
    [self.tableView deselectRowAtIndexPath:indexPath animated:YES];
} 

swipe up/down to dismiss problem

I seems that when swipe up/down to dismiss the view controller it works fine for the first time, but it can not reveal the background view for the next time. I store the browser in a property for reuse.

Black background not fading on pull-away-gesture.

I found that I had to set:
UIViewController *rootViewController = [UIApplication sharedApplication].delegate.window.rootViewController;
rootViewController.modalPresentationStyle = UIModalPresentationCurrentContext;

to get the black background to fade away properly. Just a tip if anyone else has this problem. Solution found here: http://stackoverflow.com/questions/12736394/uimodalpresentationcurrentcontext-with-transition

Retain cycle

Hi,
Thanks for the excellent work.
I found a "retain cycle".
IDMZoomingScrollView -> IDMPhoto -> IDMProgressUpdateBlock -> IDMZoomingScrollView

- (void)configurePage:(IDMZoomingScrollView *)page forIndex:(NSUInteger)index {
    page.frame = [self frameForPageAtIndex:index];
    page.tag = PAGE_INDEX_TAG_OFFSET + index;
    page.photo = [self photoAtIndex:index];

    __block __weak IDMPhoto *photo = (IDMPhoto*)page.photo;
    photo.progressUpdateBlock = ^(CGFloat progress){
        [page setProgress:progress forPhoto:photo];
    };
}

Should use a '__weak' ref for page involved in the block above, or break the cycle in method unloadUnderlyingImage.

iOS6 Support

Has this been dropped? The podspec for 1.3.2 ˙as 7.0 as platform

memory leak

as I integrate it in my project, with large image (about 2500x1600). It doesn't release memory when I close it. How do I resolve this?

iOS 6 Compatibility

Would be really nice! Any chance? What are the reasons for making this framework available just for iOS 7+ ?

crash when user taps the done button without waiting for the whole image to download

Hello
i experienced a crash right when the user taps on a cell image, the modal opens and the progress is being shown to download an image from the web.
if you do not wait for the whole image to download and hit the DONE button the method performCloseAnimationWithScrollView crashes when setting the resizableImageView frame size, since the imageFromView is nil.

a solution would be an if statement like this:
if (imageFromView == nil) {
// in case the user taps the DONE button without
// waiting for the whole image to download
resizableImageView.frame = CGRectZero;
}
else{
.......

if you find any better solution please share.

thanks

"Done" button on landscape disappears

In my app when i rotate on landscape mode the done button changes his position( it's not on top-right but top centered ), and if i return on portrait it disappears. It's doesn't support landscape mode?

Format warning when compiling for iOS 64-bit

UIApplicationInvalidInterfaceOrientation

Nice control, thanks!

We show our browser like this:

IDMPhotoBrowser *browser = [[IDMPhotoBrowser alloc] initWithPhotos:photosArray];

[self presentViewController:browser animated:YES completion:nil];

But then when tapping done we get UIApplicationInvalidInterfaceOrientation.

*** Terminating app due to uncaught exception 'UIApplicationInvalidInterfaceOrientation', reason: 'preferredInterfaceOrientationForPresentation must return a supported interface orientation!'
*** First throw call stack:
(
    0   CoreFoundation                      0x0273a5e4 __exceptionPreprocess + 180
    1   libobjc.A.dylib                     0x024bd8b6 objc_exception_throw + 44
    2   CoreFoundation                      0x0273a3bb +[NSException raise:format:] + 139
    3   UIKit                               0x013535ac -[UIViewController _preferredInterfaceOrientationForPresentationInWindow:fromInterfaceOrientation:] + 580
    4   UIKit                               0x015d76e5 -[UIWindowController transition:fromViewController:toViewController:target:didEndSelector:animation:] + 2330

This is in iOS7. App setup to configure portrait and landscape. Any help appreciated.

Tobin

If this project support video browse as Photo App, it's very plus!

Do you consider to add video browse and play feature in the future release?

Insufficient memory

After a while of using module all the memory becomes clogged, and application crashes due to insufficient memory.

Question

I want to add a couple of buttons to the topNav (where done is) is that easily achieved ? I prefer not to use the action sheet.

Should use iOS native sharing options instead

IDMPhotoBrowserDelegate didDismissActionSheet... not called

if ([_delegate respondsToSelector:@selector(photoBrowser:didDismissActionSheetWithButtonIndex:)])...

should be replaced with

if ([_delegate respondsToSelector:@selector(photoBrowser:didDismissActionSheetWithButtonIndex:)])...

Wrong photo loaded when rotating last photo

You can simulate this error on de demo project.

1 - Choose "Photos form flick custom"
2 - Go to the last photo
3 - Rotate the device.

It shows the wrong photo.

It only happens on the last photo.

BTW thanks for this amazing control !

Incompatible with AFNetworking 2.2.2

../Pods/IDMPhotoBrowser/Classes/IDMPhoto.m:150:42: Incompatible block pointer types sending 'void (^)(NSUInteger, NSInteger, NSInteger)' to parameter of type 'void (^)(NSUInteger, long long, long long)'

Statusabar disappears after didDismissActionSheetWithButtonIndex

Statusabar disappears after a few seconds after didDismissActionSheetWithButtonIndex get called

Linker error on Xcode 5-DP5

When adding to fresh app via cocoapods, the build fails with the following output:

Undefined symbols for architecture i386:
"OBJC_CLASS$_MFMailComposeViewController", referenced from:
objc-class-ref in libPods.a(IDMPhotoBrowser.o)
ld: symbol(s) not found for architecture i386
clang: error: linker command failed with exit code 1 (use -v to see invocation)

Presentation animation not working on iOS 7

When presenting the photo browser on iOS 7, if you do not specify a view to animate from, there is no animation. The view controller appears without a transition.

MFMailComposeViewControllerDelegate possible unnecessary in IDMPhotoBrowser.h

Interface orientations ?

@appkraft What about interface orientations?

minor warning - undeclared selector

Hello
on IDMZoomingScrollView.m
method - (void)handleSingleTap:(CGPoint)touchPoint
its a warning about an undeclared selector 'toggleControls'

solution:
add the following line

• (void)toggleControls
  after line 18 in the IDMZoomingScrollView.m file
  inside the @interface IDMPhotoBrowser ()

nothing major. just wanted to let you know!
Keep up the excellent work

thanks

normal rotation support

please, make normal rotation support in your photo browser.
it seems that window does not have rotation support, but it is widely used in your project.

video link is not playing.

when i add video link its not playing. if there is no video playing option enable please add that option

Use cocoapods to manage dependencies in the demo project

Although fairly minor, it seems more sustainable to use cocoapods to manage the dependencies (AFNetworking, etc) in the demo project, right?

Both top and bottom Toolbars disappear

Both toolbars on the top and the bottom disappear if I swipe to go back and forth. if I use the arrows, it doesn't happen.

Is there a way to disable the automatically hiding of the toolbars when swiping?

Send image via e-mail crash ...

If device doesn't have an e-mail configured, the gallery will show possibility of e-mail send. And after 'Email' option tapped application crash. Before create ActionSheet you should check it.

Dissmiss completion block

Could you add some delegate/completion block when dismiss photo browser?

No currentPageIndex

NSInteger .currentPageIndex property would be nice to know for example when

• (void)photoBrowser:(IDMPhotoBrowser *)photoBrowser didDismissActionSheetWithButtonIndex:(NSUInteger)index; get's called, to know which page user has currently selected.