gallery 2

Photo Gallery - Dark Theme

Here, we begin to override various default options. Setting pause_on_hover to true lets users freeze the slideshow while they read the content or overlay information of a panel. Changing the default navigation theme allows us to create an attractive gallery for a dark website. By using the jQuery Easing plugin, we can also define a new easing method for smoother filmstrip animation.

GalleryView decides the best way to animate the filmstrip. When the gallery is wider than the filmstrip, the filmstrip remains stationary and the pointer slides from frame to frame. When the filmstrip is too long for the gallery, the pointer remains still and the filmstrip animates underneath it.

Function Call and Options

$('#photos').galleryView({
    panel_width: 800,
    panel_height: 300,
    frame_width: 30,
    frame_height: 30,
    overlay_color: '#222',
    overlay_text_color: 'white',
    caption_text_color: '#222',
    background_color: 'transparent',
    border: 'none',
    nav_theme: 'light',
    easing: 'easeInOutQuad',
    pause_on_hover: true
});