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">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>
<link rel="stylesheet" href="css/prettyPhoto.css">
</head>
<body>
<div class="container">
<div id="slider" class="carousel slide col-sm-12" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#slider" data-slide-to="0" class="active"></li>
<li data-target="#slider" data-slide-to="1"></li>
<li data-target="#slider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<a rel="prettyPhoto[gallery1]" href="https://youtu.be/yNt0EP3yJqo" title="Cat and Snake">
<img src="http://placehold.it/1280x700&text=video" alt="Video" class="img-responsive">
</a>
<div class="container">
<div class="carousel-caption">
<h1>Cat and Snake video</h1>
</div>
</div>
</div>
<div class="item">
<a rel="prettyPhoto[gallery1]" href="http://placehold.it/500x500" title="Image Placeholder">
<img src="http://placehold.it/1280x700&text=Picture1" alt="Picture 1" class="img-responsive">
</a>
<div class="container">
<div class="carousel-caption">
<h1>First picture</h1>
</div>
</div>
</div>
<div class="item">
<a rel="prettyPhoto[gallery1]" href="http://placehold.it/700x500" title="Image Placeholder">
<img src="http://placehold.it/1280x700&text=Picture2" alt="Picture 2" class="img-responsive">
</a>
<div class="container">
<div class="carousel-caption">
<h1>Second picture</h1>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#slider" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#slider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!--- end slider -->
</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