Cómo utilizar el propio thickbox de WordPress en tu theme y ejemplo práctico para utilizarlo en la página de producto de WooCommerce

Muchas veces optamos por poner una librería externa como fancybox o magnific popup para mostrar imágenes, cuando podemos utilizar la librería thickbox que viene ya en el propio WordPress. Lo único que tenemos que hacer es llamarlo desde nuestro theme, para eso, en el archivo functions.php, utilizando el hook wp_enqueue_scripts incluímos tanto el JS como el CSS de thickbox. Podemos utilizar una función como ésta:

// Enqueue WordPress Thickbox
add_action('wp_enqueue_scripts', 'ow_load_theme_assets');
function ow_include_thickbox() {
wp_enqueue_script('thickbox', FALSE, array(), FALSE, TRUE);
wp_enqueue_style('thickbox');
}

Con eso, se cargará el JS y el CSS de thickbox en todas las páginas de nuestro theme.

Para asignar una imagen concreta a thickbox, simplemente tenemos que añadir la clase thickbox al elemento contenedor de la imagen que queremos, que generalmente es un link a la imagen a tamaño completo. Por ejemplo:

<a class="thickbox" href="http://misitio.com/imgs/imagen-full.jpg">
    <img src="http://misitio.com/imgs/imagen-200x200.jpg" />
</a>

Hasta ahí todo es básico y sencillo, pero a veces, no puedes tocar el HTML que necesitas para agregar a mano la clase thickbox a los elementos que deseas, por ejemplo, estás utilizando Woocommerce y no quieres tocar las plantillas. Para eso también hay solución, que sólo requiere que agregues un poco de javascript a tu theme:

jQuery(function($) {
  tb_init('.woocommerce-product-gallery__image a');
});

Lo que hacemos con esa función, es inicializar thickbox en los elementos que concuerdan con el selector .woocommerce-product-gallery__image a que corresponde con las imágenes por defecto que muestra Woocommerce en la página de producto.

Y por último, para rizar el rizo, podemos hacer que thickbox sepa que está mostrando una galería, y conseguir así que muestre los botones para pasar de una imagen a otra.

// The selector used for thickbox
var thickbox_ele_selector = '.woocommerce-product-gallery__image a';
// If there is more than one image, tell thickbox its a gallery
if ($(thickbox_ele_selector).length>1) {
  $(thickbox_ele_selector).each(function() {
    $(this).attr('rel','attached-to-'+$(this).closest('div.product').attr('id').replace( /^\D+/g, ''));
  });
}

Con este código estamos agregando el atributo rel=»» con el ID del producto a los selectores de thickbox, para que sepa que se trata de una galería. Lógicamente, una vez hecho esto, tenemos que llamar a la función para inicializar thickbox comentada anteriormente. Si lo juntamos todo, quedaría así:

jQuery(function($) { 
// The selector used for thickbox 
var thickbox_ele_selector = '.woocommerce-product-gallery__image a'; 
// If there is more than one image, tell thickbox it is a gallery 
if ($(thickbox_ele_selector).length>1) { $(thickbox_ele_selector).each(function(){ $(this).attr('rel','attached-to-'+$(this).closest('div.product').attr('id').replace( /^\D+/g, '')); }); } 
// Initialise thickbox 
tb_init(thickbox_ele_selector); 
});