| Current File : /home/aventura/www/web/modulos/app_galeria/demo-original.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>Bootstrap Photo Gallery Demo</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="photo-gallery.js"></script>
</head>
<style>
@import url(https://fonts.googleapis.com/css?family=Bree+Serif);
body {
background:#ebebeb;
}
ul {
padding:0 0 0 0;
margin:0 0 40px 0;
}
ul li {
list-style:none;
margin-bottom:10px;
}
ul li img {
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;
}
/*override modal for demo only*/
.modal-dialog {
max-width:500px;
}
@media screen and (min-width: 768px){
.modal-dialog {
width:500px;
}
}
@media screen and (max-width: 380px){
.col-xxs-12 {
width:100%;
}
.col-xxs-12 img {
width:100%;
}
}
</style>
<script>
(function(){
"use strict";
var clicked = {};
function showModal(){
var src = $(this).attr('src');
var img = '<img src="' + src + '" class="img-responsive"/>';
var index = $(this).parent('li').attr('data-index');
clicked.prevImg = parseInt(index) - parseInt(1);
clicked.nextImg = parseInt(index) + parseInt(1);
var html = '';
html += img;
html += '<div style="height:25px;clear:both;display:block;">';
html += '<a class="controls next" href="'+ (clicked.nextImg) + '">next »</a>';
html += '<a class="controls previous" href="' + (clicked.prevImg) + '">« prev</a>';
html += '</div>';
$('#myModal').modal();
$('#myModal').on('shown.bs.modal', function(){
$('#myModal .modal-body').html(html);
showHideControls();
})
$('#myModal').on('hidden.bs.modal', function(){
$('#myModal .modal-body').html('');
});
}
function nextPrevHandler(){
var index = $(this).attr('href');
var src = $('li[data-index="'+index+'"] img').attr('src');
$('.modal-body img').attr('src', src);
clicked.prevImg = parseInt(index) - 1;
clicked.nextImg = parseInt(clicked.prevImg) + 2;
if($(this).hasClass('previous')){
$(this).attr('href', clicked.prevImg);
$('a.next').attr('href', clicked.nextImg);
}else{
$(this).attr('href', clicked.nextImg);
$('a.previous').attr('href', clicked.prevImg);
}
showHideControls();
return false;
}
function showHideControls(){
var total = ($('li').not('.clearfix').length);
if(total === clicked.nextImg){
$('a.next').hide();
}else{
$('a.next').show()
}
if(clicked.prevImg === -1){
$('a.previous').hide();
}else{
$('a.previous').show()
}
}
$(document).ready(function(){
$(this).on('click', 'a.controls', nextPrevHandler);
$('li').not('.clearfix').each(function(i){
$(this).attr('data-index',i);
var img = $(this).find('img');
img.on('click',showModal);
});
}) //end doc ready
})();
</script>
<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;">
Original demo - not using the plugin:<br>
<a style="text-decoration:none; color:#666;" href="http://michaelsoriano.com/create-a-responsive-photo-gallery-with-bootstrap-framework/">Responsive Photo Gallery with Bootstrap <span style="color:red;">Demo</span></a>
</h3>
<p>Resize your browser and watch the gallery adapt to the view port size. Clicking on an image will activate the Modal. Click <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">
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4 col-xxs-12">
<img class="img-responsive" src="images/photodune-174908-rocking-the-night-away-xs.jpg">
<div class="text">Consectetur adipiscing elit</div>
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4 col-xxs-12">
<img class="img-responsive" src="images/photodune-287182-blah-blah-blah-yellow-road-sign-xs.jpg">
<div class="text">Lorem ipsum dolor sit amet, labore et dolore magna aliqua. Ut enim ad minim veniam</div>
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4 col-xxs-12">
<img class="img-responsive" src="images/photodune-460760-colors-xs.jpg">
</li>
<li class="clearfix visible-xs-block"></li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4 col-xxs-12">
<img class="img-responsive" src="images/photodune-461673-retro-party-xs.jpg">
<div class="text">Lorem, do eiusmod tempor incid Ut enim ad minim veniam</div>
</li>
<li class="clearfix visible-sm-block"></li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4 col-xxs-12">
<img class="img-responsive" src="images/photodune-514834-touchscreen-technology-xs.jpg">
<div class="text">Do eiusmod tempor</div>
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4 col-xxs-12">
<img class="img-responsive" src="images/photodune-916206-legal-xs.jpg">
<div class="text">Eiusmod tempor enim ad minim veniam</div>
</li>
<li class="clearfix visible-lg-block visible-md-block visible-xs-block"></li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4 col-xxs-12">
<img class="img-responsive" src="images/photodune-1062948-nature-xs.jpg">
<div class="text">Adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div>
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4 col-xxs-12">
<img class="img-responsive" src="images/photodune-1471528-insant-camera-kid-xs.jpg">
<div class="text">Lorem ipsum dolor sit amet, labore et dolore magna aliqua. Ut enim ad minim veniam</div>
</li>
<li class="clearfix visible-sm-block"></li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4 col-xxs-12">
<img class="img-responsive" src="images/photodune-2255072-relaxed-man-xs.jpg">
<div class="text">Eiusmod tempor enim ad minim veniam</div>
</li>
<li class="clearfix visible-xs-block"></li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4 col-xxs-12">
<img class="img-responsive" src="images/photodune-2360379-colors-xs.jpg">
<div class="text">Consectetur adipiscing elit</div>
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4 col-xxs-12">
<img class="img-responsive" src="images/photodune-2360571-jump-xs.jpg">
<div class="text">Lorem ipsum dolor sit amet, labore et dolore magna aliqua. Ut enim ad minim veniam</div>
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4 col-xxs-12">
<img class="img-responsive" src="images/photodune-2361384-culture-for-business-xs.jpg">
<div class="text">Adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div>
</li>
<li class="clearfix visible-lg-block visible-md-block visible-sm-block visible-xs-block"></li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4 col-xxs-12">
<img class="img-responsive" src="images/photodune-2441670-spaghetti-with-tuna-fish-and-parsley-s.jpg">
<div class="text">Lorem ipsum dolor sit amet, labore et dolore magna aliqua. Ut enim ad minim veniam</div>
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4 col-xxs-12">
<img class="img-responsive" src="images/photodune-2943363-budget-xs.jpg">
<div class="text">Adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div>
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4 col-xxs-12">
<img class="img-responsive" src="images/photodune-3444921-street-art-xs.jpg">
<div class="text">Consectetur adipiscing elit, re magna aliqua. Ut enim ad minim veniam</div>
</li>
<li class="clearfix visible-xs-block"></li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4 col-xxs-12">
<img class="img-responsive" src="images/photodune-3552322-insurance-xs.jpg">
<div class="text">Ut enim ad minim veniam</div>
</li>
<li class="clearfix visible-sm-block"></li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4 col-xxs-12">
<img class="img-responsive" src="images/photodune-3807845-food-s.jpg">
<div class="text">Eiusmod tempor enim ad minim veniam</div>
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4 col-xxs-12">
<img class="img-responsive" src="images/photodune-3835655-down-office-worker-xs.jpg">
<div class="text">Ut enim ad minim veniam</div>
</li>
<li class="clearfix visible-lg-block visible-md-block visible-xs-block"></li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4 col-xxs-12">
<img class="img-responsive" src="images/photodune-4619216-ui-control-knob-regulators-xs.jpg">
<div class="text">Do eiusmod tempor</div>
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4 col-xxs-12">
<img class="img-responsive" src="images/photodune-5771958-health-xs.jpg">
<div class="text">Lorem ipsum dolor sit amet, labore et dolore magna aliqua. Ut enim ad minim veniam</div>
</li>
<li class="clearfix visible-sm-block"></li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4 col-xxs-12">
<img class="img-responsive" src="images/photodune-268693-businesswoman-using-laptop-outdoors-xs.jpg">
<div class="text">Consectetur adipiscing elit, re magna aliqua. Ut enim ad minim veniam</div>
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4 col-xxs-12">
<img class="img-responsive" src="images/photodune-352207-search-of-code-s.jpg">
<div class="text">Adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div>
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4 col-xxs-12">
<img class="img-responsive" src="images/photodune-247190-secret-email-xs.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4 col-xxs-12">
<img class="img-responsive" src="images/photodune-682990-online-search-xs.jpg">
<div class="text">Eiusmod tempor enim ad minim veniam</div>
</li>
</ul>
</div> <!-- /container -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>