| Current File : /home/aventura/www/web/modulos/app_galeria/demo.html |
<!DOCTYPE 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.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Empieza la Aventura Mágica</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="jquery.bsPhotoGallery.js"></script>
</script>
<script>
$(document).ready(function(){
$('ul.first').bsPhotoGallery({
"classes" : "col-lg-2 col-md-4 col-sm-3 col-xs-4 col-xxs-12",
"hasModal" : false
});
});
// Find all YouTube videos
var $allVideos = $("iframe[src^='//www.youtube.com']"),
// The element that is fluid width
$fluidEl = $("body");
// Figure out and save aspect ratio for each video
$allVideos.each(function() {
$(this)
.data('aspectRatio', this.height / this.width)
// and remove the hard coded width/height
.removeAttr('height')
.removeAttr('width');
});
// When the window is resized
$(window).resize(function() {
var newWidth = $fluidEl.width();
// Resize all videos according to their own aspect ratio
$allVideos.each(function() {
var $el = $(this);
$el
.width(newWidth)
.height(newWidth * $el.data('aspectRatio'));
});
// Kick off one resize to fix all videos on page load
}).resize();
</script>
</head>
<style>
@import url(https://fonts.googleapis.com/css?family=Bree+Serif);
body {
background:#862986;
}
ul {
padding:0 0 0 0;
margin:0 0 40px 0;
}
ul li {
list-style:none;
margin-bottom:10px;
}
ul li.bspHasModal {
cursor: pointer;
}
.modal-body {
padding:5px !important;
}
.modal-content {
border-radius:0;
}
.modal-dialog img {
text-align:center;
margin:0 auto;
}
.controls{
width:50px;
display:block;
font-size:11px;
padding-top:8px;
font-weight:bold;
}
.next {
float:right;
text-align:right;
}
.text {
font-family: 'Bree Serif';
color:#666;
font-size:11px;
margin-bottom:10px;
padding:12px;
background:#fff;
}
.glyphicon-remove-circle:hover {
cursor: pointer;
}
p{
color: #862986;
}
small{
color: #74c5f2;
}
@media screen and (max-width: 650px){
.col-xxs-12 {
width:100%;
}
.col-xxs-12 img {
width:100%;
}
.col-xxs-12 video {
width:100%;
}
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<body>
<div class="container">
<div class="row" style="text-align:center; border-bottom:1px dashed #ccc; padding:0 0 20px 0; margin-bottom:40px;">
<h3 style="font-family:'Bree Serif', arial; font-weight:bold; font-size:30px;text-decoration:none; color:#f759a1;">
Comienza la Aventura!! <!-- - <span style="color:#74c5f2;">2016</span> -->
</h3>
<p style="color:#FFFFFF;"><strong>Seguinos minuto a minuto todas las actividades que realizan los chic@s en sus viajes, permitiendo disfrutar de Fotografias, Videos, Comentarios de las actividades y así estar informados de las novedades del viaje. </strong><!-- <a style="color:red" href="http://michaelsoriano.com/create-a-responsive-photo-gallery-with-bootstrap-framework/">Here</a></strong> to go back to the tutorial --></p>
</div>
<ul class="row first">
{LISTADO_FACEBOOK}
</ul>
</div> <!-- /container -->
</body>
</html>