jQueery SlipHover galería de imágenes con descripción frontal

DESCARGA : SlipHover

jQueery SlipHover galería de imágenes con descripción frontal, es un plugin para mostrar información descriptiva, este plugin te puede servir para presentar pequeñas descripciones en las imágenes, de igual forma te puede servir para presentar descripciones de productos, condiciones de uso, inclusive tiene la flexibilidad de agregarle formularios para enviar información del usuario, puedes usarlo para anexar enlaces con etiquetas html, la descripción se coloca en el atributo title de la etiqueta imagen, en lo único que tienes que tener cuidado es en colocar las comillas simples y dobles comillas en dicho contenido, ya que eso podría mostrarte la descripción incompleta.

Cuando lo uses tienes que tener en consideración que la imagen puede tener enlaces con una etiqueta para redireccionar a otro lugar o de manera tradicional manejar links, otro aspecto relevante es que tienes que diseñar la manera en que se presenta la imagen, recuerda que tienes que utilizar estilos prudentes al diseño que quieres manejar, puedes encontrarte con 5 ejemplos en el sitio oficial del plugin.

 

La implementación es de la siguiente forma:

 

Incluimos las librerias del plugin y de jQuery


<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.sliphover.min.js"></script>

Código para usar las imágenes


<div class="demo" id="sliphover">
  <ul>
    <li>
                    <a href="#"><img src="img/1.jpg" title="this is a normal caption" /></a>
                </li>
                <li>
                <a href="#" >
                    <img src="img/2.jpg" title="description goes here" />
                </a>
                </li>
                <li>
                <a href="#">
                    <img src="img/3.jpg" title="with html, you can put <a href='#'>link</a> , <input type='button' value='button'> or any other element you want" />
                </a>
                </li>
                <li>
                <a href="#">
                    <img src="img/4.jpg" title="description for this image" />
                </a>
                </li>
                <li>
                <a href="#">
                    <img src="img/5.jpg" title="description for this image" />
                </a>
                </li>
                <li>
                <a href="#">
                    <img src="img/6.jpg" title="description for this image" />
                </a>
                </li>
                <li>
                <a href="#">
                    <img src="img/7.jpg" title="description for this image" />
                </a>
                </li>
                <li>
                <a href="#">
                    <img src="img/8.jpg" title="description for this image" />
                </a>
                </li>
                <li>
                <a href="#">
                    <img src="img/9.jpg" title="description for this image" />
                </a>
                </li>
                 <li>
                 <a href="#">
                    <img src="img/10.jpg" title="description for this image" />
                 </a>
                </li>
  </ul>
</div>

Y por ultimo el codigo para la creación del efecto

$(".demo").sliphover();

Demostración:http://wayou.github.io/SlipHover/#

You may also like...