How To Add A Lightbox To A WordPress Gallery
August 01, 2011
Updated: 2/29/12
I wanted to setup a simple lightbox photo gallery on a WordPress site (v3.2.1, tested and working on 3.3.1) and, to avoid installing a slew of plugins, I put together a little gallery shortcode function using the built-in WordPress gallery shortcode as my starting point. I’m a big fan of PrettyPhoto, so I modified the output of the gallery shortcode to include a rel= attribute for PrettyPhoto galleries.
I grabbed the standard WordPress gallery shortcode from line ~758 in wp-includes/media.php and pasted it into my_theme/functions.php for modification. For the more adventurous folks you can override the default WordPress gallery shortcode and then galleries you’ve inserted using the Media Gallery will be lightboxed.
This also gives you a good entry point for making other modifications to the standard gallery output.
Here’s the code I ended up with in functions.php (shortened for readability, you’ll want to copy and past the entire block of code below this into your functions.php file):
add_shortcode('my_gallery_shortcode', 'my_gallery_shortcode_function'); function my_gallery_shortcode_function($attr) { foreach ( $attachments as $id => $attachment ) { $link = isset($attr['link']) && 'file' == $attr['link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false); //add rel="prettyPhoto[pp_gal]" //this is my edit $link = str_replace('><img','rel="prettyPhoto[pp_gal]" ><img',$link); $output .= "<{$itemtag} class='gallery-item'>"; $output .= " <{$icontag} class='gallery-icon'> $link </{$icontag}>"; if ( $captiontag && trim($attachment->post_excerpt) ) { $output .= " <{$captiontag} class='wp-caption-text gallery-caption'> " . wptexturize($attachment->post_excerpt) . " </{$captiontag}>"; } $output .= "</{$itemtag}>"; if ( $columns > 0 && ++$i % $columns == 0 ) $output .= '<br style="clear: both" />'; } $output .= " <br style='clear: both;' /> </div>\n"; return $output; } |
My edit was small, I added $link=str_replace('><img','rel="prettyPhoto[pp_gal]" ><img',$link); to the gallery output so that PrettyPhoto can do it’s thing.
Here is the full code to copy and paste into your functions.php file:
add_shortcode('my_gallery_shortcode', 'my_gallery_shortcode_function'); function my_gallery_shortcode_function($attr) { global $post, $wp_locale; static $instance = 0; $instance++; // Allow plugins/themes to override the default gallery template. $output = apply_filters('post_gallery', '', $attr); if ( $output != '' ) return $output; // We're trusting author input, so let's at least make sure it looks like a valid orderby statement if ( isset( $attr['orderby'] ) ) { $attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] ); if ( !$attr['orderby'] ) unset( $attr['orderby'] ); } extract(shortcode_atts(array( 'order' => 'ASC', 'orderby' => 'menu_order ID', 'id' => $post->ID, 'itemtag' => 'dl', 'icontag' => 'dt', 'captiontag' => 'dd', 'columns' => 3, 'size' => 'thumbnail', 'include' => '', 'exclude' => '' ), $attr)); $id = intval($id); if ( 'RAND' == $order ) $orderby = 'none'; if ( !empty($include) ) { $include = preg_replace( '/[^0-9,]+/', '', $include ); $_attachments = get_posts( array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) ); $attachments = array(); foreach ( $_attachments as $key => $val ) { $attachments[$val->ID] = $_attachments[$key]; } } elseif ( !empty($exclude) ) { $exclude = preg_replace( '/[^0-9,]+/', '', $exclude ); $attachments = get_children( array('post_parent' => $id, 'exclude' => $exclude, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) ); } else { $attachments = get_children( array('post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) ); } if ( empty($attachments) ) return ''; if ( is_feed() ) { $output = "\n"; foreach ( $attachments as $att_id => $attachment ) $output .= wp_get_attachment_link($att_id, $size, true) . "\n"; return $output; } $itemtag = tag_escape($itemtag); $captiontag = tag_escape($captiontag); $columns = intval($columns); $itemwidth = $columns > 0 ? floor(100/$columns) : 100; $float = is_rtl() ? 'right' : 'left'; $selector = "gallery-{$instance}"; $gallery_style = $gallery_div = ''; if ( apply_filters( 'use_default_gallery_style', true ) ) $gallery_style = " <style type='text/css'> #{$selector} { margin: auto; } #{$selector} .gallery-item { float: {$float}; margin-top: 10px; text-align: center; width: {$itemwidth}%; } #{$selector} img { border: 2px solid #cfcfcf; } #{$selector} .gallery-caption { margin-left: 0; } </style>"; $size_class = sanitize_html_class( $size ); $gallery_div = "<div id='$selector' class='gallery galleryid-{$id} gallery-columns-{$columns} gallery-size-{$size_class}'>"; $output = apply_filters( 'gallery_style', $gallery_style . "\n\t\t" . $gallery_div ); $i = 0; foreach ( $attachments as $id => $attachment ) { $link = isset($attr['link']) && 'file' == $attr['link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false); //add rel="gal[lightbox]" $link = str_replace("<a","<a rel=\"gal[lightbox]\" ",$link); $output .= "<{$itemtag} class='gallery-item'>"; $output .= " <{$icontag} class='gallery-icon'> $link </{$icontag}>"; if ( $captiontag && trim($attachment->post_excerpt) ) { $output .= " <{$captiontag} class='wp-caption-text gallery-caption'> " . wptexturize($attachment->post_excerpt) . " </{$captiontag}>"; } $output .= "</{$itemtag}>"; if ( $columns > 0 && ++$i % $columns == 0 ) $output .= '<br style="clear: both" />'; } $output .= " <br style='clear: both;' /> </div>\n"; return $output; } |
Now that you have that all you need to do is be sure you’re including the necessary files:
<link rel="stylesheet" type="text/css" media="all" href="<?=bloginfo('template_directory');?>/prettyPhoto/css/prettyPhoto.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script type="text/javascript" src="<?=bloginfo('template_directory');?>/prettyPhoto/js/jquery.prettyPhoto.js"></script> |
And be sure to call PrettyPhoto:
<script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $("a[rel^='prettyPhoto']").prettyPhoto(); }); </script> |
Now all you need to do is upload photos to your gallery and use this shortcode on your page:
[my_gallery_shortcode link="file"] |
And that’s it! A quick solution to adding a lightbox to your WordPress gallery.
Much easier:
add_thickbox();function brentini_add_thickbox($content){
$content = preg_replace('/<img/U', '<img', $content);
return $content;
}
add_filter('the_content', 'brentini_add_thickbox', 2);
Hey Brentini -
That looks like it would work great for adding a Thickbox to all of the images being output by the_content();. What I was trying to do was give the user the option to output a gallery of photos that used PrettyPhoto.
There are definitely a lot of ways to go with it. Thanks for the suggestion!
Richard
very informative. thanks for your code. first i tried the wp-prettyphoto plug-in but it is not worked properly after changing the settings. So i just tried this manual process. thanks u done my day great.
one more thing is please remove the … in your code function my_gallery_shortcode_function($attr). first i directly copied the code as it and my site is down because of the ‘….’ and then i checked the code which i pasted and removed the … from the code. Now it worked well.
Thanks for the note! I’ve applied your suggestion so the code can just be copied and pasted now. Glad you liked it!
Richard Gabriel ,
I applied the above script but the social icons are not displaying in my gallery. may i know how to add the icons.
I’m not exactly sure what you mean but maybe it’s something specific to your site. PrettyPhoto will hide it’s sharing links if you initialize it with ‘social_tools: false’. Maybe that’s what you have set.
I’m a little vague on what exactly goes in as the shortcode link. Need a little more explanation please.
Figured it out. Thanks.
Hey Howard -
Glad you figured it out; I hope you found it helpful!
Richard