Photo set

dabblet.css

/**
 * Photo set
 */
 
.photo-grid {
	list-style: none;
	display: block;
	text-align: justify;
	max-width: 900px;
}

.photo {
	display: inline-block;
	position: relative;
	min-width: 200px;
	text-align: center;
}

.photo:nth-child(4n+1) {
	clear: both;
}

.photo-title {
	display: block;
}

dabblet.html

<ul class="photo-grid"><li class="photo">
        <a href="#" class="photo-link">
            <img src="http://www.mtv.com/movies/a-z/h/hudgens_vanessa/150x200.jpg" class="photo-img">
            <span class="photo-title">a girl</span>
        </a>
</li><li class="photo">
        <a href="#" class="photo-link">
            <img src="http://i1132.photobucket.com/albums/m566/Feargraphics/Others/150x200.png" class="photo-img">
            <span class="photo-title">bender_wants_to_kill_all_the_people</span>
        </a>
 </li><li class="photo">
 		<a href="#" class="photo-link">
            <img src="http://familytrees.genopro.com/MrSpock/pictures/200x150.jpg" class="photo-img">
            <span class="photo-title">MrSpock</span>
        </a>
 </li><li class="photo">
 		<a href="#" class="photo-link">
            <img src="http://i1132.photobucket.com/albums/m566/Feargraphics/Others/150x200.png" class="photo-img">
            <span class="photo-title">bender_wants_to_kill_all_the_people</span>
        </a>
 </li><li class="photo"> 		<a href="#" class="photo-link">
            <img src="http://familytrees.genopro.com/MrSpock/pictures/200x150.jpg" class="photo-img">
            <span class="photo-title">MrSpock</span>
        </a>
 </li><li class="photo"> 		<a href="#" class="photo-link">
            <img src="http://familytrees.genopro.com/MrSpock/pictures/200x150.jpg" class="photo-img">
            <span class="photo-title">MrSpock</span>
        </a>
 </li><li class="photo">        <a href="#" class="photo-link">
            <img src="http://www.mtv.com/movies/a-z/h/hudgens_vanessa/150x200.jpg" class="photo-img">
            <span class="photo-title">a girl</span>
        </a>
</li><li class="photo">
        <a href="#" class="photo-link">
            <img src="http://www.mtv.com/movies/a-z/h/hudgens_vanessa/150x200.jpg" class="photo-img">
            <span class="photo-title">a girl</span>
        </a>
</li><li class="photo">
        <a href="#" class="photo-link">
            <img src="http://www.mtv.com/movies/a-z/h/hudgens_vanessa/150x200.jpg" class="photo-img">
            <span class="photo-title">a girl</span>
        </a>
</li><li class="photo">
        <a href="#" class="photo-link">
            <img src="http://www.mtv.com/movies/a-z/h/hudgens_vanessa/150x200.jpg" class="photo-img">
            <span class="photo-title">a girl</span>
        </a>
</li><li class="photo">
        <a href="#" class="photo-link">
            <img src="http://www.mtv.com/movies/a-z/h/hudgens_vanessa/150x200.jpg" class="photo-img">
            <span class="photo-title">a girl</span>
        </a>
</li><li class="photo">
        <a href="#" class="photo-link">
            <img src="http://www.mtv.com/movies/a-z/h/hudgens_vanessa/150x200.jpg" class="photo-img">
            <span class="photo-title">a girl</span>
        </a>
</li><li class="photo">
 		<a href="#" class="photo-link">
            <img src="http://familytrees.genopro.com/MrSpock/pictures/200x150.jpg" class="photo-img">
            <span class="photo-title">MrSpock</span>
        </a>
 </li><li class="photo"> 		<a href="#" class="photo-link">            <img src="http://familytrees.genopro.com/MrSpock/pictures/200x150.jpg" class="photo-img">
            <span class="photo-title">MrSpock</span>
        </a>
 </li><li class="photo"> 		<a href="#" class="photo-link">            <img src="http://familytrees.genopro.com/MrSpock/pictures/200x150.jpg" class="photo-img">
            <span class="photo-title">MrSpock</span>
        </a>
 </li><li class="photo"> 		<a href="#" class="photo-link">            <img src="http://familytrees.genopro.com/MrSpock/pictures/200x150.jpg" class="photo-img">
            <span class="photo-title">MrSpock</span>
        </a>
 </li></ul>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}