Aprovecha jQuery incluido en WordPress

16jul

Aprovecha jQuery incluido en WordPress

Si usas las últimas versiones de WordPress ya te habrás dado cuenta de que cuando eliges el botón del editor para subir una imagen la pantalla se oscurece y te muestra en primer plano la ventana de carga de archivos. Pues bien, eso es jQuery y Thickbox, incluidos en la instalación de WordPress.

Así que ¿por qué no aprovecharlo en vez de instalar un plugin tipo lightbox con el que mostrar a mayor tamaño tus imágenes sin salir de la página?

El proceso es más sencillo de lo que imaginas. Lo primero es configurar las opciones de Objetos en el panel de admin, de este modo podrás definir el tamaño de las miniaturas de las imágenes, lo pones a tu gusto.

Ahora tenemos que modificar el fichero header.php de nuestro theme, añadiéndole, justo antes de lo siguiente:

<?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(); ?>

Es posible que ya la primera y última línea ya las tengas en el fichero header.php, en ese caso simplemente añade las otras 3 entre medias.

Y ya tenemos la infraestructura. Ahora, cuando subamos una imagen en nuestros posts, si queremos aprovechar el jQuery y Thickbox incluidos simplemente haremos lo siguiente:

Subimos la imagen como hacemos normalmente
Elegimos que muestre la miniatura
Nos aseguramos que la miniatura enlazará a la imagen completa
Añadimos la clase Thickbox a la ruta de la imagen

Ya está, ahora cuando hagan clic en la imagen nuestros lectores ya tendrán ese bonito efecto emergente que mostrará la imagen completa sin salir de la página.

Para saber más:

por Fernando en Tutoriales / Trucos, Wordpress.org Experto, jQuery, Thickbox

Pingback: Bitacoras.com
http://www.mediaproweb.com marcosfv

Muy bueno! el articulo, es un aporte significativo. Al menso apara los que no queremos tener una larga lista de plugins
http://www.pcdigital.org Alan

Impresionante!!! voy corriendo a aplicarlo en mis blogs =P

Una pequeña duda… al usar jQuery no será un boom para los procesos del servidor?

http://fernandotellado.com/ Fernando Tellado

Ala, jQuery ya está incluido en tu instalación de WP, solo lo usas.

http://www.pcdigital.org Alan

Bueno… gracias por la respuesta

Igual y me voy a poner a investigar un poco sobre el uso de recursos de jQuery, justo ahora estoy en un reach de visitas importante ( 10,000 por día) y no quiero empezar a tener problemas jeje

http://www.mercadofacil.es Mercado Online de España

No porque JQuery es javascript y corre en el cliente.

Pingback: Aprovecha jQuery incluido en WordPress | Ayuda WordPress
http://agunata.com DavidMG

Genial tip (que raro que a nadie se le haya ocurrido antes xD), pero personalmente no me agrada el efecto de las lightbox y demas .

Alan: Se supone que jQuery es ligero y no debería joder al servidor, espero que alguien más capacitado nos pueda orientar xD.
jaume

Muy bueno y funciona.
“Vaya maquinón…” lo de la mochilera,uff..
leo

Mmmmm…la imagen de la mochila tiene ese efecto? porque yo no lo veo, uso firefox 3.0.11 y acabo de probar en IE8 en una maquina virtual y tampoco se ve.
Saludos

http://fernandotellado.com/ Fernando Tellado

No, yo uso lightbox, manías

http://www.kalabazas.com/blog/ Huds

Estaba probando el ShadowBox, y esta interesante…. pero mejor probare lo que mencionan aquí creo que es un poco mejor…

Es lo malo con tantas funciones nuevas y tantos plug-ins, ya ni sabe uno que es mejor… jeje Saludos
http://www.xlatam.com.ar juani

Muy buen post. hace un tiempo anieto2k escribio una articulo sobre la función wp_enqueue_script que me parecio muy buena, pero a decir verdad nunca la utilice y agregue a mi theme el fancybox para ver las fotos en mi site. se pueden utilizar mas cosas del wp, aca el post http://www.anieto2k.com/2007/08/03/wp_enqueue_script-esa-gran-funcion/
http://www.mujeresfatales.com carlos

Como puedo utilizar esto en una galeria? una galeria completa.. por ejemplo como puedo meter dicho class?… ayudenme por favor.
Pingback: links for 2009-07-18 &raquo Dubo.cl
Julio

Hola. Perdón añadiéndole, justo antes de lo siguiente:

Antes de qué??? Saludos
fcongar

Perdón, me parece una idea estupenda, pero soy bastante ignorante y hay dos cosas que no entiendo bien:

1. Donde dice “… Ahora tenemos que modificar el fichero header.php de nuestro theme, añadiéndole, justo antes de lo siguiente: …”
Creo que hay algún error en la redacción. ¿Antes de dónde hay que añadir las líneas de código? ¿No falta algo entre “antes de” y “lo siguiente”?

2. A continuación del punto “4. Añadimos la clase Thickbox a la ruta de la imagen” las dos líneas siguientes del ejemplo de ruta de la imagen parecen incompletas. ¿Hay que escribirlo todo junto o son dos líneas distintas?

Muchas gracias si me lo podeis aclarar, porque tengo ganas de utilizarlo.

http://fernandotellado.com/ Fernando Tellado

Igual tienes razón, puede que no me haya explicado bien …

1. Es probable que ya tengas las líneas 1 y 5, si es así añade las líneas 2,3 y 4, y sino añade las que falten (la 5 seguro que la tienes)

2. Lo único importante es class="thickbox", el resto es tu enlace normal, por eso no sale completo

fcongar

Muchas gracias por tus explicaciones, Fernando. Al final he caído en la cuenta de que, aparte de modificar el header.php, sólo tenía que incluir class=”thickbox” en el html de la entrada, pero como hasta ahora sólo había usado el editor visual, no me había dado cuenta. Ahora funciona todo a las mil maravillas y es una gozada.
Por favor, elimina del foro una entrada que inicié con el mismo tema y que no tiene ninguna respuesta, porque aquí ya queda perfectamente resuelto.
De nuevo gracias.

http://noticiasaudio.com elcarpo

hola fernando! espectacular este ejemplo como siempre!!

lo estoy usando en un par de sitios, y funciona a la perfeccion…

una sola duda, existira algun modo de hacer que este sea el comportamiento por defecto, sin tener que agregarle el “class=thickbox”?

vi aca http://www.anthonyshapley.co.uk/jquery-lightbox-on-wordpress-simple-install-guide/

esta linea de codigo

$(document).ready(function() { // jQuery LightBox $(’a[@href$=".jpg"]‘).lightBox(); });

como se puede reformular para que agregue el class por defecto?

saludos!
http://www.estudiodedia.com/ Francisco Diaz

Primeramente dar la enhorabuena al equipo de esta fantástica web.

Respecto a este gran truco tengo 2 cuestiones que espero puedan resolver:

1.- Cuando pulso la imagen pequeña (thumbnail) la imagen ampliada sale de manera instantánea en vez de hacerlo poco a poco. He visto otros blogs con WordPress en los que, a pesar de no tener que descargar la imagen grande, el marco y el efecto de sombreado aparecen de manera progresiva, luego mucho más elegante.

2.- Si estoy metido dentro de un post que tiene una imagen con este efecto, al abrirla sale una X (que es una imagen) para cerrar el marco de la imagen grande, sin embargo si estoy en la página principal, en la que se visualizan a la vez los últimos posts, si pulso una imagen con este efecto NO sale la X para cerrar el marco de la imagen grande.

Gracias.

http://www.estudiodedia.com/ Francisco Diaz

En el punto 2, no confundir la imagen de la X que sale cuando estoy viendo la imagen ampliada estando dentro del post (que es la que debería aparecer siempre) con la X que sale cuando estoy viendo la imagen ampliada estando en la página principal (que es la típica X roja que aparece cuando hay un enlace roto a una imagen).

gusiani

Hola, pues yo segui todo como dice en el post pero a mi no me funciona el efecto, me abre la miniatura en una pagina entera como un simple enlace pero nada de efecto lightbox, alguna idea? como te dije hice todo como pone el post mi plantilla es la default en wordpress 2.8.4

http://tremu.webcindario.com/wordpress/ gusiani

O mejor dicho sucede igual que dice Francisco aparece de golpe la imagen haciendo el efecto de oscurecimiento pero sale tan deprisa que parece que se habra en una nueva ventana, como se le podria dar el efecto de progresion al habrirse como lo hace cuando vamos a subir imagenes a nuestra galeria mediante el panel de control, si se supone que es el mismo efecto uno que otro, gracias

Pingback: Lo mejor de la blogósfera en el 2009 | Trazos Web
http://lavidaeninternet.net McVicious

Interesante post, justo estaba buscando un plugin para hacer ese efecto, pero si se puede usar con herramientas ya instaladas (jquery) mejor, lo que si seria muy bueno, es que la class se coloque por default, aparte no es necesario que la imagen sea una miniatura, tambien cuenta con las imagenes que reduzcas de forma manual en el post.

Saludos
Luis

Hola, muy buen post, felicidades por el sitio. El unico inconveniente que veo al dar clic en la imagen que pones de prueba, y revisar con las flechitas la sgte foto salen las imagenes de configuracion de facebook, se pdria evitar eso y mostrar solo las imagnes que uno quiera??
Saludos
http://www.elreydelasahogadas.com Patricia

Pues a mi hay algo que no me funciono… quiero que las imagenes se enlacen entre si en el cuadro donde aparece la imagen en grande, que las pueda ir pasando como en el ejemplo, como en una galería, pero no se como hacerlo, me podrías ayudar por favor???

http://www.ecualia.com.ar Juani

Podes ver el codigo para ver como lo hizo Fernando o ir directamente a al página de Thickbox y seguro que ahi vas a encontrar varios ejemplos de como se hace. Espero que te sea de utilidad.
saludos

Mavesari

HOla, ante todo muchas gracias por las explicaciones. Yo lo estoy intentando pero me es imposible no se hacerlo definitivamente, mi blog es http://www.manolirizofotografia.com sera que no se puede hacer esto en el mio. Para mi seria muy interesante esta opcion, gracias por su ayuda
http://www.facebook.com/people/Rodrigo-Castaneyra/1178094824 Rodrigo Castaneyra

G-nial tip…
solo que no me soluciona el problema que tengo en la actualidad, mi tema ya maneja thickbox por default, nada mas que al activar el plugin nextgen gallery, èste no funciona, alguna solucion o algun plugin para probar si funciona?de antemano Gracias!