Skip to content

Instantly share code, notes, and snippets.

@psyrendust

psyrendust/index.html

Created November 25, 2015 16:56
Show Gist options
  • Save psyrendust/f4b95dd042e6baf0f732 to your computer and use it in GitHub Desktop.
Save psyrendust/f4b95dd042e6baf0f732 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet prefetch" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style type="text/css">
body .popover {
max-width: 830px;
}
</style>
</head>
<body>
<div class="row">
<div class="col-xs-4 col-md-2">
<a href="#" class="thumbnail" data-toggle="popover" data-full="http://placehold.it/800x800">
<img src="http://placehold.it/75x75">
</a>
</div>
<div class="col-xs-4 col-md-2">
<a href="#" class="thumbnail" data-toggle="popover" data-full="http://placehold.it/800x800">
<img src="http://placehold.it/75x75">
</a>
</div>
<div class="col-xs-4 col-md-2">
<a href="#" class="thumbnail" data-toggle="popover" data-full="http://placehold.it/800x800">
<img src="http://placehold.it/75x75">
</a>
</div>
<div class="col-xs-4 col-md-2">
<a href="#" class="thumbnail" data-toggle="popover" data-full="http://placehold.it/800x800">
<img src="http://placehold.it/75x75">
</a>
</div>
<div class="col-xs-4 col-md-2">
<a href="#" class="thumbnail" data-toggle="popover" data-full="http://placehold.it/800x800">
<img src="http://placehold.it/75x75">
</a>
</div>
<div class="col-xs-4 col-md-2">
<a href="#" class="thumbnail" data-toggle="popover" data-full="http://placehold.it/800x800">
<img src="http://placehold.it/75x75">
</a>
</div>
</div>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript">
// Wait for the web page to be ready
$(document).ready(function() {
// grab all thumbnails and add bootstrap popovers
// http://getbootstrap.com/javascript/#popovers
$('[data-toggle="popover"]').popover({
container: 'body',
html: true,
placement: 'auto',
trigger: 'hover',
content: function() {
// get the url for the full size img
var url = $(this).data('full');
return '<img src="' + url + '">'
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment