<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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"> <h1 class="text-center">jQuery Gallery</h1> <div class="gallery"> <div class="placeholder" id="featured"> <img src="//placehold.it/800x600?text=Click+an+image+on+the+right"> </div> <div class="gallery-images"> <div class="image"> <img src="//source.unsplash.com/random/350x351" data-id="1"> </div> <div class="image"> <img src="//source.unsplash.com/random/350x352" data-id="2"> </div> <div class="image"> <img src="//source.unsplash.com/random/350x353" data-id="3"> </div> <div class="image"> <img src="//source.unsplash.com/random/350x354" data-id="4"> </div> <div class="image"> <img src="//source.unsplash.com/random/350x355" data-id="5"> </div> <div class="image"> <img src="//source.unsplash.com/random/350x356" data-id="6"> </div> <div class="image"> <img src="//source.unsplash.com/random/350x357" data-id="7"> </div> <div class="image"> <img src="//source.unsplash.com/random/350x358" data-id="8"> </div> <div class="image"> <img src="//source.unsplash.com/random/350x359" data-id="9"> </div> </div> <div class="clear clearfix"></div> </div>

.gallery { width: 100%; border:1px solid #EEE; padding:2%; } .placeholder { width: 48%; margin: 1%; float: left; } .placeholder img { border: 1px solid #EEEEEE; width: 100%; padding:1%; min-height: 300px; max-height: 600px; } .gallery-images { width: 48%; margin: 1%; float: left; } .image img { width: 31.333%; min-height:125px; float: left; margin: 1%; cursor: pointer; }

jQuery(document).ready(function($) { $('.image img').click(function(event) { // detect data-id for later var id = $(this).data('id'); // grab src to replace #featured var src = $(this).attr('src'); // set featured image var img = $('#featured img'); img.fadeOut('fast', function() { $(this).attr({src: src,}); $(this).fadeIn('fast'); }); }); });