Photo gallery jQuery plugins are everywhere you turn. Not a week goes by without some web design blog featuring a list of jQuery galleries, carousels, sliders and slideshows. GalleryView is my attempt to write a single plugin capable of creating a wide variety of gallery types.

My goal with GalleryView is to provide an extensive set of options to the user. Not only will the user be able to adjust photo and thumbnail sizes, and transition speeds, but he will also have the ability to choose from a selection of element positions, transition styles and other features.

Download & Usage

The currently available package is my current development script. It is undocumented, nor fully browser tested. I provide it simply for educational purposes.

To use GalleryView, extract the included CSS and JS folders to an apporpriate directory, and add <script> and <link> tags for:

  • GalleryView JS
  • jQuery Timers Plugin JS
  • GalleryView CSS

Create an unordered list of images and add the following function call to you JavaScript:


Continue reading for some demonstrations of what GalleryView can do and a list of current plugin options.


I've put together a selection of demos that illustrate the capabilities of GalleryView. This list will grow as features are implemented.


GalleryView is in active development, and new features are being implemented on a regular basis. Below is a list of currently implemented options, as well as a list of options I plan on implementing as development continues.

Implemented Options

option type default value description
transition_speed int 1000 the duration of photo transition animations in milliseconds.
transition_interval int 4000 the delay between automated slideshow transitions in milliseconds.
easing string 'swing' the easing method used in photo and thumbnail animations. any custom easing method may be used.
show_panels boolean true flag to toggle display of main photo panel. set to false to create a carousel-style gallery. (not fully implemented)
show_panel_nav boolean true flag to toggle display of next and previous buttons in the gallery panel.
enable_overlays boolean false flag to toggle display of informational image overlays.
panel_width int 800 width of image panel in pixels.
panel_height int 400 height of image panel in pixels.
panel_animation string 'fade' the animation method used for panel image transitions. Options are 'fade', 'crossfade', 'slide'
panel_scale string 'crop' the scaling method for panel images. Options are 'crop', 'fit'.
overlay_position string 'bottom' the positioning of informational panel overlays. Options are 'bottom', 'top'
pan_images boolean false flag to toggle drag-based panning of oversized panel images.
pan_style string 'drag' panning method used. 'drag' = user clicks and drags image to pan, 'track' = image automatically pans based on mouse position
start_frame int 1 index indicating which image to display when gallery loads
show_filmstrip boolean true flag to toggle display of navigation filmstrip.
show_filmstrip_nav boolean true flag to toggle display of filmstrip-based navigation buttons.
enable_slideshow boolean true flag to toggle play/pause button and ability to start/stop slideshow
autoplay boolean false flag to automatically start slideshow when gallery loads
filmstrip_position string 'bottom' location of filmstrip in relation to panel. Options are 'top', 'left', 'bottom', 'right'.
frame_width int 70 width of filmstrip frames in pixels.
frame_height int 40 height of filmstrip frames in pixels.
frame_opacity float 0.4 the default opacity of filmstrip frames (range 0.0 - 1.0)
frame_scale string 'crop' the scaling method for frame images. Options are 'crop', 'fit'.
frame_gap int 5 distance between frames in pixels.
show_captions boolean false flag to toggle display of frame captions (populated by image's title attribute).
show_infobar boolean true flag to toggle display of image counter bar.
infobar_opacity float 1.0 the default opacity of infobar (range 0.0 - 1.0)

Future Options

option intended function
overlay_opacity To allow the creation of translucent overlays by setting the opacity of the overlay's container.
pan_style To provide the option of multiple panning methods, including the current 'drag' method as well as a 'track' method where the image pans as the mouse moves within the gallery.
pan_smoothness To allow the user to control the speed and smoothness of 'track' style panning.
start_image To allow the user to load the gallery on an arbitrary image.
filmstrip_size Define number of images visible in filmstrip-only, carouself style galleries.