Plugin – Interactive Image, para mostrar texto encima de las imágenes

Plugin – Interactive Image, para mostrar texto encima de las imágenes,Este plugin tiene una funcionalidad que permite trabajar con elementos html que se colocan encima de una imagen, esto se hace par que el usuario pueda ver información en determinadas áreas.

Las funcionalidades que tenemos y las características son:
1. Inserte textos interactivos y las imágenes más grandes fotos
2. configuración de forma flexible
3. Fácilmente adaptable con CSS
4. Totalmente probado con CasperJS
5. Instalable a través de gestores de paquetes (inclusiones de código)

Puedes ver la demostración en el siguiente enlace: http://www.jpchateau.com/demo/interactive-image

Para empezar lo que se tiene que hacer es incluir los siguientes
Script css para mostrar la información de forma estilizada.

<link rel="stylesheet" href="/dist/jquery.interactive-image.min.css" />

Script js para poder utilizar este efecto

 
<script src="path/to/js/jquery-2.1.4.min.js"></script>
<script data-main="main" src="path/to/js/require.js"></script>
<script src="/dist/jquery.interactive-image.min.js"></script>

A continuación se usa el código que nos sirve para imagen.

<div class="interactive-image" class="interactive-image"
style="width: 900px; height: 598px; background: url('/path/to/images/image.jpg');"></div>

Código para configurar el plugin (opciones para utilizar el plugin)

// Items
var items = [{  title: "Fur",   description: "The fur of clouded leopards is of a dark grey or ochreous...",   position: {  left: 710, top: 290 }  },
    {      title: "Canines",   description: "They are often referred to as a \"modern-day saber tooth\"...",   position: {  left: 305,  top: 345  },  picture: "/path/to/images/picture.jpg"},
    {
 title: "Threats",   description: "Many of the remaining forest areas are too small to ensure...",        position: {  left: 660,top: 70 }, link: {   href: "http://www.website.org/",   label: "Website"     }}];
// Plugin configuration
var options = {    debug: true };
// Activate the plugin
$('.interactive-image').interactiveImage(items, options);

Cuentanos en donde lo aplicaste.

You may also like...