Required plugin

This feature requires the plugin file css/styles/files.css

Gallery

This style has the following options:

No link or full-block link
Simple thumbnails size control using font-size
Custom controls showing on hover
Use image thumbnails, with or without transparency
Optional stack style (see below)

Preview

Edit

Quick tip

If you omit the images size attributes, they will automatically be resized to fit, and the aspect ratio is preserved.

<ul class="gallery">

	<!-- default style, with no link -->
	<li><img src="img/demo/gallery/picture-1.jpg"></li>

	<!-- Full block link -->
	<li><a href="#">
		<img src="img/demo/gallery/picture-2.jpg">
	</a></li>

	<!-- With a frame around picture -->
	<li><a href="#">
		<img src="img/demo/gallery/picture-3.jpg" class="framed">
	</a></li>

	<!-- With controls on hover -->
	<li>
		<img src="img/demo/gallery/picture-4.jpg" class="framed">
		<div class="controls">
			<span class="button-group compact children-tooltip">
				<a href="#" class="button icon-gear" title="Edit properties">Edit</a>
				<a href="#" class="button icon-trash" title="Move to trash"></a>
			</span>
		</div>
	</li>

	<!-- Optional stack style example -->
	<li><a href="#">
		<span class="stack rotated">
			<img src="img/demo/gallery/picture-6.jpg">
		</span>
	</a></li>

</ul>

Change thumbnails size

To increase or decrease the thumbnails size, just change the font-size on the ul element (the default size is 13px):

<!-- Bigger thumbnails -->
<ul class="gallery" style="font-size:18px">

<!-- Smaller thumbnails -->
<ul class="gallery" style="font-size:10px">

You may also use percentage:

<!-- Bigger thumbnails -->
<ul class="gallery" style="font-size:150%">

<!-- Smaller thumbnails -->
<ul class="gallery" style="font-size:75%">

Images stacks

These styles will only show on browsers with support for :before/:after, and the three latest will only look different on browsers with css transform support (all modern browsers). Olders browsers will see a simple frame fallback.

There are 4 different stack styles, which where designed for galleries but may be used anywhere:

Stack

<span class="stack">
	<img src="img/demo/gallery/picture-5.jpg">
</span>

Stack rotated

<span class="stack rotated">
	<img src="img/demo/gallery/picture-6.jpg">
</span>

Stack twisted

<span class="stack twisted">
	<img src="img/demo/gallery/picture-7.jpg">
</span>

Stack rotated left

<span class="stack rotated-left">
	<img src="img/demo/gallery/picture-8.jpg">
</span>

Image gallery