Simple Lightbox – plugin para imágenes en WordPress by tonalidad.es

Simple Lightbox – plugin para imágenes en WordPress by tonalidad.es

fuente: http://tonalidad.es/blog-de-notas/simple-lightbox-un-buen-visor-de-imagenes-para-wordpress/

Simple Lightbox es un plugin para WordPress que muestra nuestras imágenes (con link a una imagen) poniéndolas en primer plano y atenuando el fondo de la web.  Es muy sencillo de configurar y tiene funcionalidades muy interesantes … Leer artículo completo en http://tonalidad.es/blog-de-notas/simple-lightbox-un-buen-visor-de-imagenes-para-wordpress/

#html: ventana modal, visor de imagen o #Lightbox en #css sin #jquery by codepen.io

fuente: http://codepen.io/gschier/pen/HCoqh

muy sencillito y muy efectivo … quizas se echen en falta los botones de alante y atras y los efectillos de aparicion pero es muy resulton y poco pesado y muy bueno para evitar engorrosos conflictos de jquery por sus liberias

en el css:

.lightbox {
display: none;
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: rgba(0,0,0,0.8);
}

.lightbox img {
max-width: 90%;
max-height: 80%;
margin-top: 200%;
}

.lightbox:target {
outline: none;
display: block;
}

en el html:

link visible
<a href=”#img1″>
<img src=”https://s3.amazonaws.com/gschierBlog/images/pig-small.jpg”&gt;
</a>

link oculto debido a que sera la imagen en grande que se vera despues de pulsar
<a href=”#_” class=”lightbox” id=”img1″>
<img src=”https://s3.amazonaws.com/gschierBlog/images/pig-big.jpg”&gt;
</a>

Usando MOOdalBox para abrir una ventana al cargar el html automaticamente sin necesidad de pulsar en ningun link

Vamos, lo tipico de las ventanas de publicidad en cualquier web cuando entras y lo primero que te sale es publicidad …

Debemos añadir esto en el head:

<script type=”text/javascript”>
function go(){
var id = setInterval(“go2()”,1000);
setTimeout(“clearInterval(“+id+”)”,1001);
}
function go2(){
MOOdalBox.open(“premios-e-commerce.html”, “”, “215 275″);
}
</script>

y en el body esto:

<body onload=”javascript:go()”>

Me imagino que estareis flipando con lo de setinterval, esto es debido a que si llamamos directamente desde el onload del body es como si se ejecutase demasiado rapido y el script genera un error debido a que no le dio tiempo a obtener las dimensiones de la ventana del explorador (o al menos a mi me pasa eso, claro que mi ordenador esta poseido por el satan del infierno del silicio claro … eso quizas influya algo) donde 1000 es el tiempo que tarda en abrirse la ventana lightbox en milisegundos y 1001 es para romper el setinterval

Espero haber sido de ayuda, muchachada 😀

Usando MOOdalBox – un Lightbox (visor de fotos) para cargar HTML en vez de jpg by codeline

Fuente : http://codeline.wordpress.com/2008/01/18/usando-moodalbox-%E2%80%93-un-lightbox-para-html/

Hace poco en uno de los proyectos que adelanto, necesitaba mostrar la información de una noticia o evento cuando le daban a un link, pero no quería hacerlo en una página nueva, ya que esto implicaba cargar nuevamente todo el diseño de la página solo para mostrar un par de líneas de texto.

Buscando en la Web encontré MOOdalBox, una librería que utiliza el framework de mootools como base para funcionar pero que permite cargar cualquier contenido HTML dentro de una ventana animada que se sobrepone sobre la página, al mismo estilo de Lightbox pero con HTML.

Esta herramienta es ideal para mostrar porciones de contenido que no justifican una redirección del navegador y que se vuelva a cargar todo el contenido gráfico.

Con MOOdalBox, tenemos la posibilidad de definir el tamaño de la ventana que se requiere mostrar, y es tan sencillo de aplicar que de seguro no dudaremos en usarlo en nuestros proyectos.

Primero debemos descargar lo necesario del sitio de MOOdalBox.

En el archivo comprimido vienen tres carpetas:

  • Css
    • Moodalbox.css
  • Img
    • Closelabel.gif
    • Loading.gif
  • Js
    • Mootools.js
    • Moodalbox.js

En la cabecera del documento HTML (<HEAD>) deben incluirse las dos librerías y la hoja de estilo.

<script type=”text/javascript” src=”/js/mootools.js”></script> 

<script type=”text/javascript” src=”/js/moodalbox.js”></script>

<link rel=”stylesheet” href=”/css/moodalbox.css” type=”text/css” media=”screen” />

Y luego solo es necesario incluir rel=”moodalbox” dentro de la etiqueta de hipervínculo en la que necesitamos aplicar este efecto.

<a href=”paginaDestino.html” rel=”moodalbox” title=”Texto de descripción de la pagina”>Texto del Link</a>.

Y eso es todo. Ya esta aplicado el efecto y nuestro sitio ya parece más dinámico y Web 2.0.

Links:

MOOdalBox site

Lightbox 2 – auto ajuste de imagen

Modificacion del mitico Lightbox 2 para que las fotos que sean mas grandes que la resolucion de la pantalla se ajusten automaticamente de tal forma que nunca necesiten scroll horizontal.

Enlace a la libreria .js modificada: http://seb.box.re/assets/2007/2/4/lightboxSEB.js

Descargamos esta libreria y la sustituimos por la anterior

Autor: Sébastien Grosjean

Fuente: http://seb.box.re/2006/11/22/lightbox-2-auto-resizing-enhancement