ABCwin

Una solución javascript elegante, sencilla y gratuita que nos permite desplegar imágenes, videos y templates externos en ventanas flotantes vinculando sólo dos archivos.

Templates en Web browsers

Mostrar template con un formulario

Abrir template con un video

Desplegar template con información

Templates en Mobile devices

Mostrar template con un formulario

Abrir template con un video

Desplegar template con información

Imágenes

Anciano

Videos de Youtube

ABCshow video 1

Videos de Vimeo

Descargar

¿Cuáles son las ventajas?

La principal ventaja consiste en no tener que abandonar la sección en la que me encuentro para desplegar imágenes, videos, formularios, bloques de textos, cajas de login, animaciones y más, para hacerlo en ventanas emergentes. Cuando quiera mostrar contenido, el mismo proviene de archivos externos (templates independientes) que me permiten manejar la información de forma más ordenada. Para el caso de imágenes y videos, sólo me basta con especificar la ruta de la imagen o video y proveer de los parámetros necesarios para cada ventana.

Otra gran ventaja de esta librería es su recursividad; me permite abrir el contenido de un template externo y a su vez desplegar nuevas imágenes y videos por encima de la ventana ya existente (ejemplo).

¿Cómo funciona?

Simplemente tenemos que identificar los vínculos en nuestro sitio en los que necesito desplegar imágenes, videos o contenido externo; para los templates externos agrego la propiedad rev="abcwin[ancho,alto|color]"; "ancho" pertenece al ancho en números de la ventana emergente, "alto" el alto en números o bien la cadena de texto "auto" (deja que el alto de la ventana sea automático al contenido desplegado); Ej: rev="abcwin[500,auto]". Para las imágenes utilizo la propiedad rel="abcshow[Nombre de la categoría]"; colocando en primer lugar la palabra "abcshow" y en caso de querer agrupar varias imágenes en una categoría, me basta con encerrar el nombre de dicha categoría en paréntesis rectos.

Para los videos especifico la propiedad rel="abcvideo[640|480,Nombre de la categoría]"; primero el texto "abcvideo" y luego entre paréntesis rectos las dimensiones en las cuales quiero mostrar dicho video; de igual manera que con las imágenes en caso de necesitar agrupar los videos en una categoría, luego de la coma introduzco el nombre de la categoría.

Esta librería me permite desplegar los distintos thumbs haciendo un fadeIN; para agregar esta funcionalidad me basta con colocar la clase class="abc" dentro de la etiqueta a de cada imagen.

<a href="formulario.php" rel="get:id=10" rev="abcwin[400,auto]">Vínculo</a>

<a href="images/big-example-5.jpg" rel="abcshow[Categoría del grupo]" title="Reloj de arena" class="abc">

<a href="http:// www.youtube.com/embed/ CGkvXp0vdng" title="Beyoncé - Video Phone ft. Lady Gaga " rel="abcvideo[640|480,Categoría del grupo]" class="abc"><img src=" http://img.youtube.com / vi/CGkvXp0vdng/1.jpg" alt="ABCshow video 5" /></a>

<a href="http://player.vimeo.com/video/29193046" title="Título del video" rel="abcvideo[300|200,Categoría del grupo]" class="abc"><img src="http://b.vimeocdn.com / ts/236/084/236084241_100.jpg" /></a>

Importante: Los templates que se cargarán dentro de la ventana pueden tener distintas extensiones (php, html, asp, js, etc) pero deberán tener únicamente la porción de código HTML necesaria, se deberán excluir las etiquetas DOCTYPE, html, meta, head y body. Esto es debido a que se produce una inyección del código HTML del archivo exterior dentro del archivo principal (no se utilizan frames). Puede que en algunos navegadores la librería no funcione de forma local; asegúrense de chequear su funcionamiento luego de subida a un servidor.

¿Qué archivos necesito incluir?

Son necesarios incluir dos archivos externos, "ABCwin.js" y también "ABCwin.css"; recuerden que es una buena práctica incluir siempre los archivos CSS antes de los JS.

<link rel="stylesheet" href="ABCwin.css" type="text/css" media="screen" />

<script type="text/javascript" src="ABCwin.js"></script>

¿Cómo modifico el aspecto visual?

La librería tiene una única hoja de estilos "ABCwin.css" en donde "#abc_win" y "#abc_show" tienen asignados los estilos de cada ventana, la primera para los templates externos y la segunda para imágenes y videos. Acá podemos modificar bordes redondeados, aire de los extremos y color de texto. También se le pueden agregar otros estilos como por ejemplo una familia de fuentes. Encontrarán una carpeta "img" la cual tiene todas las imágenes de la librería, las cuales pueden ser personalizadas a su gusto respetando nombres , anchos y altos de las mismas.

Cuando posiciono el ratón encima del botón de cerrar o en cada uno de los extremos de la foto cuando tengo un grupo de imágenes, podemos visualizar iconos grandes sobre la imagen que se está mostrando. Para modificar estos iconos, basta con editar la imágenes "arrows.png" y "arrows_ie.gif"; estas imágnes tienen transparencias, el formato PNG es usado en los navegadores que muestran este formato de manera correcta y el formato GIF para aquellos navegadores que aún tienen problemas para visualizar los PNG. Es una única imagen que incluye los tres iconos (flecha izqueirda, cruz y flecha derecha).

Parámetros

Si quisiera desplegar un template dinámico (php, js, asp) y deseo mostrar contenido dependiendo del vínculo del que proveniente, tengo la posibilidad de pasar parámetros a la ventana a partir de la propiedad rel = "post:nombre=valor&nombre=valor"; anteponiento "post:" o "get:" dependiendo el tipo de método con el que necesite pasar esos parámetros.

<a href="profile.php" rel="post:id=10" rev="abcwin[400,auto]">Vínculo</a>

<a href="profile.php" rel="post:name=Johnn&country=england" rev="abcwin[400,auto]">Vínculo</a>

Precarga asincrónica del contenido mediante Ajax

Para la carga de templates externos, esta librería utiliza los objetos XMLHttpRequest y ActiveXObject para la carga asincrónica del contenido de manera automática incluyendo un gráfico de precarga hasta tanto no se haya cargado el contenido a desplegar.

Cross-browser

Presenta un correcto funcionamiento incluso en los navegadores más viejos, dígase IE6, IE7, Mozilla, etc.

Dispositivos móviles

Se puede utilizar en todos los dispositivos móviles que soporten javascript. Simplemente basta con establecer un ancho de ventana acorde al dispositivo, ej: rev="abcwin[280,auto]". Aquellos que no soporten javascript simplemente abrirán el contenido de la ventana en una nueva página.

Soporte

Si necesitas ayuda, enviar consultas o sugerencias, lo puedes hacer aquí.