<script src="http://cdnitesm.azureedge.net/vendors/bower_components/lightgallery/light-gallery/js/lightGallery.min.js"></script>
<script src="http://cdnitesm.azureedge.net/vendors/bower_components/mediaelement/build/mediaelement-and-player.min.js"></script>
Thumbnail Puedes extender el sistema de grid de Bootstrap con el componente thumbnail para desplegar grids de imágenes, videos, texto y más.
Ejemplo Básico
Por default, los thumbnails están diseñados para mostrar imágenes ligadas.
Contenido personalizado
Se puede agregar cualquier tipo de contenido HTML como encabezados, párrafos, o botones en los thumbnails.
Basic Example
<a href="#" class="thumbnail">
<img src="img/300x200.gif" alt="">
</a>
Custom Content
<div class="thumbnail">
<img src="img/300x200.gif" alt="">
<div class="caption">
<h4>Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<div class="m-b-5">
<a href="#" class="btn btn-sm btn-primary waves-button m-r-5" role="button">Button</a>
<a href="#" class="btn btn-sm btn-default" role="button">Button</a>
</div>
</div>
</div>
Lightbox JQuery lightGallery es una galería para desplegar imágenes y videos.
Imágenes
Videos
Image Gallery
<div class="lightbox row">
<div data-src="media/gallery/1.jpg" class="col-sm-2 col-xs-6">
<div class="lightbox-item">
<img src="media/gallery/thumbs/1.jpg" alt="" />
</div>
</div>
<div data-src="media/gallery/2.jpg" class="col-sm-2 col-xs-6" data-sub-html="<em><h3>This is a caption heading</h3><p>Here goes the description...</p></em>">
<div class="lightbox-item">
<img src="media/gallery/thumbs/2.jpg" alt="" />
</div>
</div>
<div data-src="media/gallery/3.jpg" class="col-sm-2 col-xs-6">
<div class="lightbox-item">
<img src="media/gallery/thumbs/3.jpg" alt="" />
</div>
</div>
<div data-src="media/gallery/4.jpg" class="col-sm-2 col-xs-6" data-sub-html="<em><h3>This is a caption heading</h3><p>Here goes the description...</p></em>">
<div class="lightbox-item">
<img src="media/gallery/thumbs/4.jpg" alt="" />
</div>
</div>
<div data-src="media/gallery/5.jpg" class="col-sm-2 col-xs-6">
<div class="lightbox-item">
<img src="media/gallery/thumbs/5.jpg" alt="" />
</div>
</div>
<div data-src="media/gallery/1.jpg" class="col-sm-2 col-xs-6" data-sub-html="<em><h3>This is a caption heading</h3><p>Here goes the description...</p></em>">
<div class="lightbox-item">
<img src="media/gallery/thumbs/6.jpg" alt="" />
</div>
</div>
</div>
Video Gallery
<div class="lightbox row">
<div data-src="https://www.youtube.com/watch?v=bZrrGF2MHIs" class="col-sm-2 col-xs-6">
<div class="lightbox-item">
<img src="media/gallery/thumbs/1.jpg" alt="" />
</div>
</div>
<div data-src="https://www.youtube.com/watch?v=u8OZoyHvX78" class="col-sm-2 col-xs-6">
<div class="lightbox-item">
<img src="media/gallery/thumbs/2.jpg" alt="" />
</div>
</div>
<div data-src="http://vimeo.com/1084537" class="col-sm-2 col-xs-6">
<div class="lightbox-item">
<img src="media/gallery/thumbs/3.jpg" alt="" />
</div>
</div>
<div data-src="https://www.youtube.com/watch?v=6s7AkoQY5Xk" class="col-sm-2 col-xs-6">
<div class="lightbox-item">
<img src="media/gallery/thumbs/4.jpg" alt="" />
</div>
</div>
</div>
Media Player HTML5 video y audio.
Ejemplo Básico
Multi-Codec sin JavaScript fallback player - Cross Browser
Youtube Video (Preview en el server NO local)
Youtube Video (Preview en el server NO local)
Basic Example
<video style="height: 100%; width: 100%" poster="media/big_buck_bunny.jpg" controls="controls" preload="none"> <!-- id could be any according to you -->
<source type="video/mp4" src="media/big_buck_bunny.mp4" />
</video>
Multi-Codec
<video style="height: 100%; width: 100%" id="multiCodec" poster="media/big_buck_bunny.jpg" controls="controls" preload="none"> <!-- id could be any according to you -->
<!-- MP4 source must come first for iOS -->
<source type="video/mp4" src="media/big_buck_bunny.mp4" />
<!-- WebM for Firefox 4 and Opera -->
<source type="video/webm" src="media/big_buck_bunny.webm" />
<!-- OGG for Firefox 3 -->
<source type="video/ogg" src="media/big_buck_bunny.ogv" />
<!-- Fallback flash player for no-HTML5 browsers with JavaScript turned off -->
<object type="application/x-shockwave-flash" data="media/flashmediaelement.swf" style="width: 100%; height: 100%;">
<param name="movie" value="media/flashmediaelement.swf" />
<param name="flashvars" value="controls=true&poster=media/big_buck_bunny.jpg&file=media/big_buck_bunny.mp4" />
<!-- Image fall back for non-HTML5 browser with JavaScript turned off and no Flash player installed -->
<img src="media/big_buck_bunny.jpg" alt="Media" title="No video playback capabilities" style="width: 100%; height: 100%;">
</object>
</video>
Youtube (NOT LOCAL)
<video style="width: 100%;">
<source src="http://www.youtube.com/watch?v=2CvtOUqd84o" type="video/youtube" >
</video>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="media/carousel/c-1.jpg" alt="">
<div class="carousel-caption">
<h3>First Slide Label</h3>
<p>Some sample text goes here...</p>
</div>
</div>
<div class="item">
<img src="media/carousel/c-2.jpg" alt="">
</div>
<div class="item">
<img src="media/carousel/c-3.jpg" alt="">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="md md-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="md md-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Embebido Responsivo Permite que el navegador determine las dimensiones del video o slideshow basado en el ancho del bloque que lo contiene creando un ratio intrínseco que lo escalará de manera adecuada en cualquier dispositivo.
4:3 Aspect Ratio
16:9 Aspect Ratio
4:3 Aspect Ratio
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="http://www.youtube.com/embed/Kxe_RRonq0o"></iframe>
</div>
16:9 Aspect Ratio
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="http://www.youtube.com/embed/Kxe_RRonq0o"></iframe>
</div>