Gallery

The gallery has minimal styling and mainly contains the functionality of flicking through a gallery. In the examples below, minimal styling has been applied for demo purposes.

Animated gallery

Toggle source (Jade)
+gallery()(data-fx='slide').gallery-demo-1
	+gallery-items()
		+gallery-item()
			+image('lg', [400,400], ['http://placehold.it/400x400&text=1'])
		+gallery-item()
			+image('lg', [400,400], ['http://placehold.it/400x400/eee/000&text=2'])
		+gallery-item()
			+image('lg', [400,400], ['http://placehold.it/400x400/ffaaaa/0000ff&text=3'])
	+gallery-nav(3)
		+gallery-nav-item('0')
			+image('lg', [100,100], ['http://placehold.it/100x100&text=1'])
		+gallery-nav-item('1')
			+image('lg', [100,100], ['http://placehold.it/100x100&text=2'])
		+gallery-nav-item('2')
			+image('lg', [100,100], ['http://placehold.it/100x100&text=3'])
	.controls
		+button-standard(href='#bar', data-dir='prev') Prev
		+button-standard(href='#foo', data-dir='next') Next

Simple gallery with thumbnails

Toggle source (Jade)
+gallery().gallery-demo-2
	+gallery-items()
		+gallery-item()
			h1 Hello
		+gallery-item()
			h1 How are you?
		+gallery-item()
			h1 Yeah, me too.
		+gallery-item()
			h1 Goodbye
	+gallery-nav(4)
		+gallery-nav-item('0')
			+image('lg', [100,100], ['http://placehold.it/100x100&text=1'])
		+gallery-nav-item('1')
			+image('lg', [100,100], ['http://placehold.it/100x100&text=2'])
		+gallery-nav-item('2')
			+image('lg', [100,100], ['http://placehold.it/100x100&text=3'])
		+gallery-nav-item('3')
			+image('lg', [100,100], ['http://placehold.it/100x100&text=4'])

Paginated with dots

The paginated gallery dots are centered by default, but the gallery contents are not. This is because the centering method is left to the application that uses this gallery, if one is desired. If the gallery content just spans the entire width of the parent, no centering is needed on the gallery contents.

Toggle source (Jade)
+gallery().gallery-demo-3.is-paginated
	+gallery-items()
		+gallery-item()
			+image('lg', [400,400], ['http://placehold.it/400x400&text=Dot1'])
		+gallery-item()
			+image('lg', [400,400], ['http://placehold.it/400x400&text=Dot2'])
		+gallery-item()
			+image('lg', [400,400], ['http://placehold.it/400x400&text=Dot3'])
	+gallery-nav(3)
		//- The nav strikethrough is optional.
		+gallery-nav-strikethrough()
		+gallery-nav-dots()
			+gallery-nav-dot('0')
			+gallery-nav-dot('1')
			+gallery-nav-dot('2')
	.controls
		+button-standard(href='#bar', data-dir='prev') Prev
		+button-standard(href='#foo', data-dir='next') Next