• jquery >= 1.4.2
• jquery.ui >= 1.8.0
• jquery.slidescale.js
• jquery.slidescale.css

Scalable gallery image viewer, has the ability to take images already on page, a list of urls passed in, or both to construct a gallery. Uses incremental preloading to preload images to save bandwidth.

A user can define how many pictures to be preloaded (preload_num) past the current image. This is configurable for both main photos and for thumbnails.

Tested in IE7+, FF3.6, Chrome.

If you're using the plugin, send me an email! It would be great to know if people actually use it and where.

SlideScale triggers and listens to some events that may be useful for developers.

.SlideScale Container Events

Container is the object passed to slidescale on construction

next:: If triggered, slidescale moves to the next image. Event is triggered right before slidesscale moves to next image.

prev:: If triggered, slidescale moves to the previous image. Event is triggered right before slidesscale moves to previous image.

setCurrent:: Called on the image list list item prior to centering image.

unsetCurrent:: Triggered on image list item prior to removal from center.

.SlideScale Options

css_transitions:: Defaults to true if available. control_fade_speed:: Control fade speed, passed directly to animate, falsey for no fading. Only used if css transitions are not enabled. thumb_height:: height of thumbnail area opacity:: opacity for hovered buttons and inactive thumbnail opacity and photo opacity load_num:: num images left before preload is triggered preload_num:: number of photos to preload load_thumb_num:: number of thumbnails to preload photo_dir:: default photo directory thumb_dir:: default thumbnail directory images:: Array of ScImage option objects for creating images

.ScImage Options

name:: image name to use for finding image in thumbdir and photodir thumb_dir:: the directory to look up name in for thumbnail photo_dir:: the directory to look up name in for photo photo_path:: overrides photodir finding with full path for photo thumb_path:: overrides photodir finding with full path for image caption_link:: link for the caption to go to when clicked photo_link:: link for when the photo is clicked thumb_load_cb:: function to call when thumbnail has loaded image_load_cb:: function to call when image has loaded

.Classes

ss-trans-bg:: Transparency for caption backgrounds can be adjusted through overriding this class

$('#gallery').slidescale({
    images: [
        {name: "sea-turtle.jpg",
            text: "Watch, the mighty Sea Turtle!"},
        {name: "yellow-fish.jpg",
            text: "Fish may want to be yellow too"}
    ]
});

$('#gallery').slidescale({
    images: [
        { photo_path: "http://imagepath.com/sea-turtle.jpg",
          thumb_path: "http://imagepath.com/thumb/sea-turtle.jpg",
          text: "Watch, the mighty Sea Turtle!"}
    ]
});

Dual licensed under the MIT or GPL Version 2 licenses.

Ziling Zhao zilingzhao+NOSPAM@gmail.com

// vim: tw=78 :