Current File : /home/aventura/www/web/modulos/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>Seguimiento de Viaje - Aventura M&aacute;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;">
              Seguimiento de Viaje <!-- -  <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>