Deprecated: Assigning the return value of new by reference is deprecated in /home/controlz/public_html/blog/wp-settings.php on line 472

Deprecated: Assigning the return value of new by reference is deprecated in /home/controlz/public_html/blog/wp-settings.php on line 487

Deprecated: Assigning the return value of new by reference is deprecated in /home/controlz/public_html/blog/wp-settings.php on line 494

Deprecated: Assigning the return value of new by reference is deprecated in /home/controlz/public_html/blog/wp-settings.php on line 530

Strict Standards: Declaration of Walker_Page::start_lvl() should be compatible with Walker::start_lvl(&$output) in /home/controlz/public_html/blog/wp-includes/classes.php on line 594

Strict Standards: Declaration of Walker_Page::end_lvl() should be compatible with Walker::end_lvl(&$output) in /home/controlz/public_html/blog/wp-includes/classes.php on line 594

Strict Standards: Declaration of Walker_Page::start_el() should be compatible with Walker::start_el(&$output) in /home/controlz/public_html/blog/wp-includes/classes.php on line 594

Strict Standards: Declaration of Walker_Page::end_el() should be compatible with Walker::end_el(&$output) in /home/controlz/public_html/blog/wp-includes/classes.php on line 594

Strict Standards: Declaration of Walker_PageDropdown::start_el() should be compatible with Walker::start_el(&$output) in /home/controlz/public_html/blog/wp-includes/classes.php on line 611

Strict Standards: Declaration of Walker_Category::start_lvl() should be compatible with Walker::start_lvl(&$output) in /home/controlz/public_html/blog/wp-includes/classes.php on line 705

Strict Standards: Declaration of Walker_Category::end_lvl() should be compatible with Walker::end_lvl(&$output) in /home/controlz/public_html/blog/wp-includes/classes.php on line 705

Strict Standards: Declaration of Walker_Category::start_el() should be compatible with Walker::start_el(&$output) in /home/controlz/public_html/blog/wp-includes/classes.php on line 705

Strict Standards: Declaration of Walker_Category::end_el() should be compatible with Walker::end_el(&$output) in /home/controlz/public_html/blog/wp-includes/classes.php on line 705

Strict Standards: Declaration of Walker_CategoryDropdown::start_el() should be compatible with Walker::start_el(&$output) in /home/controlz/public_html/blog/wp-includes/classes.php on line 728

Strict Standards: Redefining already defined constructor for class wpdb in /home/controlz/public_html/blog/wp-includes/wp-db.php on line 306

Deprecated: Assigning the return value of new by reference is deprecated in /home/controlz/public_html/blog/wp-includes/cache.php on line 103

Strict Standards: Redefining already defined constructor for class WP_Object_Cache in /home/controlz/public_html/blog/wp-includes/cache.php on line 425

Deprecated: Assigning the return value of new by reference is deprecated in /home/controlz/public_html/blog/wp-includes/query.php on line 21

Deprecated: Assigning the return value of new by reference is deprecated in /home/controlz/public_html/blog/wp-includes/theme.php on line 623

Strict Standards: Redefining already defined constructor for class WP_Dependencies in /home/controlz/public_html/blog/wp-includes/class.wp-dependencies.php on line 15

Warning: session_start(): Cannot send session cookie - headers already sent by (output started at /home/controlz/public_html/blog/wp-settings.php:472) in /home/controlz/public_html/blog/wp-content/plugins/si-captcha-for-wordpress/si-captcha.php on line 31

Warning: session_start(): Cannot send session cache limiter - headers already sent (output started at /home/controlz/public_html/blog/wp-settings.php:472) in /home/controlz/public_html/blog/wp-content/plugins/si-captcha-for-wordpress/si-captcha.php on line 31

Strict Standards: call_user_func_array() expects parameter 1 to be a valid callback, non-static method GoogleSitemapGeneratorLoader::Enable() should not be called statically in /home/controlz/public_html/blog/wp-includes/plugin.php on line 311
Lightbox | formatic.cat

Entradas con la etiqueta ‘lightbox’

ThickBox: Ventanas flotantes

Viernes, 3 de Julio de 2009

ThickBox es una librería javascript que permite abrir ventanas flotantes sobre páginas HTML. Esto nos permitirá mostrar imágenes o paginas sobre una ventana emergente y sin necesidad de abrir una ventana nueva, evitando de esa forma también el Bloqueador de popup de nuestro navegador.

thickbox.gif

ThickBox, creado por Cody Lindley y que acaba de llegar a la versión 2.0 es sencilla de utilizar. Primero debes descargar los archivos necesarios para su funcionamiento:

  • jquery.js: Librería necesaria para el funcionamiento e thickbox.
  • thickbox.js: Funciones thickbox para abrir las ventanas.
  • thickbox.css: Hoja de estilos para la ventana emergente.
  • loader.gif: imagen que se mostrará mientras se carga el contenido de la ventana emergente

Entonces una vez que se tienen todos los archivos, lo siguiente es incluir las librerías, la hoja de estilos en nuestro HTML, esto se incluye antes de cerrar el tag HEAD.

  1. <script type="text/javascript" src="jquery.js"></script>
  2. <script type="text/javascript" src="thickbox.js"></script>
  3. <link rel="stylesheet" href="thickbox.css" type="text/css" />

Luego cuando se quiere insertar una pantalla flotante con una imagen, esto se hace sobre un enlace, por ejemplo si deseamos incluir un enlace para abrir una imagen:

  1. <a href=“flash9.gif” class=“thickbox” title=“Ejemplo ThickBox”>

Donde se tiene que class=”thickbox” es el que indica a las librerías thickbox que se abrirá una ventana emergente, el otro dato importante es que lo que se asigne a la propiedad title se mostrará como titulo de la ventana emergente. Resumiendo podemos decir que a cualquier enlace que tengamos en nuestra página solo es necesario aplicarlo el estilo thickbox.

Esto es para el caso de las imágenes, pero si deseamos incluir una página externa, el código cambio poco, donde tenemos que incluir el ancho y el alto de la ventana emergente en la url que se le pasará a la propiedad href, veamos el siguiente ejemplo donde abrimos la página de Google.

  1. <a
    
  2. href="http://www.google.com?TB_iframe=true&height=420&width=600"
  3. title="Google"
  4. class="thickbox">Google</a>

Se observa que el código adicional es ?TB_iframe=true&height=420&width=600, es obvio donde se pone el ancho y alto de la ventana.

Multibox, solución a problema con scrollbars

Martes, 14 de Abril de 2009

Nos hemos encontrado con un problema al utilizar la libreria Multibox para la carga de imagenes y el scrollbar horizontal.

Resulta que cuando incluyes alguna imagen con multibox, en esa sección de la web aparece el scrollbar(barra desplazamiento) horizontal en el navegador y realmente molesta a un diseño de página.

Solución al problema? En una línea(aprox L.40) del fichero Overlay.js pone lo siguiente:

‘frameborder’: 1,

Pues bien, ponle valor 0 y el scrollbar desaparecerá.