从自定义wordpress库中的一个缩略图打开多个图像

时间:2013-09-02 05:41:05

标签: jquery wordpress themes lightbox

我使用WP的高级自定义字段插件为我的主题制作了自定义图库选项。它允许用户将图像上传到自定义页面,在单击时打开灯箱以显示完整大小的图像。我现在要做的是使用一个缩略图打开一个图像库。在页面上显示的唯一缩略图将是一个让用户知道里面是什么的缩略图。任何帮助将不胜感激。

2 个答案:

答案 0 :(得分:0)

您可以采用传统方式(创建链接到全尺寸图像的缩略图列表并使用类似Fancybox的内容显示)并隐藏除缩略图之外的所有缩略图(请参阅Fancybox FAQ),尽管不是如果画廊将拥有超过一些图像,那么对带宽有好处;或者您可以使用thumnbail启动模态窗口并从那里拉入画廊。因此缩略图会在模态窗口中打开模板文件,如下所示:

<a href="lightbox.php?galleryID=1" rel="fancybox" />

然后lightbox.php可以从网址获取galleryID并以您认为合适的任何风格创建图库。

答案 1 :(得分:0)

我知道这有点过时了,但是我一直在寻找同样的东西,最终弄明白了。以为我分享了。

使用ACF和WordPress的Easy FancyBox插件,我创建了以下查询(出于我的目的,我使用自定义帖子类型,但显然这适用于任何类型的帖子)。

<?php
     $my_query = new WP_Query( array( 
         'post_type'        => 'YOUR-CUSTOM-POST-TYPE', 
         'posts_per_page'   => 15, ) ); 
                while ( $my_query->have_posts() ) { 
                    $my_query->the_post();
                    $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($my_query->ID), 'full' );
                    $url = $thumb['0']; 
                    $images = get_field('gallery', $my_query->ID);
?>
                    <a href="<?php echo $url; ?>" rel="gallery-<?php echo $post->ID; ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
                    <div class="fancybox-hidden">
                        <?php if( $images ) {
                                foreach( $images as $image ) { ?>
                                    <a href="<?php echo $image['url']; ?>" rel="gallery-<?php echo $post->ID; ?>"><img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" title="<?php echo $image['title']; ?>"/></a>   
                        <?php } } ?>
                    </div>

<?php } ?>

需要在Easy FancyBox设置(Admin&gt; Media)下禁用自动图库功能,以便考虑rel =。当然,拇指尺寸等可以根据您的需要进行修改。

希望这有助于其他人!

欢呼声,

-jennyb