Tu Empresa

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>

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
  });
});


Tablero de noticias

El siguiente código presenta una tablero de noticias

<!DOCTYPE html>
<html lang='es-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>jQuery Bootstrap News Box Plugin</title>
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet' />
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" /> 
  <link href="css/site.css" rel="stylesheet" />
  <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet">
</head>

<body>
<div class="container">
  <h2 class='text-center'>Nuestro hermoso Estado de Veracruz. México</h2>
  <div class='row'>
    <div class="col-md-4">
      <div class='panel panel-default'>
        <div class='panel-heading'>
          <span class="glyphicon glyphicon-list-alt"></span><b>Naturaleza y aventura</b>
          <p>Estos son los lugares perfectos para practicar el turismo de naturaleza y aventura en Veracruz:</p>
        </div> <!-- <div class='panel-heading'> -->
        <div class='panel-body'>
          <div class='row'>
            <div class='col-xs-12'>
              <ul class='naturaleza'>
                <li class='news-item'>
                  <img alt='' class='pull-left' src='images/AngelRCabada.jpg'>
                  <p><b>Actopan</b>. Raffting, manglares, observación de aves y kayak de aguas planas 
                    <a href='http://www.turismoenveracruz.mx/rio-actopan/' 
                      target='_blank'>Leer más...</a>
                  </p>
                </li>
                <li class='news-item'>
                  <img alt='' class='pull-left' src='images/Zozocolco.jpg'>
                  <p><b>Zozocolco</b>. Concurso nacional de Elevación de globlos
                    <a href='http://www.turismoenveracruz.mx/tag/zozocolco/' 
                      target='_blank'>Leer más...</a>
                  </p>
                </li>

              </ul> <!-- Naturaleza -->
            </div> <!-- <div class='col-xs-12'> -->
          </div> <!--  <div class='row'> -->
        </div> <!-- <div class='panel-body'> -->
        <div class="panel-footer"> </div>
      </div> <!-- <div class='panel panel-default'> -->
    </div> <!-- <div class='col-md-4'> --> 

    <div class="col-md-4">
      <div class='panel panel-default'>
        <div class='panel-heading'>
          <span class="glyphicon glyphicon-list-alt"></span><b>Sol y Playa</b>
          <p>El estado de Veracruz cuenta con 745km de playas hermosas colindantes con el Golfo de México </p>
        </div> <!-- <div class='panel-heading'> -->
        <div class='panel-body'>
          <div class='row'>
            <div class='col-xs-12'>
              <ul class='sol'>
                <li class='news-item'>
                  <p><b>Cabo Rojo</b>. Buceo en arrecifes 
                    <a href='http://www.mexicotravelclub.com/tuxpan-veracruz' 
                      target='_blank'>Leer más...</a>
                  </p>
                </li>
                <li class='news-item'>
                  <p><b>Tamiahua</b>. Complejo natural de esteros 
                    <a href='http://www.playasmexico.com.mx/playa_mexico_ficha.php?id_rubrique=681' 
                      target='_blank'>Leer más...</a>
                  </p>
                </li>
              </ul> <!-- Naturaleza -->
            </div> <!-- <div class='col-xs-12'> -->
          </div> <!--  <div class='row'> -->
        </div> <!-- <div class='panel-body'> -->
        <div class="panel-footer"> </div>
      </div> <!-- <div class='panel panel-default'> -->
    </div> <!-- <div class='col-md-4'> --> 

    <div class="col-md-4">
      <div class='panel panel-default'>
        <div class='panel-heading'>
          <span class="glyphicon glyphicon-list-alt"></span><b>Pueblos mágicos y pátrimonios UNESCO</b>
          <p>Pueblos Mágicos, es un programa desarrollado por la Secretaría de Turismo de México</p>
        </div> <!-- <div class='panel-heading'> -->
        <div class='panel-body'>
          <div class='row'>
            <div class='col-xs-12'>
              <ul class='pueblos'>
                <li class='news-item'>
                  <p><b>Coatepec</b>. Enamora con su aroma de café
                    <a href='http://www.pueblosmexico.com.mx/pueblo_mexico_ficha.php?id_rubrique=335' 
                      target='_blank'>Leer más...</a>
                  </p>
                </li>
                <li class='news-item'>
                  <p><b>Tlacoltalpan La Perla del Papaloapan</b>. Considerada la ciudad más típica del
                     estado de Veracruz 
                    <a href='http://www.mexicodesconocido.com.mx/5-imprescindibles-tlacotalpan.html' 
                      target='_blank'>Leer más...</a>
                  </p>
                </li>

              </ul> <!-- Naturaleza -->
            </div> <!-- <div class='col-xs-12'> -->
          </div> <!--  <div class='row'> -->
        </div> <!-- <div class='panel-body'> -->
        <div class="panel-footer"> </div>
      </div> <!-- <div class='panel panel-default'> -->
    </div> <!-- <div class='col-md-4'> --> 


  </div> <!-- <div class='row'> -->
</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="scripts/jquery.bootstrap.newsbox.min.js"></script>
  <script src='scripts/funciones.js'></script>
</body>
</html>
$(function () {
  $(".naturaleza").bootstrapNews({
    autoplay: true,
    direction: 'up',
    newsPerPage: 3,
    newsTickerInterval: 4000,
    onToDo: function () {
       //console.log(this);
    },
    pauseOnHover:true
  });
		
  $(".sol").bootstrapNews({
    autoplay: true,
    direction: 'down',
    newsPerPage: 4,
	navigation: false,
    newsTickerInterval: 2500,
    onToDo: function () {
      //console.log(this);
    },
	pauseOnHover: true
  });

  $(".pueblos").bootstrapNews({
    autoplay: true,           
    newsPerPage: 3,
    onToDo: function () {
      //console.log(this);
    }
  });
});


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='";
		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 = 'No Support'
        $.createModal({
            title:'Acta',
            message: iframe,
            closeButton:true,
            scrollable:false
        });
        return false;        
    });    
})

Por último solo me queda agradecerles su atención a estos códigos. Espero les sirvan para su proyecto final. Considerando la diversidad de conocimientos anexo el código de mi aplicación. Seguramente perfectible




Efecto Parallax

Básicamente, la imagen o la textura que se encuentra como fondo de pantalla se desplaza más lento que el resto del sitio.