Contenido

Shadowbox, ¿el lightbox definitivo?

26 Ene

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

+ 29

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?

shadowbox.jpg

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 5585 días en: hacks, javascript, PHP, plugins, Programacion, webdev, Wordpress

+ 15

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.

google_maps_lightbox.png

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 5642 días en: CSS, javascript, Programacion, webdev

+ 6

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 5668 días en: javascript, Programacion, webdev

+ 68

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.

LightBox JS 2.0

lightbox.JPG

Enlace / Peso: 12kb. / Framework: Prototype, script.aculo.us / Descargar / Modificaciones:  Lightbox Gone Wild,  Lightbox Using iFrame, Lightbox without Lightbox, LightWindow, Multifaceted Lightbox

Continua —>

Siguiente → ↑
wordpress. themes wordpress.plugins wordpress.hacks Wordpress webkit usabilidad tweet themes Safari prototype plugins plugin PHP optimización Opera navegadores MooTools lightbox jquery.plugin jquery javascript itouch iphone internet explorer imagenes IE8 IE6 HTML5 HTML hack google.chrome google framework flash firefox3 firefox firebug estandares CSS3 CSS canvas ajax Accesibilidad 2.7 2.6