Carrusel de imagenes

Un carrusel es una forma elegante y fácil de implementar fotos con algunos efectos. Hay sin duda multiples estilos de estos en la red tanto de pago como gratis. Bootstrap nos proporciona uno gratis.

Se usa como framework de diseño Bootstrap 3 y jQuery.

La sintaxis básica es la siguiente

<div id='carrusel' class='carousel slide' data-ride='carousel'>
    <ol class='carousel-indicators'>
      <li data-target='#carrusel' data-slide-to='0'></li>
      <li data-target='#carrusel' data-slide-to='1'></li>
      ... Otras diapositivas 
    </ol> 
 
    <!-- Wrapper for slides -->
    <div class='carousel-inner'>
      <div class='item active'>
        <img alt='' src='url'>
        <div class='caption'>
          <h3>Texto descriptivo</h3>
        </div>
      </div>

      <div class='item'>
        <img alt='' src=''>
        <div class='caption'>
          <h3>Texto descriptivo</h3>
        </div>
      </div>
	  
      <!-- Controls -->
          <a class="carousel-control left" href="#carrusel"  data-slide="prev">‹</a>
          <a class="carousel-control right" href="#carrusel" data-slide="next">›</a>
    </div> <!-- Carousel -->  
  </div>
</div>

Ejemplo: Las Joyas del Pescador


<!doctype html>
<html lang='es'>
<head>
  <meta charset="utf-8">
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <meta http-equiv='x-ua-compatible' content='ie=edge'>
  <title>Las Joyas del Pescador</title>
  <meta name='Author' content='Jose Evaristo Pacheco Velasco' />
  <meta name='Author' content='Ezequiel piña Ortíz' />
  <meta name='copyright' content='© 2009 2016 epacheco'>
  <meta name='date' content='Agosto 13, 2016' />
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'> 
  <link href='joyas.css' rel='stylesheet'>
</head>
<body>
  <div class='container'>
    <div class='galeria'>
      <div id='carrusel' class='carousel slide' data-ride='carousel'>
        <ol class='carousel-indicators'>
          <li data-target='#carrusel' data-slide-to='0' class='active'></li>
          <li data-target='#carrusel' data-slide-to='1'></li>
          <li data-target='#carrusel' data-slide-to='2'></li>
          <li data-target='#carrusel' data-slide-to='3'></li>
          <li data-target='#carrusel' data-slide-to='4'></li>
        </ol> 
 
        <!-- Wrapper for slides -->
        <div class='carousel-inner'>
          <div class='item active'>
            <img alt='' src='imagenes/brazalete.jpg'>
            <div class='caption'>
              <h3>Brazalete</h3>
            </div>
          </div>
          <div class='item'>
            <img alt='' src='imagenes/caballeroAguila.jpg'>
            <div class='caption'>
              <h3>Caballero Águila</h3>
            </div>
          </div>
          <div class='item'>
            <img alt='' src='imagenes/chimalli.jpg'>
            <div class='caption'>
              <h3>Chimalli</h3>
            </div>
          </div>

          <div class='item'>
            <img alt='' src='imagenes/laOllita.jpg'>
            <div class='caption'>
              <h3>La ollita</h3>
            </div>
          </div>
          <div class='item'>
            <img alt='' src='imagenes/Joyas.png'>
            <div class='caption'>
              <h3>Las Joyas del Pescador</h3>
            </div>
          </div>

          <!-- Controls -->
          <a class="carousel-control left" href="#carrusel"  data-slide="prev">‹</a>
          <a class="carousel-control right" href="#carrusel" data-slide="next">›</a>
        </div> <!-- Carousel -->  
      </div>
    </div>
  </div>  
</body>
</html>
body {
  padding-top: 60px;
  padding-bottom: 20px;
}

.carousel-control {
  position: absolute;
  top: 40%;
  left: 15px;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  font-size: 60px;
  font-weight: 100;
  line-height: 30px;
  color: #ffffff;
  text-align: center;
  background: #222222;
  border: 3px solid #ffffff;
  -webkit-border-radius: 23px;
  -moz-border-radius: 23px;
  border-radius: 23px;
  opacity: 0.5;
  filter: alpha(opacity=50);
}
.carousel-control.right {
  left: auto;
  right: 15px;
}
.carousel-control:hover,
.carousel-control:focus {
  color: #ffffff;
  text-decoration: none;
  opacity: 0.9;
  filter: alpha(opacity=90);
}

 .item > img{
    max-width:100%;
}

div.galeria {
    margin: 0 auto;
    width: 50%;
}

Testimoniales

Propios para expresar opiniones o comentarios breves sobre un tema. Acompañados de una imagen o avatar de quien los emite

<!DOCTYPE html>
<html lang='es'>
<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <meta http-equiv='x-ua-compatible' content='ie=edge'> 
  <title>Carousel with face indicators</title>
  <!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'>
  <link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css'>
  <link rel='stylesheet' href='carousel.css'>
</head>
<body>
<div class='container'>
  <div class='row'>
    <div class='col-md-12' data-wow-delay='0.2s'>
      <div class='carousel slide' data-ride='carousel' id='quote-carousel'>
        <!-- Bottom Carousel Indicators -->
        <ol class='carousel-indicators'>
          <li data-target='#quote-carousel' data-slide-to='0' class='active'>
            <img alt='' class='img-responsive ' src='nIrinaShayk.jpg'>
          </li>
          <li data-target='#quote-carousel' data-slide-to='1'>
            <img alt='' class='img-responsive' src='nDaianeCattani.jpg'>
          </li>
          <li data-target='#quote-carousel' data-slide-to='2'>
            <img alt='' class='img-responsive' src='nAntonellaRoccuzzo.jpg'>
          </li>
          <li data-target='#quote-carousel' data-slide-to='3'>
            <img alt='' class='img-responsive' src='shakira.jpg'>
          </li>
        </ol>

        <!-- Carousel Slides / Quotes -->
        <div class='carousel-inner text-center'>
          <!-- Quote 1 -->
          <div class='item active'>
            <blockquote>
              <div class='row'>
                <div class='col-sm-8 col-sm-offset-2'>
                  <p>A la modelo rusa <b>Irina Shayk</b> sus parejas siempre le son infieles. Primero fue
                     el astro del <b>Real Madrid</b>, <b>Cristiano Ronaldo</b>, que se lucía con cuanta mujer
                      podía, ahora se dice que su novio, el actor  Bradley Cooper, la ha engañado con Naomi Campbell.</p>
                                                <small>Pobrecita seguro le costara trabajo conseguir otro</small>
                </div>
              </div>
            </blockquote>
          </div>
          <!-- Quote 2 -->
          <div class='item'>
            <blockquote>
              <div class='row'>
                <div class='col-sm-8 col-sm-offset-2'>
                  <p>Daiane Cattani tiene 27 años, es seductora, futbolera y muy deportista y ya se
                     tatuó el nombre del histórico goleador cuando éste aún salía con Dixie Pratt</p>
                  <small>Romario es un suertudo</small>
                </div>
              </div>
            </blockquote>
          </div>
          <!-- Quote 3 -->
          <div class='item'>
            <blockquote>
              <div class='row'>
                <div class='col-sm-8 col-sm-offset-2'>
                  <p>Antonella Roccuzzo deslumbro al mundo durante el Balón de Oro 2016 al lado de Lionel Messi.
                     Esa noche el argentino se coronó como el mejor jugador del mundo (por quinta vez), la ceremonia
                     también significó la coronación no oficial de la bella rosarina de 27 años como la novio o esposa
                     más hermosa y sensual de todo el mundo fútbol.</p>
                     <small>Suertudo</small>
                </div>
              </div>
            </blockquote>
          </div>

          <!-- Quote 4 -->

          <div class='item'>
            <blockquote>
              <div class='row'>
                <div class='col-sm-8 col-sm-offset-2'>
                  <p>Shakira Isabel Mebarak Ripoll, conocida como Shakira de Pacheco, es una cantautora,
                      productora discográfica, bailarina, modelo, diseñadora de moda, empresaria, actriz,
                      sueño imposible del programador.</p>
                  <small>Cuenta la Leyenda que el programador se comprara primero su Lobo 4 x 4</small>
                </div>
              </div>
            </blockquote>
          </div>



        </div>

        <!-- Carousel Buttons Next/Prev -->
        <a data-slide='prev' href='#quote-carousel' class='left carousel-control'><i class='fa fa-chevron-left'></i></a>
        <a data-slide='next' href='#quote-carousel' class='right carousel-control'><i class='fa fa-chevron-right'></i></a>
      </div>
    </div>
  </div>
</div>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script> 
</body>
</html>
#quote-carousel {
    padding: 0 10px 30px 10px;
    margin-top: 30px;
    /* Control buttons  */
    /* Previous button  */
    /* Next button  */
    /* Changes the position of the indicators */
    /* Changes the color of the indicators */
}
#quote-carousel .carousel-control {
    background: none;
    color: #CACACA;
    font-size: 2.3em;
    text-shadow: none;
    margin-top: 30px;
}
#quote-carousel .carousel-control.left {
    left: -60px;
}
#quote-carousel .carousel-control.right {
    right: -60px;
}
#quote-carousel .carousel-indicators {
    right: 50%;
    top: auto;
    bottom: 0px;
    margin-right: -19px;
}
#quote-carousel .carousel-indicators li {
    width: 50px;
    height: 50px;
    margin: 5px;
    cursor: pointer;
    border: 4px solid #CCC;
    border-radius: 50px;
    opacity: 0.4;
    overflow: hidden;
    transition: all 0.4s;
}
#quote-carousel .carousel-indicators .active {
    background: #333333;
    width: 128px;
    height: 128px;
    border-radius: 100px;
    border-color: #f33;
    opacity: 1;
    overflow: hidden;
}
.carousel-inner {
    min-height: 300px;
}
.item blockquote {
    border-left: none;
    margin: 0;
}
.item blockquote p:before {
    content: "\f10d";
    font-family: 'Fontawesome';
    float: left;
    margin-right: 10px;
}

Galeria LighBox con ventana modal

Una ventana modal es una ventana que se encuentra sobre todas las demas ventanas de la misma aplicación, hasta que se cierra o se abre otra ventana modal.

Una ventana modal coloca al usuario en un estado (o "modo") donde sólo puede actuar dentro de esta ventana. Mientras se muestre la ventana modal, los comandos de menú y las otras ventanas de la aplicación son inaccesibles. Para cerrar una ventana modal, el usuario debe validarla, cancelarla, o elegir una de las opciones que ofrece. Las cajas de diálogo de alerta son ejemplos típicos de ventanas modales.

Bootstrap ofrece una gama de opciones de diseño y además hay toda una comunidad de usuarios que han desarrollado código libre, ejemplo de este es el script de Ashley White.

Se presenta aquí un ejemplo de aplicación de dicha galería. El cual adapta el ejemplo 2 de la liga de descarga original

Consideraciones

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv='x-ua-compatible' content='ie=edge'>
  <title>Bootstrap 3 Lightbox</title>
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'>
  <link href='ekko-lightbox.min.css' rel="stylesheet">
  <link href='estilo.css' rel="stylesheet">
</head>
<body>
<div class="container">
 
  <h3 class="page-header" id="image-gallery">Mi Veracruz</h3>
  <div class="row">
    <div class="col-md-offset-2 col-md-8">
      <div class="row"> 
        <a href='imagenes/admPortuaria.jpg' data-toggle="lightbox" 
           data-gallery="multiimages" data-title="Administración Portuaria de Veracruz" class="col-sm-4">
           <img alt='' src='imagenes/admPortuaria.jpg' class="img-responsive">
        </a>
        <a href='imagenes/baluarte.jpg' data-toggle="lightbox" data-gallery="multiimages" 
           data-title="Baluarte de Santiago" class="col-sm-4">
           <img alt='' src="imagenes/baluarte.jpg" class="img-responsive">
        </a>
        <a href='imagenes/baluarteAlumnos.jpg' data-toggle="lightbox" 
           data-gallery="multiimages" data-title="Alumnos LSCA" class="col-sm-4">
           <img alt='' src='imagenes/baluarteAlumnos.jpg' class="img-responsive">
        </a>
      </div>
   </div>
 </div> <!-- Container -->

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script> 
<script src='ekko-lightbox.min.js'></script>
<script src='funciones.js'></script>
</body>
</html>
div.row > div > div.row {  
  margin-bottom: 15px;
}

body {
  padding-bottom: 50px;
}

div.top-header {
  -bottom:100px;
}

h3.page-header {
  margin-top: 50px;
  text-align: center;

}

figure { position: relative; }

figure figcaption {
  background-color: #000;
  bottom: 10px;
  color: #fff;
  font-size: 22px;
  right: 20px;
  text-decoration: none;
  position: absolute;
}

Y como en gustos se rompen generos. Otro plugin escrito por Michael Soriano. El cual soporta tamaños variables y caption.

<!DOCTYPE html>  
<html lang="es">
<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="Fuente: github.com/michaelsoriano/bootstrap-photo-gallery">
  <meta name="author" content="">
  <title>Bootstrap Photo Gallery Demo</title>
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet' />
  <link href='PhotoGallery.css' rel='stylesheet'>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
  <script src="jquery.bsPhotoGallery.js"></script>
  <script src='PhotoGallery.js'></script>
</head>
<body>
<div class="container">
  <h3 class='text-center'>Mi Veracruz</h3>
  <ul class="row first">
    <li>
      <img alt='' src='imagenes/admPortuaria.jpg'>
      <div class="text">Plaza de la República</div>
    </li>

    otras imágenes
    
    <li>
      <img alt='' src='imagenes/laOllita.jpg'>
      <div class='text'>La Ollita. Colección Joyas del Pescador</div>
    </li>
  </ul>
</div> <!-- /container -->
</body>
</html>
@import url(https://fonts.googleapis.com/css?family=Bree+Serif);

body {
  background:#ebebeb;
}
ul {
  margin:0 0 40px 0;
  padding:0 0 0 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 {
  margin:0 auto;
  text-align:center;
}
.controls{
  display:block;
  font-size:11px;
  font-weight:bold;
  padding-top:8px;
  width:50px;
}
.next {
  float:right;
  text-align:right;
}
.text {
  background:#fff;
  color:#666;
  font-family: 'Bree Serif';
  font-size:11px;
  margin-bottom:10px;
  padding:12px;
}
.glyphicon-remove-circle:hover {
  cursor: pointer;
}
@media screen and (max-width: 380px){
  .col-xxs-12 {
    width:100%;
  }
  .col-xxs-12 img {
    width:100%;
  }
}
$(document).ready(function(){
  $('ul.first').bsPhotoGallery({
    "classes" : "col-lg-2 col-md-4 col-sm-3 col-xs-4 col-xxs-12",
    "hasModal" : true
  });
});

Efecto hover en imagenes con redes sociales

Una forma atractiva de presentar información es la siguiente.

<!DOCTYPE html>
<html lang='es-es'>
<head>
  <meta charset='utf-8' />
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <meta http-equiv='x-ua-compatible' content='ie=edge'>
  <title>Hoteles</title>
  <meta name='Description' content='Donde hospedarse en La Antigua Veracruz.' />
  <meta name='Keywords' content='creatividad, multimedia, uv, antigua, veracruz, atractivos, turististicos' />
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'>
  <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'>
  <link href='https://fonts.googleapis.com/css?family=Archivo+Narrow' rel='stylesheet'>
  <link href='https://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet'>
  <link href='estilo.css' rel='stylesheet'>
  <link href='atractivos.css' rel='stylesheet'>
  <meta name='Author' content='José Evaristo Pacheco Velasco' />
  <meta name='copyright' content='© 2016 epacheco'>
  <meta name='date' content='Mayo 14, 2016' /> 
		  	
  <link href='imagenes/favicon.ico' type='image/x-icon' rel='shortcut icon' />
  <link href='imagenes/favicon.ico'  rel='icon' />
</head>
<body>
<div class='container'>
    <h2 class='text-center'>Hoteles</h2>
    
    <p>Hoteles cercanos a La Antigua Veracruz, para hospedarse y disfrutar de un viaje y estancia más amena.</p>
  <!-- Grupo 1 -->
  <div class='row'>
    <div class='[ col-sm-6 col-md-offset-2 col-md-4 ]'>
      <div class='[ info-card ]'>
        <img alt='' style='width: 100%' src='imagenes/HotelGranPalmeiras.jpg'>
        <div class='[ info-card-details ] animate'>
           <div class='[ info-card-header ]'>
             <h1>Hotel Gran Palmeiras.</h1>
           </div>
           <div class='[ info-card-detail ]'>  <!-- Description --> 
             <p><b>Dirección</b>: Rivera del Río 39, Interior 1, Playa de Chachalacas,
                   Úrsulo Galván, Ver.</p> 
             <p><i class='fa fa-phone'></i> <b>Teléfono</b>: 01 296 962 5465</p>
             <div class='social'>
               <a href='https://www.facebook.com/Hotel-Gran-Palmeiras-127055003988709/'
                  class='[ social-icon facebook ] animate'
                  target='new'>
                 <span class='fa fa-facebook'></span>
               </a>
             </div> <!-- social -->
           </div>
        </div> 
      </div>
    </div>
    <div class='[ col-sm-6 col-md-4 ]'>
      <div class='[ info-card ]'>
        <img alt='' style='width: 100%' src='imagenes/HotelChachalacas.jpg'>
        <div class='[ info-card-details ] animate'>
           <div class='[ info-card-header ]'>
             <h1>Hotel Chachalacas</h1>
           </div>
          <div class='[ info-card-detail ]'> <!-- Description -->
            <p><b>Dirección</b>: Domicilio Conocido Playa de Chachalacas, Veracruz, México</p>
            <p><i class='fa fa-phone'></i> <b>Teléfono</b>: 01 296 96252 36 al 40</p>  
            <p><b>Fax</b>: 01 296 962 5240</p>
             <div class='social'>
                <a href='https://www.facebook.com/Hotel-Chachalacas-190943967615501/'
                   class='[ social-icon facebook ] animate'
                   target='new'>
                   <span class='fa fa-facebook'></span>
                </a>
             </div> <!-- social -->
          </div>
        </div>
      </div>
    </div> <!--   <div class='[ col-sm-6 col-md-4 ]'>-->
  </div> <!-- <div class='row'>  -->



  <!-- Grupo 2 -->
  <div class='row'>
    <div class='[ col-sm-6 col-md-offset-2 col-md-4 ]'>
      <div class='[ info-card ]'>
        <img alt='' style='width: 100%' src='imagenes/HotelBienvenido.jpg'>
        <div class='[ info-card-details ] animate'>
           <div class='[ info-card-header ]'>
             <h1>Hotel Bienvenido.</h1>
           </div>
           <div class='[ info-card-detail ]'>  <!-- Description -->
             <p><b>Dirección</b>: José Cardel Sur 1, Centro, 91680 Cardel Ver.</p> 
             <p><i class='fa fa-phone'></i> <b>Teléfono</b>: 01 296 962 0777</p>
             <div class='social'>
               <a href='https://www.facebook.com/pages/Hotel-Bienvenido/200051740027134'
                  class='[ social-icon facebook ] animate'
                  target='new'>
                 <span class='fa fa-facebook'></span>
               </a>
             </div> <!-- social -->
           </div>
        </div> 
      </div>
    </div>
    <div class='[ col-sm-6 col-md-4 ]'>
      <div class='[ info-card ]'>
        <img alt='' style='width: 100%' src='imagenes/HotelPlaza.jpg'>
        <div class='[ info-card-details ] animate'>
           <div class='[ info-card-header ]'>
             <h1>Hotel Internacional Plaza</h1>
           </div>
          <div class='[ info-card-detail ]'> <!-- Description --> 
            <p><b>Dirección</b>: Independencia No. 25 Pte., Col. Centro, Ciudad Cardel, Ver</p>
            <p><i class='fa fa-phone'></i> <b>Teléfono</b>: 01 296 96252 36 al 40</p>  
            <p><b>Fax</b>: 01 296 962 0882</p>
             <div class='social'>
                <a href='https://www.facebook.com/HOTEL-Internacional-PLAZA-1466349563663683'
                   class='[ social-icon facebook ] animate'
                   target='new'>
                   <span class='fa fa-facebook'></span>
                </a>
             </div> <!-- social -->
          </div>
        </div>
      </div>
    </div> <!--   <div class='[ col-sm-6 col-md-4 ]'>-->
  </div> <!-- <div class='row'>  -->
</div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
</body>
</html>


Previsualizar PDF en ventana Modal

El formato de documento portátil (PDF) es un formato de archivo utilizado para presentar e intercambiar documentos de forma fiable, independiente del software, el hardware o el sistema operativo. Inventado por Adobe, PDF es ahora un estándar abierto y oficial reconocido por la Organización Internacional para la Estandarización (ISO). A continuación se presenta un ejemplo para incrustar un archivo PDF en una ventana modal

.

El siguiente código fue adaptado de su original que se encuentra aquí

Desactive el Filtro SmartScreen en iexplorer. Para visualizar su archivo PDF

<!DOCTYPE html>
<html lang='es-es'>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Visor PDF</title>
  <meta name="description" content="">
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'>
  <link href='PDF.css' rel='stylesheet'>
</head>
<body>
<div class="container">
	<div class="row">
		<h2>PDF en <em>modal preview</em> usando Easy Modal Plugin</h2>
        <a class="btn btn-primary view-pdf" href='CreatividadMultimedia.pdf'>Ver PDF</a>        
	</div>
</div>    
   <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
  <script src='pdf.js'></script>  
</body>
</html>
.iframe-container {    
 padding-bottom: 60%;
 padding-top: 30px; height: 0; overflow: hidden;
}
 
.iframe-container iframe,
.iframe-container object,
.iframe-container embed{
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.modal.in .modal-dialog {
  transform: none; /*translate(0px, 0px);*/
}
/* This is the plugin **/
(function(a){
  a.createModal=function(b){
	defaults={title:"",message:"Your Message Goes Here!",closeButton:true,scrollable:false};
	var b=a.extend({},defaults,b);
	var c=(b.scrollable===true)?'style="max-height: 420px;overflow-y: auto;"':"";
	html='<div class="modal fade" id="myModal">';
	html+='<div class="modal-dialog  modal-lg">';
	html+='<div class="modal-content">';
	html+='<div class="modal-header">';
	html+='<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>';
	if(b.title.length > 0){
		html+='<h4 class="modal-title">'+b.title+"</h4>"}html+="</div>";
		html+='<div class="modal-body" '+c+">";
		html+=b.message;
		html+="</div>";
		html+='<div class="modal-footer">';
		if(b.closeButton===true){
			html+='<button type="button" class="btn btn-primary" data-dismiss="modal">Cerrar</button>'
		}
		html+="</div>";
		html+="</div>";
		html+="</div>";
		html+="</div>";
		a("body").prepend(html);
		a("#myModal").modal().on("hidden.bs.modal",function(){a(this).remove()}
	)
  }
})(jQuery);

/*
* Here is how you use it
*/
$(function(){    
    $('.view-pdf').on('click',function(){
        var pdf_link = $(this).attr('href');
        var iframe = '<object type="application/pdf" data="'+pdf_link+'" width="100%" height="500">No Support</object>'
        $.createModal({
            title:'Acta',
            message: iframe,
            closeButton:true,
            scrollable:false
        });
        return false;        
    });    
})