WP图库的图库视图绑定,不带NextGen

时间:2013-04-19 作者:dthorpe

是否有将jQuery GalleryView绑定到库存WP库的WP插件?

我喜欢GalleryView的外观,但我不想使用外部图像&;画廊数据库,如NextGen。我只想使用库存WP库、库存WP媒体库,并使用jQuery GalleryView显示附加到特定帖子或页面的图像。

1 个回复
最合适的回答,由SO网友:tfrommen 整理而成

恐怕没有插件,但使用jQuery GalleryView其实并不难。

下载jQuery GalleryView并将cssjs 新文件夹中的文件夹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的基本功能。现在是时候调整一下造型之类的了,我想。。。

结束

相关推荐

Gallery backend only

我正在使用Wordpress为我的网站的博客部分以及我的活动时间表提供支持(使用自定义帖子类型管理区域)。我希望添加创建图像库的选项,并使用自定义标记将其包含在帖子中。我想自己处理整个前端集成,只需使用库插件上传的db数据和文件。有没有什么好的后端专用解决方案可以创建图库,或者我应该自己开发吗?