Maps

Maps

Establecer o invertir el tono, saturación, luminosidad y gamma de un mapa.

<div id="map-511-5417cb61d3a37" class="wk-map wk-map-default" style="height: 223px; width: 100%; position: relative; overflow: hidden; -webkit-transform: translateZ(0px); background-color: rgb(229, 227, 223);" data-widgetkit="googlemaps" data-options="{&quot;title&quot;:&quot;Mexico&quot;,&quot;location&quot;:&quot;Mexico&quot;,&quot;lat&quot;:&quot;23.6266557&quot;,&quot;lng&quot;:&quot;-102.5375005&quot;,&quot;icon&quot;:&quot;purple-dot&quot;,&quot;popup&quot;:1,&quot;text&quot;:&quot;<div class=\&quot;wk-content\&quot;><h2>Mexico<\/h2>&nbsp;&nbsp;<\/div>&quot;,&quot;mainIcon&quot;:&quot;purple-dot&quot;,&quot;width&quot;:&quot;auto&quot;,&quot;height&quot;:223,&quot;style&quot;:&quot;default&quot;,&quot;mapTypeId&quot;:&quot;roadmap&quot;,&quot;zoom&quot;:7,&quot;mapCtrl&quot;:1,&quot;typeCtrl&quot;:0,&quot;directions&quot;:0,&quot;styler_invert_lightness&quot;:1,&quot;styler_hue&quot;:&quot;#ff3300&quot;,&quot;styler_saturation&quot;:-50,&quot;styler_lightness&quot;:0,&quot;styler_gamma&quot;:0.91,&quot;adresses&quot;:[]}"></div>

Media Player

Media Player

Utilice el HTML5 vídeo elemento para incorporar vídeos en su sitio web.

<video src="/video.mp4" width="320" height="240"></video>

Utilice el HTML5 audio elemento para incorporar archivos MP3 en su sitio web.

<audio src="/audio.mp3" type="audio/mp3"></audio>

Muro de Imagen

Muro de imagen Ejemplo

Se trata de un muro de imagen con efecto de zoom, sin márgenes y esquinas cuadradas utilizando la caja de luz.

<div class="wk-gallery wk-gallery-wall clearfix zoom ">

<a href="URL-IMG.jpg" data-lightbox="group:24-542e092f855bf" title="titulo 1"><img src="URL-IMG.jpg" width="200" height="150" alt="imagen1"></a>
                
<a href="URL-IMG.jpg" data-lightbox="group:24-542e092f855bf" title="titulo 2"><img src="URL-IMG.jpg" width="200" height="150" alt="image2"></a>
                
<a href="URL-IMG.jpg" data-lightbox="group:24-542e092f855bf" title="titulo 3"><img src="URL-IMG.jpg" width="200" height="150" alt="image3"></a>
                
<a href="URL-IMG.jpg" data-lightbox="group:24-542e092f855bf" title="titulo 4"><img src="URL-IMG.jpg" width="200" height="150" alt="image4"></a>
                
<a href="URL-IMG.jpg" data-lightbox="group:24-542e092f855bf" title="titulo 5"><img src="URL-IMG.jpg" width="200" height="150" alt="image5"></a>
                
<a href="URL-IMG.jpg" data-lightbox="group:24-542e092f855bf" title="titulo 6"><img src="URL-IMG.jpg" width="200" height="150" alt="image6"></a>
                    
</div>

CrisanTools V1

Slideshow diapositivas de imágenes

Se trata de una presentación de diapositivas de imágenes con el famoso efecto Ken Burns.

• 
• 
• 
• 
• 

• uno
• dos
• tres
• cuatro
• cinco

<div class='wk-slideshow wk-slideshow-screen' data-options='{&quot;index&quot;:0,&quot;buttons&quot;:1,&quot;navigation&quot;:1,&quot;style&quot;:&quot;screen&quot;,&quot;autoplay&quot;:1,&quot;interval&quot;:10000,&quot;width&quot;:600,&quot;height&quot;:300,&quot;duration&quot;:1000,&quot;order&quot;:&quot;default&quot;,&quot;slices&quot;:15,&quot;animated&quot;:&quot;kenburns&quot;,&quot;caption_animation_duration&quot;:500}' data-widgetkit='slideshow' id='slideshow-554-541846f1b1103' style='position: relative; visibility: visible; width: 600px;'>

<div>

<ul class='slides'>

<li><a href='#'><img height='300' src='URL-IMG.JPG' width='600'/></a></li>
<li><a href='#'><img height='300' src='URL-IMG.JPG' width='600'/></a></li>
<li><a href='#'><img height='300' src='URL-IMG.JPG' width='600'/></a></li>
<li><a href='#'><img height='300' src='URL-IMG.JPG' width='600'/></a></li>
<li><a href='#'><img height='300' src='URL-IMG.JPG' width='600'/></a></li>

</ul>

<div class="next"></div>
<div class="prev"></div>        

<div class="caption"></div>

<ul class="captions">

<li>uno</li>
<li>dos</li>
<li>tres</li>
<li>cuatro</li>
<li>cinco</li>

</ul>
    
</div>

<ul class="nav">

<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>

</ul>

</div>