lightbox | aNieto2K

Listado de clones de Lightbox

aNieto2k hace 92 días en: Asides, CSS, Programacion, javascript, webdev

En PlanetOzh han creado una tabla bastante explicita en la que se recopilan las principales versiones de Lightbox, en ella podemos ver los componentes que cada una de ellas necesita para funcionar, así como enlaces a demos y descargas.

prettyPhoto, el Lightbox de jQuery

15 Abr

aNieto2k hace 97 días en: Asides, CSS, Programacion, javascript, webdev

+ 2

PrettyPhoto es una versión de lightbox para jQuery bastante bonita que nos permitirá mostrar a los usuarios imagenes de una forma elegante, dinámica y cada vez menos original.[Demo][Descargar]

Shadowbox, ¿el lightbox definitivo?

26 Ene

aNieto2k hace 177 días en: Programacion, javascript, webdev

+ 20

Shadowbox, es una versión de Lightbox creada para poder ser usada para cualquier finalidad posible. Con Shadowbox, podremos abrir desde una imagen, hasta una página web, pasando por un set de imagenes o videos de diferentes formatos, todo ello siendo cross-browser, osea funcionando en la mayoría de navegadores web. ¿Podría ser el lightbox definitivo?

Además de ser un lightbox multiuso, dispone de una serie de adaptadores, unos scripts que se encargan de hacer que ShadowBox sea compatible con la mayoría de frameworks javascript del momento. De esta forma no necesitamos una versión de lightbox concreta para nuestra aplicación.

Yahoo! User Interface Library
Ext
Prototype + Script.aculo.us
jQuery
MooTools (requiere Fx.Styles)

Esto hace que la forma de emplearlo, requiera que carguemos los ficheros JS, de una forma determinada. Dependiendo del framework deberemos cargar los ficheros necesarios:

<head>
	<script type="text/javascript" src="shadowbox-yui.js"></script> // Adaptador para YUI!
	<script type="text/javascript" src="shadowbox-prototype.js"></script> //Adaptador para Prototype + Script.aculo.us
	<script type="text/javascript" src="src/js/adapter/shadowbox-ext.js"></script> //Adaptador para Ext.
</head>

[Demo] [API] [Descargar]

Google Maps al estilo Lightbox

11 Dic

aNieto2k hace 223 días en: PHP, Programacion, Wordpress, hacks, javascript, plugins, webdev

+ 9

Google Maps es la aplicación web por excelencia, una muestra de ello es que se trata de la más usada para crear mashups. Uno de ellos es Google Maps Lightbox, una versión del famoso Lightbox en el que mostramos Google Maps, con el fin de evitar que el usuario tenga que abandonar nuestra página para ver uno de sus mapas, sin necesidad de integrar Google Maps en nuestra aplicación.

El script ha sido probado sobre Internet Explorer 7 y Firefox 2.0.

Instalación

Descargamos el zip
Descomprimimos el fichero y lo subimos a nuestro servidor
Obtenemos una Google Maps Key
Insertamos el código que Google nos facilita en nuestro template (generalmente en el fichero header.php)
Incluimos el script que nos creará los efectos a nuestro template (siendo %urlbase% la url de donde se encuentra el script)

<script src="http://%urlbase%/gmlightbox/gmlightbox.js" type="text/javascript"></script>

Incluimos la hoja de estilos a nuestro template

<link href="http://%urlbase%/gmlightbox/gmlightbox.css" rel="stylesheet"/>

Modo de uso

Para usarlo simplemente tendremos que crear un enlace hacia el mapa que queremos mostrar, dotandolo del atributo rel con “gmap” como valor.

<a href="AQUI EL ENLACE" rel="gmap" title="Title">Hellow</a>

Integración con Wordpress

La integración con Wordpress es realmente sencilla y muy similar a la anterior. Por el momento no hay ningún plugin que lo integre, pero no tengo mucho tiempo para desarrollarlo, así que si alguien se anima

Pasos a seguir

Descargamos el zip
Descomprimimos el fichero y lo subimos a la raiz de nuestro Wordpress
Obtenemos una Google Maps Key
Editamos o creamos sinó existe el fichero functions.php en la carpeta de nuestro template.
Añadimos el siguiente código en el fichero functions.php e introducimos la Google Maps key en la variable que vemos abajo.

<?php
$key ='INSERTAMOS NUESTRA GOOGLE MAPS KEY';

function insertgMapCode() {
	global $key;
	return '<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key='.$key.'"
      type="text/javascript"></script>';
}

function insertScripts(){
	$home = get_option("wpurl");
	echo insertgMapsCode();
	echo '<script src="http://'.$home.'/gmlightbox/gmlightbox.js" type="text/javascript"></script>';
	echo '<link href="http://'.$home.'/gmlightbox/gmlightbox.css" rel="stylesheet"/>';
}

add_action('wp_head', 'insertScripts');
?>

No lo he podido probar, si alguien se anima a crear un plugin para Wordpress, que me pase el enlace y actualizaré el post.

jQuery Lightbox plugin, mejora el visionado de imagenes

15 Oct

aNieto2k hace 280 días en: CSS, Programacion, javascript, webdev

+ 5

jQuery lightBox Plugin, como su nombre dice, es una elegante versión de Lightbox desarrollada sobre jQuery. Con tan solo 16kb de peso, este plugin para jQuery hace su función perfectamente y emula a la perfección lo ya visto por plugins desarrollados sobre otros frameworks.

Como usarlo

Primero cargamos los javascript en nuestro <head />

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.2.js"></script>

Añadimos nuestros estilos CSS

<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.2.css" media="screen" />

Mediante el uso de selectores podremos seleccionar que elementos son los que han de ser tratados por el plugin.

<script type="text/javascript">
$(function() {
   $('a[@rel*=lightbox]').lightBox(); // Seleccionamos todos los elementos cuyo atributo rel contenga "lightbox"
   $('#gallery a').lightBox(); // Seleccionamos todos los enlaces del elementos #gallery
   $('a.lightbox').lightBox(); // Seleccionamos todos los enlaces con clase lightbox
   $('a').lightBox(); // Seleccionamos todos los enlaces
   // ... Muuuuuchas posibilidades más...
});
</script>

Posibilidades

<script type="text/javascript">
$(function() {
   $('a[@rel*=lightbox]').lightBox({
	overlayBgColor: '#FFF',
	overlayOpacity: 0.6,
	imageLoading: 'http://example.com/images/loading.gif',
	imageBtnClose: 'http://example.com/images/close.gif',
	imageBtnPrev: 'http://example.com/images/prev.gif',
	imageBtnNext: 'http://example.com/images/next.gif',
	containerResizeSpeed: 350,
	txtImage: 'Imagem',
	txtOf: 'de'
   });
});
</script>

El plugin permite personalizar nuestro lightbox usando para ello, un objeto json con las siguientes propiedades.

{
	overlayBgColor: "El color de fondo (#000 por defecto)",
	overlayOpacity: "La opacidad del fondo(0.8 por defecto)",
	imageLoading: "Imagen de cargando",
	imageBtnClose: "Imagen de cerrar",
	imageBtnPrev: "Imagen de anterior",
	imageBtnNext: "Imagen de siguiente",
	containerBorderSize: "Padding usado en el contenedor (10px por defecto)",
	containerResizeSpeed: "Velocidad de redimensionado del contenedor (400 por defecto)",
	txtImage: "Texto "Image" usado como caption de la imagen",
	txtOf: "Texto "of" usado como caption de la imagen"
}

[Demo][Descargar]

Colección de clones de Lightbox para todos

19 Sep

aNieto2k hace 306 días en: Programacion, javascript, webdev

+ 42

Está claro que el uso de clones de Lightbox se ha estandarizado por la blogosfera a un velocidad increible, y que se ha llegado a hacer necesario para todo blogger disponer de uno de estas versiones, con las que mostrar de una forma elegante a nuestros usuarios las imagenes y demás contenidos que introducimos en nuestra web. Pero hay tantos que no sabemos por cual decidirnos.