Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Tree: 966be1c2ef
Fetching contributors…

Cannot retrieve contributors at this time

88 lines (73 sloc) 2.475 kB
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="description" content="A simple gallery">
<meta name="author" content="Steve Rydz">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A simple gallery</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 80%;
margin: 0 auto;
padding-top: 3em;
}
img {
max-width: 100%;
}
.gallery {
float: left;
width: 46%;
margin: 0 20px 20px 0;
}
.thumbnails {
float: left;
margin-right: 14px;
list-style: none;
}
.thumbnails li {
width: 48px;
margin-bottom: 10px;
}
.main-image {
float: left;
width: 380px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.simpleGal.min.js"></script>
<script>
$(document).ready(function () {
$('.thumbnails').simpleGal({
mainImage: '.custom'
});
});
</script>
</head>
<body>
<div class="gallery">
<ul class="thumbnails">
<li><a href="http://farm9.staticflickr.com/8429/7606095390_bd7831f3f9.jpg"><img src="http://farm9.staticflickr.com/8429/7606095390_bd7831f3f9.jpg" alt="Thumbnails"></a></li>
<li><a href="http://farm9.staticflickr.com/8009/7596605084_c36490b6a7.jpg"><img src="http://farm9.staticflickr.com/8009/7596605084_c36490b6a7.jpg" alt="Thumbnails"></a></li>
<li><a href="http://farm9.staticflickr.com/8016/7585950794_b0cdd74891.jpg"><img src="http://farm9.staticflickr.com/8016/7585950794_b0cdd74891.jpg" alt="Thumbnails"></a></li>
</ul>
<div class="main-image">
<img src="http://farm9.staticflickr.com/8429/7606095390_bd7831f3f9.jpg" alt="Placeholder" class="custom">
</div>
</div>
<div class="gallery">
<ul class="thumbnails">
<li><a href="http://farm9.staticflickr.com/8429/7606095390_bd7831f3f9.jpg"><img src="http://farm9.staticflickr.com/8429/7606095390_bd7831f3f9.jpg" alt="Thumbnails"></a></li>
<li><a href="http://farm9.staticflickr.com/8009/7596605084_c36490b6a7.jpg"><img src="http://farm9.staticflickr.com/8009/7596605084_c36490b6a7.jpg" alt="Thumbnails"></a></li>
<li><a href="http://farm9.staticflickr.com/8016/7585950794_b0cdd74891.jpg"><img src="http://farm9.staticflickr.com/8016/7585950794_b0cdd74891.jpg" alt="Thumbnails"></a></li>
</ul>
<div class="main-image">
<img src="http://farm9.staticflickr.com/8429/7606095390_bd7831f3f9.jpg" alt="Placeholder" class="custom">
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.