For one of our upcoming extensions on emito.net we are introducing a very simple image browser. The idea is that images are attached to a node via file upload and we give the user a very simple interface to browse through them, without leaving the page, loading slow thickboxes etc.

The user is presented with one larger image, and many thumbnails to chose from.

Our solution is very simple, can be handled with theming + a tiny script. Im sharing the recipe, maybe someone can find it useful.

Within the node theme for this specific content type we render all the thumbnails, and the first image will become the default one. The files in the node are loaded automatically into the node object, since they come via upload.module. We loop through them, and render all thumbnails using theme('imagecache', '<thumbnail_presetname>', $f->filepath) where $f is the actual file.

The jQuery script places a trigger for clicks on thumbnail, upon which it calls a menu callback and tells it the used image src attribute via a GET parameter. The callback parses the image address (since its the path of the resized thumbnail) and returns a new image address for the main image, which then is replaced.

JS and callback codes:

if(Drupal.jsEnabled) {
  $(document).ready( function() {

    $("div.class-img-thumb img").click( function () {
        $("div.class-img-thumb-sel").attr("class", "class-img-thumb");
        $(this).parent().attr("class", "class-img-thumb-sel");

        $.get(
            'http://d/5/integrated/emito/?q=emito_classifieds/thumbnail', 
            {'picture': $(this).attr("src")},
            function (filepath) {
                $("div.class-img img").attr("src", filepath);
         }); 
    }); 

  }); 
}


function <modulename>_thumbnail() {
  $path = $_GET['picture'];
  $array = explode('/', $path);
  $filename = array_pop($array);
  $namespace = '<main_preset>';
  print imagecache_create_url($namespace, $filename);
  exit;
}

`