Skip to content

Instantly share code, notes, and snippets.

@AndrewBarfield

AndrewBarfield/Bootstrap-Image-Video-Gallery-.markdown

Created December 29, 2014 20:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save AndrewBarfield/68bfe32733c029368f43 to your computer and use it in GitHub Desktop.
Save AndrewBarfield/68bfe32733c029368f43 to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap Image/Video Gallery
Raw
index.html
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
<title>GalleryDemo</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="/min/g=css" rel="stylesheet" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Options -->
<div class="modal" id="modalOptions" tabindex="-1" role="dialog" aria-labelledby="modalOptionsLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">User Options and Preferences</h4>
</div>
<div class="modal-body">
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that&mdash;be sure to include why it's great
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
Option two is disabled
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that&mdash;be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Contact -->
<div class="modal" id="modalContact" tabindex="-1" role="dialog" aria-labelledby="modalContactLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Contact Us</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" name="commentform" method="post" action="">
<div class="form-group">
<label class="control-label col-md-3" for="subject">Subject</label>
<div class="col-md-8">
<input type="text" class="form-control" id="subject" name="subject" placeholder="Message Subject"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3" for="email">Email Address</label>
<div class="col-md-8">
<input type="email" class="form-control" id="email" name="email" placeholder="Email Address"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3" for="comment">Message</label>
<div class="col-md-8">
<textarea rows="6" class="form-control" id="Message" name="Message" placeholder="Your question or comment here"></textarea>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default">Send</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<!-- About -->
<div class="modal" id="modalAbout" tabindex="-1" role="dialog" aria-labelledby="modalAboutLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">About GalleryDemo</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>
<!-- Categories -->
<div class="modal" id="modalCategories" tabindex="-1" role="dialog" aria-labelledby="modalCategoriesLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Categories</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>
<!-- Video -->
<div class="modal" id="modalVideo" tabindex="-1" role="dialog" aria-labelledby="modalVideoLabel" aria-hidden="true">
<div class="modal-dialog">
<div id="modalVideoBody" class="modal-content"></div>
</div>
</div>
<!-- Navbar -->
<div id="navbar1" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="navbar-brand" style="color: #fff">GalleryDemo</span>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#" data-toggle="modal" data-target="#modalOptions">Options</a></li>
<li><a href="#" data-toggle="modal" data-target="#modalContact">Contact</a></li>
<li><a href="#" data-toggle="modal" data-target="#modalAbout">About</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#" data-toggle="modal" data-target="#modalCategories"><span class="glyphicon glyphicon-chevron-left" style="font-size: 12px;"></span> Categories</a></li>
</ul>
</div>
</div>
</div>
<div id="container"></div>
<div id="videoPlayer"></div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="/min/g=js"></script>
</body>
</html>
Raw
script.js
function resizeContainer() {
var navbarHeight = $('#navbar1').height() + 1;
$('#container')
.css('top', navbarHeight + 'px')
.height($(window).height() - navbarHeight);
}
function centerModal() {
$(this).css('display', 'block');
var $dialog = $(this).find(".modal-dialog");
var offset = ($(window).height() - $dialog.height()) / 2;
$dialog.css("margin-top", offset);
}
function itemClick(e) {
var item = $(e.target);
item.css('opacity','0.35');
var id = item.attr('id');
if (!id) {
item = item.parent();
id = item.attr('id');
}
var videoHTML = '<img src="http://placehold.it/608x468&text='+id+'+Selected">';
$('#modalVideoBody').html(videoHTML);
$('#modalVideo').on('hidden.bs.modal', function (e) {
$('#modalVideoBody').html('');
})
$('#modalVideo').modal('show');
}
function createThumbnail(id) {
var colors = ["8EB5CF","FFD478","F89D57","D9531E"];
var bgColor = colors[Math.floor(Math.random() * colors.length)];
return "<div id='"+id+"' style='background-image: url(http://beerhold.it/320/240/?x="+id+")'><span>"+id+"</span></div>";
}
function updateContainer(containerItems, prepend) {
prepend ? $('#container').prepend(containerItems) : $('#container').append(containerItems);
$( '#container div').click(function(e) {
itemClick(e);
});
$('#container div span').mouseenter(function(){
var $this = $(this);
if(this.offsetWidth < this.scrollWidth && !$this.attr('title')){
$this.attr('title', $this.text());
}
});
}
function getData() {
var newGridViewItems = "";
for(var i=1; i<54; i++)
newGridViewItems += createThumbnail("Image_" + i);
updateContainer(newGridViewItems, true);
}
$(function() {
// Resize the thumbnail container
resizeContainer();
// Center all dialogs on show event
$('.modal').on('show.bs.modal', centerModal);
// Resize the Thumbnail Container and center dialogs on Window resize event
$(window).resize(function() {
resizeContainer();
$('.modal:visible').each(centerModal);
});
// Query the server for new videos and prepend them to the container
getData();
});
Raw
style.css
.navbar-brand,.navbar-nav > li > a {
text-shadow:0 1px 0 rgba(255,255,255,.25)
}
.navbar-inverse {
background-image: -webkit-linear-gradient(top,#3c3c3c 0,#222 100%);
background-image: -o-linear-gradient(top,#3c3c3c 0,#222 100%);
background-image: -webkit-gradient(linear,left top,left bottom,from(#3c3c3c),to(#222));
background-image: linear-gradient(to bottom,#3c3c3c 0,#222 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0);
filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);
background-repeat:repeat-x
}
.navbar-inverse .navbar-brand,.navbar-inverse .navbar-nav > li > a {
text-shadow:0 -1px 0 rgba(0,0,0,.25)
}
.navbar-fixed-top {
border-radius:0
}
* {
box-sizing: border-box;
}
html {
overflow: hidden;
padding: 0;
margin: 0;
}
body {
background-color: black;
padding: 0px;
margin: 0 auto;
overflow: hidden;
}
#container {
background-color: black;
position: absolute;
left: 0;
width: 100%;
text-align: center;
border: 0;
margin: 0 auto 0 auto;
padding: 0;
overflow-y: scroll;
overflow-x: hidden;
}
#container div {
background-repeat: no-repeat;
background-position: 50% 50%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
display: inline-block;
padding: 0;
margin: 15px;
width: 320px;
height: 240px;
border: 1px solid #999;
border-radius: 6px;
cursor: pointer;
overflow: hidden;
position: relative;
opacity: 0.8;
}
#container div:hover {
opacity: 1.0;
}
#container div span:first-child {
display: inline-block;
width: 100%;
text-align: left;
margin: 0;
padding: 3px 12px 3px 6px;
background: black;
color: white;
opacity: 0.8;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#container div span:last-child {
font-size: 12px;
display: inline-block;
width: 100%;
text-align: left;
margin: 0;
padding: 3px 12px 3px 6px;
background: black;
color: white;
opacity: 0.9;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: absolute;
left: 0;
bottom: 0;
}
.modal-backdrop.in {
filter: alpha(opacity=90);
opacity: .9;
}
.bs-glyphicons{margin:0;overflow:hidden}
.bs-glyphicons-list{padding-left:0;list-style:none}
.bs-glyphicons li{float:left;width:25%;height:115px;padding:10px;font-size:10px;line-height:1.4;text-align:center;background-color:#f9f9f9;border:1px solid #fff}
.bs-glyphicons .glyphicon{margin-top:5px;margin-bottom:10px;font-size:24px}
.bs-glyphicons .glyphicon-class{display:block;text-align:center;word-wrap:break-word}
.bs-glyphicons li:hover{color:#fff;background-color:#563d7c}
@media (min-width:768px){
.bs-glyphicons{margin-right:0;margin-left:0}
.bs-glyphicons li{width:12.5%;font-size:12px}
}
.input-group[class*="col-"] {
padding-right: 15px;
padding-left: 15px;
}
#modalVideoBody {
padding: 0px;
width: 608px;
height: 468px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment