Embedded Files
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lightbox Video and Photo Gallery</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>
<link rel="stylesheet" href="css/prettyPhoto.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="thumbnails">
<div class="col-sm-3">
<a rel="prettyPhoto[gallery1]" href="https://youtu.be/yNt0EP3yJqo" class="thumbnail">
<img src="http://placehold.it/300x200" alt="" class="img-responsive">
</a>
</div>
</div>
<div class="thumbnails">
<div class="col-sm-3">
<a rel="prettyPhoto[gallery1]" href="http://placehold.it/700x500" class="thumbnail">
<img src="http://placehold.it/300x200" alt="" class="img-responsive">
</a>
</div>
</div>
<div class="thumbnails">
<div class="col-sm-3">
<a rel="prettyPhoto[gallery1]" href="http://placehold.it/700x500" class="thumbnail">
<img src="http://placehold.it/300x200" alt="" class="img-responsive">
</a>
</div>
</div>
<div class="thumbnails">
<div class="col-sm-3">
<a rel="prettyPhoto[gallery1]" href="http://placehold.it/700x500" class="thumbnail">
<img src="http://placehold.it/300x200" alt="" class="img-responsive">
</a>
</div>
</div>
</div><!-- end row 1 --->
<div class="row">
<div class="thumbnails">
<div class="col-sm-3">
<a rel="prettyPhoto[gallery2]" href="http://placehold.it/700x500" class="thumbnail">
<img src="http://placehold.it/300x200" alt="" class="img-responsive">
</a>
</div>
</div>
<div class="thumbnails">
<div class="col-sm-3">
<a rel="prettyPhoto[gallery2]" href="http://placehold.it/700x500" class="thumbnail">
<img src="http://placehold.it/300x200" alt="" class="img-responsive">
</a>
</div>
</div>
<div class="thumbnails">
<div class="col-sm-3">
<a rel="prettyPhoto[gallery2]" href="http://placehold.it/700x500" class="thumbnail">
<img src="http://placehold.it/300x200" alt="" class="img-responsive">
</a>
</div>
</div>
<div class="thumbnails">
<div class="col-sm-3">
<a rel="prettyPhoto[gallery2]" href="http://placehold.it/700x500" class="thumbnail">
<img src="http://placehold.it/300x200" alt="" class="img-responsive">
</a>
</div>
</div>
</div><!-- end row 2 --->
<div class="row">
<div class="thumbnails">
<div class="col-sm-3">
<a rel="prettyPhoto[gallery3]" href="http://placehold.it/700x500" class="thumbnail">
<img src="http://placehold.it/300x200" alt="" class="img-responsive">
</a>
</div>
</div>
<div class="thumbnails">
<div class="col-sm-3">
<a rel="prettyPhoto[gallery3]" href="http://placehold.it/700x500" class="thumbnail">
<img src="http://placehold.it/300x200" alt="" class="img-responsive">
</a>
</div>
</div>
<div class="thumbnails">
<div class="col-sm-3">
<a rel="prettyPhoto[gallery3]" href="http://placehold.it/700x500" class="thumbnail">
<img src="http://placehold.it/300x200" alt="" class="img-responsive">
</a>
</div>
</div>
<div class="thumbnails">
<div class="col-sm-3">
<a rel="prettyPhoto[gallery3]" href="http://placehold.it/700x500" class="thumbnail">
<img src="http://placehold.it/300x200" alt="" class="img-responsive">
</a>
</div>
</div>
</div><!-- end row 3 --->
</div><!--- end container --->
<script>
$(document).ready(function() {
$("[rel^='prettyPhoto']").prettyPhoto();
});
</script>
</body>
</html>
in order this template to work:
get plugin from http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
to work with files get Development version uncompressed
get images placeholders here: http://placehold.it/
get video url from Youtube
Page updated
Google Sites
Report abuse