I’m working on a theme project this morning and I needed to enable thickbox on the front-end of the site for a few different image galleries created with the gallery shortcode. Here is the solution that I came up with. I believe it to be the easiest way to accomplish this task with the smallest footprint on a WordPress installation. Please let me know your thoughts in the comments section.
wp_enqueue_script( 'thickbox' );
wp_enqueue_style( 'thickbox' );
add_action( 'wp_print_footer_scripts', 'enable_thickbox_for_gallery_shortcode' );
function enable_thickbox_for_gallery_shortcode() {
print <<<EOF
<script type="text/javascript">
/* <![CDATA[ */
jQuery( document ).ready( function( $ ) {
tb_init( '.gallery-icon a' );
});
/* ]]> */
</script>
EOF;
}
Previous + Next
The above solution works well to activate the default functionality of Thickbox. If you would like to take it a step further and activate the previous + next navigation within Thickbox, your links will need a rel attribute defined. The following code seems to work well for this.
add_filter( 'wp_get_attachment_link', 'add_rel_attribute_to_attachment_link', 1, 2 );
function add_rel_attribute_to_attachment_link( $anchor_tag, $image_id ) {
$image = get_post( $image_id );
$rel = '';
if( isset( $image->post_parent ) ) {
$rel = ' rel="attached-to-' . (int) $image->post_parent . '"';
}
if( !empty( $rel ) ) {
$anchor_tag = str_replace( '<a', '<a' . $rel, $anchor_tag );
}
return $anchor_tag;
}



Nice, I’m not great at code, does `tb_init( ‘.gallery-icon a’ );
` mean this will load thickbox script/css only on posts with a gallery?
Hi Steve. Nope. All
tb_init( ‘.gallery-icon a’ );does is tell the thickbox script to open a new thickbox when any link inside an element with the “gallery-icon” class is clicked.