Home > Graphics, Leopard, MacOSX > Pimp my IKImageBrowserView: Slide Show

Pimp my IKImageBrowserView: Slide Show

March 27th, 2008

After listening to Frasier Speirs on Late Night Cocoa, I decided to take a look at ImageKit, a new Leopard-only technology that contains the most interesting parts of iPhoto.

I had a need for an Image Browser, so I tried the (very well-written) Browsing Images Programming Guide. At the tutorial’s end, I had a “Browse Images” application:

If you haven’t done so, you can do this tutorial too. I will wait until you’re done…

All done? Great. I wanted some extras in “Browse Images”, for example a slideshow and a filter. There is a guide to build a slideshow application, but it makes you write a separate application. We already have “Browse Images”, surely we can re-use it?

Adding a slideshow

The IKSlideShow class is very simple. One call makes it all happen:

[[IKSlideshow sharedSlideshow] runSlideshowWithDataSource: (id) self inMode: IKSlideshowModeImages options: nil]

The objects have to implement the IKSlideshowDataSource protocol, which requires at least two methods:

	- (NSUInteger) numberOfSlideshowItems
	- (id) slideshowItemAtIndex: (NSUInteger) index

That looks familiar. For the IKImageBrowserDataSource protocol, we already implemented similar methods:

- (int) numberOfItemsInImageBrowser: (IKImageBrowserView*) view
	return [mImages count];

- (id) imageBrowser: (IKImageBrowserView*) view itemAtIndex: (int) index
	return [mImages objectAtIndex: index];

The only difference is the objects returned by (id) imageBrowser: itemAtIndex: had to implement the IKImageBrowserItem protocol, but they still returned an NSString*, a path to the image file.

(Another difference is the objects could be of more image types, but we will leave that for another time.)

Implementing the IKSlideshowDataSource protocol

In your ImageBrowserController implementation, add the missing methods to make the slide show work:

- (NSUInteger) numberOfSlideshowItems
	return [mImages count];

- (id) slideshowItemAtIndex: (NSUInteger) index
	int i = index % [mImages count];

	return [[mImages objectAtIndex: i] path]; // path? Where did that come from?

The first method is the same as before, while the second one returns not a MyImageObject (what is stored in mImages), but the path of that object. To get this path, simply add an accessor to MyImageObject:

- (NSString*) path 
	return mPath;

(Also add the prototype to the interface, lest you get a warning…)

Tying it together in Interface Builder

Now that our controller conforms to the IKSlideshowDataSource protocol, we need a way to start the slide show. To this end, create an IBAction in the controller’s interface, and implement it like this:

- (IBAction) startSlideshow: (id) sender
	if ([mImages count] > 0)
		[[IKSlideshow sharedSlideshow] runSlideshowWithDataSource: (id) self inMode: IKSlideshowModeImages options: nil];

Create a button in Interface Builder, and Control-drag it to your controller to connect it to the startSlideShow: action (IB 3 should have automatically picked up the change in your header file and offer you the new action).

Build and run. You should be able to browse pictures like before, and pressing on the “Slideshow” button should start a full-screen slideshow, complete with index sheet.

Categories: Graphics, Leopard, MacOSX Tags:
  1. aron
    September 6th, 2008 at 21:05 | #1

    How’d you get the tutorial to work? I got to step six where it says”In the IKImageBrowserController.m file”. I don’t have that file…

  2. September 6th, 2008 at 23:57 | #2

    Looks like a typo in Apple’s doc. You should have a “ImageBrowserController.m” file.

  3. jay
    January 7th, 2009 at 15:09 | #3

    where exactly do we put these pieces of code, it brings up the slide show but doesn’t show the image…also get a warning stating that NSMutablearray may not respond to objectatindex

  4. January 7th, 2009 at 22:09 | #4


    Just put it where you implemented your IKBrowserView. Also, check your capitalization for NSMutableArray and objectAtIndex:, since that will prevent the code from working.

  5. Dave Jewell
    January 16th, 2009 at 17:56 | #5

    If you want to run a slide show using the contents of an existing IKImageBrowserView object, myBrowser, you need only use this method:

    [myBrowser startSlideShow: nil];

    It’s just a one-liner and, of course, undocumented…. 😉


  6. Jay
    March 4th, 2009 at 01:48 | #6

    Is it possible to add the image taker and a cover flow in the same way… I\’m trying to find a way to combine them rather than doing separate projects

  7. Jay
    March 4th, 2009 at 02:02 | #7

    Also would it be possible to add editing tools to the same application to edit a selected image

Comments are closed.