img_tuto_wordpress

jQuery, de serie, en Wordpress

17 Julio 2009
Macgrafic
2 comentarios
571 VISITAS

¿Tenéis instalado en vuestro blog Wordpress algún plugin tipo lightbox para visualizar las imágenes más grandes sin cambiar de página?…

Desde AyudaWordpress nos explican que desde las actuales versiones de wordpress, viene instalado jQuery y Thickbox, que son los encargados de mostrar el efecto similar a lightbox. Un ejemplo sencillo es cuando seleccionamos el icono de “Subir/Insertar” una imagen desde nuestro editor de wordpress, se nos oscurece la pantalla y muestra en primer plano la ventana de carga de archivos.
Pues bien, podemos utilizar jQuery y Thickbox para nuestras imágenes.

Es bastante sencillo, primero de todo nos tenemos que ir a las Opciones de Objetos en nuestro panel de administración, para editar el tamaño de las miniaturas y el tamaño grande de las imágenes.

Thickbox001

Ahora editaremos el “header.php” de nuestro theme y añadimos las siguientes lineas.

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_enqueue_style('thickbox'); ?>
<?php wp_enqueue_script('jquery'); ?>
<?php wp_enqueue_script('thickbox'); ?>
<?php wp_head(); ?>

Ahora ya tenemos hechas las llamadas al código jQuery y Thickbox y es hora de subir las imagenes y aplicarle la clase Thickbox.
1. Subimos la imagen como normalmente hacemos.
2. En las opciones de insertar la imagen, seleccionamos que la inserte como miniatura y nos aseguramos que tenga la “URL de enlace” de la imagen subida al servidor.

Thickbox002
3. En la linea del código del enlace la imagen añadimos la clase Thickbox

<a class="thickbox" href="http://www.macgrafic.com/wp-content/archivos/Thickbox001.jpg">
<img src="http://www.macgrafic.com/wp-content/archivos/Thickbox001-178x99.jpg" />
</a>

Cuando insertemos una imagen y le asignemos la clase “thickbox” ya tendremos el efecto definido.

Palabras tags


Comparte esta entrada:

  • del.icio.us
  • Facebook
  • Mixx
  • email
  • LinkedIn
  • NewsVine
  • Reddit
  • RSS
  • StumbleUpon
  • Technorati
  • Twitter
  • Yahoo! Buzz

2 comentarios en “jQuery, de serie, en Wordpress”

  1. gurusam
    30 Jul, 2010

    el ejemplo no funciona ‘¿?¿

    • Macgrafic
      30 Jul, 2010

      Gurusam no funciona porque no lo tengo activado. Al cambiar el diseño de Macgrafic tuve que hacer cambios.
      Saludo y gracias por el aviso !

Escribe un comentario

Insertar número página automaticamente en Indesign CS3 - 16,336 VISITAS Crear gif animado en Photoshop CS3 - 12,643 VISITAS Trípticos y dípticos. Documentos de plantillas para Indesign - 6,274 VISITAS Definir estilos de parrafo y caracter en Indesign CS3 - 5,545 VISITAS 20 increibles videos creados con la Canon 7D - 3,728 VISITAS