Project

iPhoto

An early jQuery plugin that recreates a Mac iPhoto-style image browsing interaction on the web.

Writing angle

A portfolio snapshot about packaging an interaction as a plugin: HTML contract, options, callbacks, and public utility methods.

Portfolio snapshot

inline notes

The detail page keeps the original screenshot, the usage shape, and the options/API surface visible directly in the blog.

  • Builds around a simple `#iphoto` container, list items, and image holders with `data-index`.
  • Supports max preview width and height, click or mousemove behavior, and an `afterSelected` callback.
  • Exposes helper methods for image scaling, mouse coordinates, popup rendering, and popup cleanup.
$('#iphoto').iPhoto({
  MAX_WIDTH: 200,
  MAX_HEIGHT: 200,
  MOUSEMOVE: true,
  afterSelected(el, index) {
    console.log(index)
  },
})
iPhoto jQuery plugin preview showing a grid of images with a larger floating preview.
Plugin preview