恐怕没有插件,但使用jQuery GalleryView其实并不难。
下载jQuery GalleryView并将css
和js
新文件夹中的文件夹galleryview
在主题文件夹中。
设置列表jQuery GalleryView需要一个无序的列表,因此我们必须更改库输出:
add_filter( \'post_gallery\', \'my_post_gallery\', 10, 2 );
function my_post_gallery($output, $attr) {
global $post, $wp_locale;
static $instance = 0;
$instance++;
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,
\'columns\' => 3,
\'size\' => \'thumbnail\',
\'include\' => \'\',
\'exclude\' => \'\',
\'ids\' => \'\' // WP gallery shortcode uses ids="1,2,3"
), $attr));
$id = intval($id);
if ( \'RAND\' == $order )
$orderby = \'none\';
if ( empty($include) )
$include = $ids;
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 \'\';
$columns = intval($columns);
$itemwidth = $columns > 0 ? floor(100/$columns) : 100;
$float = is_rtl() ? \'right\' : \'left\';
$selector = "gallery-{$instance}";
$output = apply_filters(\'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>
<ul id=\'$selector\' class=\'gallery galleryid-{$id}\'>");
$i = 0;
foreach ( $attachments as $id => $attachment ) {
$image = wp_get_attachment_image($id);
$output .= "<li class=\'gallery-item\'>";
$output .= $image;
$output .= "</li>";
if ( $columns > 0 && ++$i % $columns == 0 )
$output .= \'<br style="clear: both" />\';
}
$output .= "
<br style=\'clear: both;\' />
</ul>\\n";
return $output;
}
Note: 当然,你可以/必须根据自己的喜好定制。
将脚本和样式表排队让WordPress知道我们需要什么JS和CSS文件,以及在哪里可以找到它们:
add_action(\'wp_enqueue_scripts\', \'enqueue_galleryview_stuff\');
function enqueue_galleryview_stuff() {
wp_enqueue_script(
\'jquery-ui-min\',
\'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js\',
array(\'jquery\')
);
wp_enqueue_script(
\'jquery-timers\',
get_template_directory_uri().\'/galleryview/js/jquery.timers-1.2.js\',
array(\'jquery-ui-min\')
);
wp_enqueue_script(
\'jquery-easing\',
get_template_directory_uri().\'/galleryview/js/jquery.easing.1.3.js\',
array(\'jquery-timers\')
);
wp_enqueue_script(
\'jquery-galleryview\',
get_template_directory_uri().\'/galleryview/js/jquery.galleryview-3.0-dev.js\',
array(\'jquery-timers\', \'jquery-easing\')
);
wp_enqueue_style(
\'jquery-galleryview\',
get_template_directory_uri().\'/galleryview/css/jquery.galleryview-3.0-dev.css\'
);
}
打印jQuery代码要使GalleryView正常工作,我们必须将函数绑定到所需的库:
add_action(\'wp_footer\', \'print_galleryview_jquery\');
function print_galleryview_jquery() {
echo <<<JQUERY
<script type="text/javascript">
jQuery(document).ready(function($) {
$(\'ul[class^="galleryid-"],ul[class*="galleryid-"]\').galleryView();
});
</script>
JQUERY;
}
Note: 我正在使用
wp_footer
钩住这里。
到目前为止,您的WordPress图库应该附带GalleryView的基本功能。现在是时候调整一下造型之类的了,我想。。。