Image Gallery Test

Bootstrap Image Gallery

by Shawn Wood

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<ul class="row list-unstyled items">
	
</ul>
<!-- Modal -->
  <div class="modal fade" id="galleryModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title"></h4>
        </div>
        <div class="modal-body">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>

CSS

.thumb::before{
	content="test"
}

JavaScript

var json = {
    "galleryItem": [{
        "name": "Test Image 1",
            "description": "This is an image of Test Image 1.",
            "type": "image",
            "extension": "jpg",
            "height": 300,
						"width": 400,
            "thumbnail": "http://placehold.it/400x300",
						"src": "http://placehold.it/400x300"
    }, {
        "name": "Test Image 2",
            "description": "This is an image of Test Image 2.",
            "type": "image",
            "extension": "jpg",
            "height": 300,
						"width": 400,
            "thumbnail": "http://placehold.it/400x300",
						"src": "http://placehold.it/400x300"
    }, {
        "name": "Test Image 3",
            "description": "This is an image of Test Image 3.",
            "type": "image",
            "extension": "jpg",
            "height": 300,
						"width": 400,
						"thumbnail": "http://placehold.it/400x300",
            "src": "http://placehold.it/400x300"
    }, {
        "name": "Test Image 4",
            "description": "This is an image of Test Image 4.",
            "type": "Bluetooth Stereo",
            "extension": "jpg",
            "height": 300,
						"width": 400,
						"thumbnail": "http://placehold.it/400x300",
            "src": "http://placehold.it/400x300"
    }]
};
var output = ""; // initialize it outside the loop
$.each(json.galleryItem,function(index,element)
{
    output += '<li class="col-lg-3 col-md-4 col-xs-6 thumb"><a class="thumbnail img-responsive" href="#galleryModal" data-toggle="modal" imgSrc="'+this.src+'" imgTitle="'+this.name+'" imgDesc="'+this.description+'"><img src= "'+this.thumbnail+'" alt="'+ this.name +'"  /></a></li>';
});
$('.items').append(output);
$('#galleryModal').on('hidden.bs.modal', function () {
  $('.modal-title').empty();
	$('.modal-body').empty();
});
$('.thumbnail').on('click', function(){
	var galleryItemView = '<div class="col-md-12 text-center"><img class="img-responsive" src= "'+$(this).attr('imgSrc')+'" alt="'+...