21
Jun
aNieto2k hace 13 días en: CSS, Programacion, estandares, web, webdev
La gente de TheCSSNinja ha desarrollado un sistema para conseguir emular el efecto lightbox mediante CSS3.
(Ver Imagen)
El resultado es muy similiar al ofrecido por cualquiera de las versiones de Lightbox, salvo que con esta versión no disfrutaremos de efectos ni de funcionalidades que nos permitan interactuar con la foto (pasar fotos, cambiar tamaño, moverla por pantalla). Sin duda se trata de un experimento CSS muy interesante.
¿Como funciona?
Veamos el código para entender como han conseguido hacer este efecto.
// HTML
// Miniaturas
<a href="#futurebox_img1">
<img
src="gr_ninja-attack_med.gif"
width="100"
height="102"
alt="The CSS Ninja"
id="futurebox01"
/>
</a>
// Contenedor de imagenes grandes (uno por cada imagen grande)
<div class="overlay" id="futurebox_img1">
<div class="overlay_container">
<a href="#close" title="Close future box">
<img
src="gr_cssninja_lrg.png"
alt="The Css Ninja"
width="600"
height="639"
/>
</a>
</div>
</div>
// CSS
html, body { height: 100%; }
.overlay
{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
z-index: 999;
background: rgba(0,0,0,0.7);
}
.overlay .overlay_container
{
display: table-cell;
vertical-align: middle;
text-align: center;
}
.overlay_container img
{
background: #ffffff;
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.overlay:target { display: table; }
Como podemos ver la mágia del script es el uso de :target para aplicar el display: table; al fondo de la pantalla (.overlay). Gracias a este pseudo-selector detectamos cuando un enlace-ancla lo está referenciando y al ser este accionado, aplicará el estilo asociado.
Evidentemente por el momento este código, únicamente funcionará en Firefox 1.5+, Safari 3.2+, Chrome 2+ y Opera 9.5+, echarle un vistazo a la demo y vereis lo bien que queda.
1
Abr
aNieto2k hace 94 días en: Programacion, estandares, javascript, web, webdev
FullSize es un plugin jQuery que esconde una propuesta muy interesante. Este plugin se apoya en la idea de implementar un nuevo atributo HTML para los elementos IMG.
<img src="imagen.png" alt="Imagen de prueba" fullsize="imagen-grande.png" />
La idea es muy interesante por que de llegar a buen puerto, este atributo podría pasar a formar parte de la especificación HTML y delegar esta tarea al navegador (algo que siempre es mucho más recomendable que implementarlo mediante un plugin).
Hasta el momento, esto lo podíamos hacer embebiendo la imagen en un enlace haciendo que al hacer click sobre ella esta se abriera en una página nueva (o no) mostrando la imagen grande.
<a href="imagen-grande.png" title="Imagen grande">
<img src="imagen.png" alt="Imagen de prueba" />
</a>
Esta opción actualmente es la más accesible para conseguir que todo el mundo pueda ver la imagen grande, y es la principal técnica usada por todas (o casi todas) las implementaciones de Lightbox.
El plugin
En solo 8kb, podemos disponer de un lightbox que se apoya en el atributo longdesc (me parece horrible) y que podemos usar de la siguiente forma:
Declaración
<link href="your_path_here/fullsize/fullsize.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="your_path_here/fullsize/jquery.fullsize.js"></script>
// Javascript
$("img").fullsize();
Despues nuestras imagenes deberán indicar la imagen grande en el atributo longdesc que será de donde sacará el plugin la dirección para mostrarla.
<img src="me.jpg" alt="me" longdesc="me-big.jpg" />
2
Dic
aNieto2k hace 214 días en: Asides, Programacion, javascript, webdev
Hoy, via CSS Globe descubro Pirobox. Un plugin para jQuery que nos permite mostrar imagenes al estilo lightbox en tan solo 9kb (packed version). [Demo][Descargar]
22
Nov
aNieto2k hace 224 días en: CSS, Programacion, javascript, webdev
jQuery.popeye es una vuelta de tuerca más a la idea de lightbox como sistema para mostrar imagenes en nuestras páginas web. Usando un sistema basado en listados remaquetados con CSS podemos mostrar galerías de imagenes fácilmente en nuestras aplicaciones.
<div style="clear:both;">
<div id="popeye1" class="popeye">
<ul>
<li><a href="....."><img src="....." alt="´...." /></a></li>
<li><a href="....."><img src="....." alt="´...." /></a></li>
.....
</ul>
</div>
// jQuery
$(document).ready(function() {
$('.popeye').popeye();
});
Usando la class “popeye” hacemos que el listado de imagenes que se encuentre en su interior pasará a ser una galería que veremos ocupando un pequeño espacio de nuestra web.
Haciendo click sobre la imagen, podemos visualizar la imagen a un tamaño mayor.
Descargar / Demo
13
Oct
aNieto2k hace 264 días en: Programacion, ajax, javascript, webdev
Desde Coders.me descubro la siguiente versión de SexyLightbox, “la version de Lightbox más sexy”.
Esta nuev versión además de mostrar imagenes, nos permite introducir HTML, mediante peticiones Ajax o plano. Además de reajustar su tamaño dependiendo del tamaño de la imagen y de la pantalla del navegador.
25
Ago
aNieto2k hace 313 días en: Asides, Programacion, javascript, webdev
Hace uno días, Eduardo de Coders.me, nos deleitaba con SexyAlertBox, una alternativa excelente a los moletos alert() de javascript. Ahora modifica el script y nos trae, SexyLightBox, un clon de Lightbox al que gracias a MooTools nos permite mostrar nuestras imagenes de una forma diferente.[Demo][Descargar]
21
Ago
aNieto2k hace 317 días en: Asides, Programacion, javascript, usabilidad, webdev
Eduardo de Coders.me, me avisa de que SexyAlertBox ha visto la luz. Un script desarrollado en Javascript, usando MooTools como Framework, con el que ampliamos las posibilidades que alert() nos ofrece, una herramienta que nos permite mostrar mensajes de una forma más amigable para el usuario y que además podemos personalizar para adaptar a nuestra aplicación.[Demo][Descargar]
20
Abr
aNieto2k hace 440 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.
15
Abr
aNieto2k hace 445 días en: Asides, CSS, Programacion, javascript, webdev
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]
26
Ene
aNieto2k hace 525 días en: Programacion, javascript, webdev
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]
