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.

Effet du soleil sur le paysage

Photo by tomharry. View full-size photo here.

Eden

Photo by emsago. View full-size photo here.

Snail on the Corn

Photo by baines. View full-size photo here.

Flowers

Photo by jazza. View full-size photo here.

Alone Beach 2B

Photo by sgursozlu. View full-size photo here.

• 
• 
• 
• 
• 

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
});