jaredsinclair / jtsimageviewcontroller

An interactive iOS image viewer that does it all: double tap to zoom, flick to dismiss, et cetera.

DO NOT USE. "I AM SUPER DUPER CEREAL, YOU GUYS."

This repository is no longer under active development. I think it's probably still safe to use on iOS 7 through 9, but your mileage may vary. I may someday do a thorough rewrite in Swift, taking into account newer API features, etc. ~ Jared

JTSImageViewController

An interactive iOS image viewer that does it all: double tap to zoom, flick to dismiss, et cetera.

Pull Requests

Pull requests are welcome, but should be submitted on the dev branch. Exceptions will be made for critical bug fixes.

What Does it Do?

JTSImageViewController is like a "light box" for iOS. It's similar to image viewers you may have seen in apps like Twitter, Tweetbot, and others. It presents an image in a full-screen interactive view. Users can pan and zoom, and use Tweetbot-style dynamic gestures to dismiss it with a fun flick.

Screenshot

How Does it Work?

Usage is pretty simple, though there are some cool options and delegate methods if you need them. Here's what your simplest implementation might look like:

- (void)someBigImageButtonTapped:(id)sender {
    
    // Create image info
    JTSImageInfo *imageInfo = [[JTSImageInfo alloc] init];
    imageInfo.image = YOUR_SOURCE_IMAGE;
    imageInfo.referenceRect = self.bigImageButton.frame;
    imageInfo.referenceView = self.bigImageButton.superview;
    
    // Setup view controller
    JTSImageViewController *imageViewer = [[JTSImageViewController alloc]
                                           initWithImageInfo:imageInfo
                                           mode:JTSImageViewControllerMode_Image
                                           backgroundStyle:JTSImageViewControllerBackgroundOption_Scaled];
    
    // Present the view controller.
    [imageViewer showFromViewController:self transition:JTSImageViewControllerTransition_FromOriginalPosition];
}

That's it.

Extras and Options

• Image Downloads: If you don't have the source image already, just use the imageURL property when setting up the JTSImageInfo instance. JTSImageViewController will handle downloading the image for you.

• Background Styles: Choose between a scaled-and-dimmed style or a scaled-dimmed-and-blurred background style. The latter is like the one used in Tweetbot.

• Alt-Text Mode: Need to show the alt text for an image? JTSImageViewController includes an alternate mode that shows a full-screen, centered text view using the same style as the image mode.

• Handle Long-Presses: Implement an interactionsDelegate to respond to long presses on the image, or to temporarily disable user interactions (comes in handy if you show an overlay that could cause gesture conflict).

License

MIT License, see the included file.

jtsimageviewcontroller's Issues

Need bunnify JTSImageViewController.m

Add actionView for having custom actions like retweeting, liking et cetera.

Hi, could you add a UIView actionView or Array<UIButton> actionButtons to JTSImageViewController. It could come in handy for downloading, mailing, retweeting, liking et cetera

Flickering on iOS 8

There is a flickering while presenting JTSImageViewController on iOS 8.

I'm using iOS 8 beta 5 on Xcode beta 6.

Animation bug / "Stuttering" with iPhone 6

Just downloaded the newest Xcode version with iPhone 6 simulators. I guess the new resolution messes up the snapshot or something like that.

Background flickers w/ iPhone 6 when clicking image

It looks like the size of cloned UIView gets shifted (the title moves down then flickers away).. Is it possible to just have a complete black overlay then have the image do the animation expand into its placeholder to avoid showing the existing UIView?

This is preventing me from using this tool in production.

Loading time delay

Takes long to show on an iPhone 4S around 2 seconds, which makes it appear unresponsive.

Blurring is very slow on older devices.

[image JTS_applyBlurWithRadius:3.0f tintColor:nil saturationDeltaFactor:1.0f maskImage:nil];

sometimes it cause more than one second.

Support to set the initial zoom scale

It would be nice to have the ability to specify an initial zoom scale, so that when the image is presented, it is centered using the provided input, instead of just assuming 1.0.

Flickering (zoom / dismiss conflict) + make fick to dismiss an option

On a real device, when I want to zoom the image, it flickers (actually really fast resizes/moves), whenever my zoom gesture is fast. I have to zoom very gently to prevent this. Once I manage to zoom it's ok, this issue appears for zoomLevel == 1 and fast gesture.

On simulator it happens if I firstly drag it with mouse, then press option, to begin zooming, when I firstly click option, than mouse, it's ok. So probably it recognizes the beginning of zooming as dragging.

Here's a gif:

(this is iOS 7.1 with JTS 1.3, although I did notice this issue a month ago, when I firstly tried to use it)
The example works fine, the problem is with presenting it from my tableViewCell.

I tried with different combinations of referenceRect/View and modifying code in library (messing with _flags and zoomLevel), but with no luck.

What I do is add a UITapGestureRecognizer to my UIImageView in a UITableViewCell. In tap handler I present JTS:

//Note: This happens in UITableViewCell subclass

-(void)awakeFromNib
{
self.photoImageView.userInteractionEnabled = YES;
    UITapGestureRecognizer *imageTapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTap:)];
    [self.photoImageView addGestureRecognizer:imageTapGesture];
}

-(void)handleTap:(UITapGestureRecognizer *)gesture
{
    CGPoint location = [gesture locationInView:[gesture.view superview]];
    if(!CGRectContainsPoint(self.photoImageView.frame, location))
        return;

    JTSImageInfo *imageInfo = [JTSImageInfo new];
    imageInfo.image = self.photoImageView.image;
    imageInfo.referenceRect = self.photoImageView.frame;
    imageInfo.referenceView = self.parentVC.view;

    JTSImageViewController *imageViewer = [[JTSImageViewController alloc] initWithImageInfo:imageInfo mode:JTSImageViewControllerMode_Image backgroundStyle:JTSImageViewControllerBackgroundStyle_ScaledDimmedBlurred];

    imageViewer.interactionsDelegate = self; //thought I could block flickering this way, but tapping also has been disabled
    imageViewer.dismissalDelegate = self;

    [imageViewer showFromViewController:self.parentVC transition:JTSImageViewControllerTransition_FromOffscreen]; //transition has no impact on this issue
}

Add accessibility delegate protocol.

Add accessibility delegate to provide strings for private view's VoiceOver needs.

Didn't find 1.5 on cocoapods.org?

JTSImageViewControllerBackgroundStyle_ScaledDimmed does not exist

in your demo project there is an error in the JTSViewController.m file
The JTSImageViewControllerBackgroundStyle_ScaledDimmed backgroundStyle does not exist in the JTSImageViewControllerBackgroundOptions NS_OPTIONS

Plus there is another occurence in JTSViewController.m line 159

thanks for the lib

Anyway to achieve tap and hold to enlarge function?

How can i possible achieve the photo enlarge on only when the tap is active, and is dismissed and gesture has ended.

Flicker on double tap to zoom in iOS 8

The image flicker when using duble tap to zoom on iOS 8. Can be reproduced in the sample project.

Image Doesn't appear from screen bounds / Unresponsive Zoom

When I try to launch the image viewer, it zooms from outside of the screen into place. Also, whenever I interact with the image, it is extremely finicky and won't retain zoom position until a bunch of attempts are made. Attached a video of the issue. https://www.dropbox.com/s/c3thknvpagzk5nf/IMG_0044.MOV?dl=0

JTSImageInfo *imageInfo = [[JTSImageInfo alloc] init];
imageInfo.imageURL = url;
//            imageInfo.referenceRect = vcToShowFrom.view.bounds;
//            imageInfo.referenceView = vcToShowFrom.view.superview;

JTSImageViewController *imageViewer = [[JTSImageViewController alloc]
                                               initWithImageInfo:imageInfo
                                               mode:JTSImageViewControllerMode_Image
                                               backgroundStyle:JTSImageViewControllerBackgroundOption_None];

[imageViewer showFromViewController:vcToShowFrom transition:JTSImageViewControllerTransition_FromOriginalPosition];

Add referenceCornerRadius to JTSImageInfo?

Would this even be possible? To get a smooth transition from UIImageViews that have a layer.cornerRadius set.

without CocoaPods

any idea for installation without cocoa pods in Xcode 6

Add portrait upside down support.

Issue if imageview frame is different upon dismissal

This is more of a comment on functionality, but if the frame of the source imageView is in a different place upon dismissal than it was upon presentation (i.e. if presented when containing scrollview is pulled down, and has returned to normal position by dismissal), there are some choppy animation issues. A possible enhancement would be to give the ability to specify imageInfo for the imageView state upon dismissal as well as upon presentation.

there is a serious bug in this code. show someone GIF images will crash ,there some info about this problem

gif url: http://www.233.com/NewsFiles/2015-3/11/111/111.gif

I hope you can solve this problem as soon as possible，thank you very much.

Pinch image working bad

If I increase the image pinch, the image is enlarged. If release the image, the image is reduced.
Help me please

Support rotation

It has an error In Swift project

sorry to bother u,it's a simple error
@import UIKit;,then the 'JTSImageInfo.h' file will get the same error too,just @import UIKit;in the 'JTSImageInfo.h' will solve this error.

Swift compatibility

How is the compatibility to use this library in a Swift project?

Pod update

Any chance you could release a new pod with the latest changes on master?
Much appreciated man!

Leak with imageRef

Class JTSAnimatedGIFUtility
At line 110 it creates an CGImageRef but is never released after being used in line 112, so just add CGImageRelease(imageRef) after de UIImage creation.

Add social_media_url to podspec

You should add the social_media_url attribute to your podspec for extra internet win!

It's relatively useful right now, but should be much more useful soon with feeds.cocoapods.org and the upcoming search changes :)

Complilation error and UIKit

I try compiling project with JTSImageViewController pod and without .pch file, that includes #import <UIKit/UIKit.h> and I have a lot of compilation error because of unknown types like UIImage, CGRect and so on.

Feature request: flick to dismiss like Facebook

Hi Jared,

I love this library, it's incredibly easy to use as a developer and fun to use as a user!

I wonder if you'd consider for a future release adding a Facebook-style flick-to-dismiss animation, rather than just the Tweetbot flick-to-dismiss animations. In this style, when you flick the image, it moves briefly in the direction you've flicked it, then with a rubber-band animation, it moves and scales into the final image position. You already use this animation when the user taps to dismiss the photo, so it seems like it wouldn't be too much more effort for you to add this as a flick-to-dismiss animation.

Is it possible to detect the type of image dismissal?

We are hiding our "reference image view", and we show it at the end of the dismissal. But when flicking the image, we want the image to already be visible as the overlay fades out.

Right now, I am using the order of the delegate methods to determine whether the image was flicked. When the image is dismissed-via-tap, imageViewerWillAnimateDismissal is called first. When it is flicked, imageViewerWillDismiss is called first. So I set didFlick = false in imageViewerWillAnimateDismissal and check it in imageViewerWillDismiss. Obviously, this is very fragile.

I think the easiest thing to do would be to expose _flag.imageIsFlickingAwayForDismissal.

Is this a feature you would find useful? I would happily submit a PR.

Any guide to use in swift, for a newbie?

Also can this be implemented so the enlarged image is only shows for the time the user finger is on the screen? And if I have another photo can the user swipe to see the other pic in the enlarged mode?

Why does not support multiple picture scroll?

Consider a smarter way of determining whether an image is an animated GIF.

Send 1.2 podspec to Cocoapods

Cocoapods still references the v1.1.1.

Gif image crashing

I have no idea whats going on with the Gif parsing JTSAnimatedGIFUtility class, but it is crashing on some gifs with division by 0 in pairGCD with b = 0. SDWebImage does not crash in this case. Only crashes on some gifs. Here is a reference image that crashes - > http://i.imgur.com/iGRxQNb.gif

Expose scrollView.maximumZoomScale as a settable property

I'd love if scrollView.maximumZoomScale was a settable property when initializing JTSImageViewController:

JTSImageViewController/Source/JTSImageViewController.m

Line 437 in 85de5b6

self.scrollView.maximumZoomScale = 8.0f;

The hardcoded value of 8.0 is really high, and allows people to zoom in to a very grainy level. I'm personally setting it to 2.0

background options

Any idea why there is no difference between any of the background options ?
I am trying to make mine imageViewer semi transparent but it stays black.

• (void)bigButtonTapped:(NSUInteger)index {

  // Create image info
  JTSImageInfo *imageInfo = [[JTSImageInfo alloc] init];

  imageInfo.imageURL = [NSURL URLWithString:[_images objectAtIndex:index]];

  imageInfo.referenceRect = _imagePager.frame;
  imageInfo.referenceView = _imagePager.superview;

  // Setup view controller
  JTSImageViewController *imageViewer = [[JTSImageViewController alloc]
  initWithImageInfo:imageInfo
  mode:JTSImageViewControllerMode_Image
  backgroundStyle:JTSImageViewControllerBackgroundOption_Scaled];

  imageViewer.optionsDelegate = self;

  // Present the view controller.
  [imageViewer showFromViewController:self transition:JTSImageViewControllerTransition_FromOriginalPosition];

}

Update Podspec / Release New Version

So we can get the latest and greatest fixes using CocoaPods :)

blurredSnapshotFromParentmostViewController return type

Maybe nitpicking here but the definition and return are not consistent in blurredSnapshotFromParentmostViewController:: defined as UIView and returned as UIImageView

Thanks for your work :-)

dismissImageWithFlick to startingReference (Facebook-like)

Hi,

I wanted to know if you've ever considered offering a transition-style for the dismissal?

My suggest is that it would be interesting to have an out-transition which performs the inverse of JTSImageViewControllerTransition_FromOriginalPosition for the exit. When you dismiss the image with a pan gesture, it would perform something similar to a "cancel + dismiss" => scale down the image to the origin frame.

Has anyone thought about this? Done it? Would be interested if I work on this? Or maybe it doesn't make any sense to you ;-)

Thanks,

Clement

Support for video?

Any plans or interest in using this controller for video as well as images? If so, I would be happy to work on it (I just don't want to put the work in if you don't have any interest of supporting video at all).

Snapshot methods causing visual bugs on ipad mini

snapshotViewAfterScreenUpdates method causes different visual bugs on different OS versions on iPad Mini. On version 8.4 it caused the whole view to jump and on 9.0.2 it causes the snapshot to appear over the main view in a smaller format for a second.

setStatusBarHidden:withAnimation:' is deprecated

'setStatusBarHidden:withAnimation:' is deprecated: first deprecated in iOS 9.0 - Use -[UIViewController prefersStatusBarHidden]

Smaller images being scaled up

If I have an image that is less than the phone width, the image is getting scaled up which is causing pixelation.

view is not in the window hierarchy!

After I added 2 new viewcontrollers A and B before C (which is where timeline is added) I get
Warning: Attempt to present <JTSImageViewController: 0x137083c00> on <UIViewController: 0x136e0d130> whose view is not in the window hierarchy!

My question is in line
imageViewer!.showFromViewController(UIApplication.sharedApplication().keyWindow?.rootViewController, transition: JTSImageViewControllerTransition._FromOriginalPosition)

I need to replace UIApplication.sharedApplication().keyWindow?.rootViewController with sth in order to access C. What to do?

iOS 8 contentOffset

Hi,

First of all thank you for all the amazing work on this project.

The issue I have is very minuscule. In iOS 8 while using a UITableView, I present the JTSImageViewController and upon dismissal the table view scrolls (not animated) to the top, that is to say the contentOffset is lost.

I read through most of the code in JTSImageViewController.m and it is not at fault. Apparently it's the default behaviour to reset the contentOffset after returning from a modal view controller. I have tried automaticallyAdjustsScrollViewInsets = NO and using a UITableView inside a UIViewController instead of a UITableViewController but no luck. I've also tried setting the contentOffset back after the dismissal but it flashes.

It seems setting the modal presentation style of JTSImageViewController to UIModalPresentationOverFullScreen fixes the issue (since it doesn't remove the hierarchy below it and retains the scroll position I think). As this enum is new to iOS 8 I am going to assume that it's an iOS 8 only issue (since if it wasn't there would be more issues about it).

Any thoughts? Has anyone else experienced this? If so should I make a pull request for this simple change?

if ([[[UIDevice currentDevice] systemVersion] compare:@"8.0" options:NSNumericSearch] != NSOrderedAscending) {
    self.modalPresentationStyle = UIModalPresentationOverFullScreen;
}

iOS 6 support

Would be great to have iOS 6 support with this as well since 11% of devices are using iOS 6 still.
https://developer.apple.com/support/appstore/

Crash Upon Dismissal

Not really sure what I'm doing wrong, but couldn't find anybody having the same issues. I'm presenting the image controller as described in the README. Getting several different crashes, always when dismissing the image.

    UIViewController *vcToShowFrom = ((AppDelegate*)[[UIApplication sharedApplication] delegate]).mainNavigationController.visibleViewController;

    JTSImageInfo *imageInfo = [[JTSImageInfo alloc] init];
    imageInfo.imageURL = url;
    imageInfo.referenceRect = vcToShowFrom.view.bounds;
    imageInfo.referenceView = vcToShowFrom.view;

    JTSImageViewController *imageViewer = [[JTSImageViewController alloc]
                                           initWithImageInfo:imageInfo
                                           mode:JTSImageViewControllerMode_Image
                                           backgroundStyle:JTSImageViewControllerBackgroundOption_None];

    [imageViewer showFromViewController:vcToShowFrom transition:JTSImageViewControllerTransition_FromOriginalPosition];```

Crash 1:
-[UITransitionView didAddSubview:]: message sent to deallocated instance 0x15f671e40

Crash 2:
[CATransaction synchronize] called within transaction

Jerking motion on initial transition on iPhone 6 and 6+

When presenting images, such as the one in the sample project, on the iPhone 6 and 6+ simulators, the main view seems to jerk before presenting the image. It enlarges a little, then shrinks back, then continues with the correct animation.

Background Rotation

I noticed that the view controller that is beneath the image does not rotate. This means if you display an image, then rotate the screen, then dismiss the image. There is an abrupt change in orientation after the animation finishes. Is there a way for the view beneath the image to rotate also?