If you need to add rel="fancybox" in the standard wordpress gallery, then this is a lesson for you.
Firstly what we need to do, its enqueue fancybox script, add image sizes for thumbnail and big picture and change implementation of gallery shortcode by default.
NOTE: My theme called 'htmlcms' so all function start with this prefix.
Let's create two image size: first for gallery thumbnail, second - fancybox full picture.
Because wordpress doesn't have restrictions for image sizes in upload form, we need to change size of full image.
/**
* Implements after_setup_theme action.
*/
function htmlandcms_setup() {
add_image_size( 'gallery-small', 355, 240, TRUE );
add_image_size( 'gallery-big', 710, 480, TRUE );
}
add_action( 'after_setup_theme', 'htmlandcms_setup' );
Then we need to register fancybox script.
/**
* Implements wp_head action.
*/
function htmlandcms_wp_head() {
wp_register_script('fancybox', get_bloginfo('template_url') . '/js/fancybox/jquery.fancybox-1.3.4.js');
wp_enqueue_script('fancybox');
}
add_action('wp_head', 'htmlandcms_wp_head');
Now when fancybox is registered, let make some changes in gallery.
I just copy default implementation (see gallery_shortcode() function), and set param 'size' as 'gallery-small' by default.
When you add gallery shortcode in post body you can add param size, by default size=thumbnail.
It need because in next step i find all link to picture with size 'gallery-small' and wrap output with link which linked to image with size gallery-big.
/**
* Change image style for galleries added by shortcodes.
*
* @param string $output
* @param array $attr
* @return array
* Changed attributes
*/
function htmlandcms_gallery_shortcode($output, $attr) {
$post = get_post();
static $instance = 0;
$instance++;
if ( ! empty( $attr['ids'] ) ) {
// 'ids' is explicitly ordered, unless you specify otherwise.
if ( empty( $attr['orderby'] ) )
$attr['orderby'] = 'post__in';
$attr['include'] = $attr['ids'];
}
// 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' => 'div',
'icontag' => 'div',
'captiontag' => 'p',
'columns' => 3,
'size' => 'gallery-small',
'include' => '',
'exclude' => ''
), $attr));
/**
* @var $size string
* @var $columns int
* @var $icontag string
* @var $captiontag string
* @var $itemtag string
* @var $orderby string
* @var $orderby string
* @var $order string
* @var $include int
* @var $exclude int
* @var $id int
*/
$id = intval($id);
if ( 'RAND' == $order )
$orderby = 'none';
if ( !empty($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) ) {
$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 )
/** @var $size string */
$output .= wp_get_attachment_link($att_id, $size, TRUE) . "\n";
return $output;
}
$itemtag = tag_escape($itemtag);
$captiontag = tag_escape($captiontag);
$icontag = tag_escape($icontag);
$valid_tags = wp_kses_allowed_html( 'post' );
if ( ! isset( $valid_tags[ $itemtag ] ) )
$itemtag = 'dl';
if ( ! isset( $valid_tags[ $captiontag ] ) )
$captiontag = 'dd';
if ( ! isset( $valid_tags[ $icontag ] ) )
$icontag = 'dt';
$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};
text-align: center;
width: {$itemwidth}%;
}
</style>
<!-- see gallery_shortcode() in wp-includes/media.php -->";
$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 = wp_get_attachment_link($id, $size, FALSE, FALSE);
$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;
}
add_filter('post_gallery', 'htmlandcms_gallery_shortcode', 10, 2);
Now implement final hook.
/**
* Implements 'wp_get_attachment_link' filter.
*
* @param string $default
* @param int $id
* @param int $size
* @param string $permalink
* @param string $icon
* @param string $text
* @return string
*/
function htmlandcms_get_attachment_link($default, $id, $size, $permalink, $icon, $text) {
$id = intval( $id );
$_post = & get_post( $id );
if ( empty( $_post ) || ( 'attachment' != $_post->post_type ) || ! $url = wp_get_attachment_url( $_post->ID ) )
return __( 'Missing Attachment' );
$post_title = esc_attr( $_post->post_title );
if ( $text )
$link_text = $text;
elseif ( $size && 'none' != $size )
$link_text = wp_get_attachment_image( $id, $size, $icon );
else
$link_text = '';
if ( trim( $link_text ) == '' )
$link_text = $_post->post_title;
if($size == "gallery-small" && wp_script_is('fancybox', 'queue')) {
$url = wp_get_attachment_image_src($id, 'gallery-big');
return "<a href='{$url[0]}' rel='fancybox' title='$post_title'>$link_text</a>";
}
return $default;
}
add_filter('wp_get_attachment_link', 'htmlandcms_get_attachment_link', 10, 6);
That's all. Don't forget rate this post ;)