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:
$('#gallery').galleryView();Continue reading for some demonstrations of what GalleryView can do and a list of current plugin options.
Demonstrations
I've put together a selection of demos that illustrate the capabilities of GalleryView. This list will grow as features are implemented.
- Zero configuration
- Adding captions
- Custom thumbnails and photo details
- Displaying all thumbnails
- Slider-style gallery
- Varying element positioning
- Image panning
- CREATE-A-GALLERY (NEW)
Development
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. |