<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container image-with-thumbs">
<h1 class="header">A catalog image with thumbnails layout</h1>
<a id="image" href="javascript:;" data-img-url=""></a>
<ul class="thumbs">
<script id="thumbnail-template" type="text/template">
{{#thumbnails}}
<li class="thumb" style="background-image:url({{.}})" data-img-url="{{.}}"></li>
{{/thumbnails}}
</script>
</ul>
<div class="modal hide">
<div class="modal-body">
<button class="close">×</button>
<img src="" alt="Full Image" class="image-full" />
</div>
</div>
</div>
<script>
// - Modular approach
(function(){
var catalog = {
thumbnails: [
'https://farm6.staticflickr.com/5576/18670011368_b25a92d37e_k.jpg',
'https://unsplash.imgix.net/photo-1428930377079-45a584b6dd6b?fit=crop&fm=jpg&q=75&w=1050',
'https://unsplash.imgix.net/photo-1428976365951-b70e0fa5c551?fit=crop&fm=jpg&h=700&q=75&w=1050',
'https://ununsplash.imgix.net/photo-1422207134147-65fb81f59e38?fit=crop&fm=jpg&h=800&q=75&w=1050',
],
init: function() {
this.cacheDOM();
this.render();
this.bindEvents();
},
cacheDOM: function() {
this.$el = $('.image-with-thumbs');
this.$image = this.$el.find('#image');
this.$modal = this.$el.find('.modal');
this.$modalClose = this.$modal.find('.close');
this.$modalImage = this.$modal.find('.image-full');
this.$thumbnailList = this.$el.find('.thumbs');
this.thumbnailTemplate = this.$el.find('#thumbnail-template').html();
},
bindEvents: function() {
// On click of thumbnail
this.$thumbnailList.delegate('.thumb', 'click', this.handleThumbnailClick.bind(this));
// Handle click on image
this.$image.on('click', this.openModal.bind(this));
// Handle modal close
this.$modalClose.on('click', this.closeModal.bind(this));
},
render: function() {
// Load thumbnails
this.$thumbnailList.html(Mustache.render(this.thumbnailTemplate, { thumbnails: this.thumbnails }));
// Set first image
this.setImage(this.thumbnails[0]);
},
handleThumbnailClick: function(e) {
e.preventDefault();
var $item = $(e.target);
$item
.addClass('active')
.siblings().removeClass('active');
var imageUrl = $item.data('img-url');
this.setImage(imageUrl);
},
setImage: function(imageUrl) {
this.$image
.css('background-image', 'url('+ imageUrl +')')
.data('img-url', imageUrl);
},
openModal: function(e) {
var imageUrl = $(e.target).data('img-url');
this.$modalImage.attr('src', imageUrl);
this.$modal.show();
},
closeModal: function() {
this.$modal.hide();
}
};
catalog.init();
})()
</script>
*, *:before, *:after {
box-sizing: border-box;
}
body {
font-family: "Open Sans", sans-serif;
}
.container {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.container:after {
content: " ";
display: block;
clear: both;
}
.header {
width: 66.10169%;
float: left;
margin-right: 1.69492%;
margin-left: 16.94915%;
margin-top: 3.38983%;
font-size: 24px;
font-weight: 300;
text-align: center;
color: #999999;
}
#image, .thumbs {
width: 83.05085%;
float: right;
margin-right: 0;
margin-left: 8.47458%;
margin-right: 8.47458%;
margin-top: 1.69492%;
height: 450px;
}
#image {
-webkit-animation-duration: .5s;
animation-duration: .5s;
}
@media (min-width: 800px) {
#image {
width: 32.20339%;
float: left;
margin-right: 1.69492%;
margin-left: 25.42373%;
}
}
@media (min-width: 800px) {
.thumbs {
width: 15.25424%;
float: left;
margin-right: 1.69492%;
margin-left: 0;
}
}
.thumbs {
list-style: none;
padding: 0;
}
.thumbs .thumb {
opacity: 0.5;
height: 23.72881%;
width: 23.72881%;
float: left;
margin-right: 1.69492%;
cursor: pointer;
}
.thumbs .thumb:last-child {
width: 23.72881%;
float: right;
margin-right: 0;
}
@media (min-width: 800px) {
.thumbs .thumb:last-child {
clear: both;
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
margin-bottom: 0px;
}
}
@media (min-width: 800px) {
.thumbs .thumb {
clear: both;
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
height: 105px;
margin-bottom: 10px;
}
}
.thumbs .active {
opacity: 1;
}
#image {
outline: none;
cursor: zoom-in;
}
#image,
.thumb {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.modal {
display: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #fff;
}
.modal .modal-body {
background: transparent;
height: 100%;
width: 100%;
}
.modal .modal-body .close {
position: fixed;
width: 100%;
background: #fff;
border: none;
border-bottom: 3px solid #333;
font-size: 3rem;
font-weight: 100;
color: #333;
}
.modal .modal-body .close:hover, .modal .modal-body .close:focus, .modal .modal-body .close:active {
color: #999999;
background: #333;
}
.modal .modal-body .image-full {
display: block;
margin: auto;
padding: 15.25424% 6.77966%;
}
