Fluid Gallery

An image gallery for people who like to scroll.

Description

Takes a div of images and sets every landscape image too 100% width of it's container and for every portrait image divides that container between it and its next sibling while staggering right to left.

A couple of notes

This plugin uses the width and height attributes of img tags to calculate their new size. I didn't want to mess with checking if images are loaded and that stuff when in most cases I know the dimensions of the image I am serving before it's loaded.

Options

margin: integer, spacing around each image, default is 0

Further Developments

Wrap images in container element through plugin
Add additional css styles through plugin

HTML

<div class="gallery">
	<div class="img-container">
		<img src="image.jpg" width="800" height="600">
	</div>
	...
</div>

CSS

.img-container{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.img-container img{
	display: block;
	height:auto;
	width:100%;
}

JAVASCRIPT

$('.gallery').fluidGallery({margin:2});