Question

好的，这就是我有两个画廊和两个相关团体的事情。第一个图库（group1）打开很好，显示了精美框中的所有图像。但是，第二个图库（group2）会打开，但当集合中有5个图像时，只显示一个图像。

 <div class="col-md-2 col-sm-3 pd0 width33 bdr_phmnsgg" style="margin-left:20px;">
 <span class="font14 photo_menu_heading pd_top10 pd_bot10 dsp_block">
 Photo Gallery
 </span>
 <?php $items = get_post_meta($post->ID, 'g_tourism_gimage', false); 
 $i=0;
 ?>
 <?php foreach ( $items as $item) { 
 if($i==0){
 ?>
 <a  href="<?php echo wp_get_attachment_url( $item,'full' ); ?>" class="grouped_elements" rel="group1" >
 <?php echo wp_get_attachment_image( $item); ?>
 </a>
 <?php }else{
 ?>
 <a href="<?php echo wp_get_attachment_url( $item,'full' ); ?>" style="display:none;" class="grouped_elements" rel="group1" >
 <?php echo wp_get_attachment_image( $item ); ?>
 </a>
 <?php } $i++;

 } ?>
 </div>
 <div class="col-md-2 col-sm-3 pd0 width33 mrgn_btm10 bdr_phmnsgg1" style="margin-left:20px; margin-right:20px;">
 <span class="font14 photo_menu_heading pd_bot10 pd_top10 dsp_block">Menu</span>
 <?php $menus = get_post_meta($post->ID, 'goan_tourism_menuimage', true); 
 ?>

 <a href="<?php echo wp_get_attachment_url( $menus,'full' ); ?>" class="grouped_elements fancybox" rel="group2"><?php echo wp_get_attachment_image( $menus); ?></a>
 </div>

以下是jquery声明：

<script>
$("a.grouped_elements").fancybox();
</script>

这是经过编辑的代码：抱歉延迟只是检查我之前的做法

  <div class="col-md-2 col-sm-3 pd0 width33 mrgn_btm10 bdr_phmnsgg1">
  <span class="font14 photo_menu_heading pd_top10 pd_bot10 dsp_block">
 Menu
 </span>
 <?php $items = get_post_meta($post->ID, 'goan_tourism_menuimage', true); 
 $j=0;
 ?>
 <?php foreach ( $menus as $menu) { 
 if($j==0){
 ?>
 <a  href="<?php echo wp_get_attachment_url( $menu,'full' ); ?>" class="grouped_elements fancybox" id="group2" rel="group2" >
 <?php echo wp_get_attachment_image( $menu); ?>
 </a>
 <?php }else{
 ?>
 <a href="<?php echo wp_get_attachment_url( $menu,'full' ); ?>" style="display:none;" id="group2" class="grouped_elements fancybox" id="group2" rel="group2" >
 <?php echo wp_get_attachment_image( $menu ); ?>
 </a>
 <?php } $j++;

 } ?>
 </div>

Answer 1

看起来你没有在第二个链接上循环，所以你实际上只输出一个图像。您需要在代码中添加另一个foreach。

你可能最好不要定位a标签，只使用像这样的fancybox类......

<a  href="<?php echo wp_get_attachment_url( $item,'full' ); ?>" class="grouped_elements fancybox" rel="group1">

和

<a  href="<?php echo wp_get_attachment_url( $menus,'full' ); ?>"class="grouped_elements fancybox" rel="group2">

然后像这样调用Fancybox

<script>
    jQuery(".fancybox").fancybox();
</script>

以下完整编辑的代码

 <div class="col-md-2 col-sm-3 pd0 width33 bdr_phmnsgg" style="margin-left:20px;">
<span class="font14 photo_menu_heading pd_top10 pd_bot10 dsp_block">Photo Gallery</span>

 <?php 
    $items = get_post_meta($post->ID, 'g_tourism_gimage', false); 
    $i=0;
 ?>
<?php foreach ( $items as $item) { 
    if($i==0){
?>
    <a href="<?php echo wp_get_attachment_url( $item,'full' ); ?>" class="grouped_elements fancybox" rel="group1"><?php echo wp_get_attachment_image( $item); ?></a>
<?php } else { ?>
    <a href="<?php echo wp_get_attachment_url( $item,'full' ); ?>" style="display:none;" class="grouped_elements fancybox" rel="group1"><?php echo wp_get_attachment_image( $item ); ?></a>
<?php } $i++;
 }
?>
 </div>

 <div class="col-md-2 col-sm-3 pd0 width33 mrgn_btm10 bdr_phmnsgg1" style="margin-left:20px; margin-right:20px;">
     <span class="font14 photo_menu_heading pd_bot10 pd_top10 dsp_block">Menu</span>
        <?php $menus = get_post_meta($post->ID, 'goan_tourism_menuimage', true); 

foreach ( $menus as $menu) { ?>
            <a href="<?php echo wp_get_attachment_url( $menu,'full' ); ?>" class="grouped_elements fancybox" rel="group2"><?php echo wp_get_attachment_image( $menu); ?></a>
<?php } ?>
 </div>

<script>
    jQuery(".fancybox").fancybox();
</script>

您的第二个链接中的类属性之前看起来也错过了一个空格，请更新到下面。

<a href="<?php echo wp_get_attachment_url( $menus,'full' ); ?>" class="grouped_elements fancybox" rel="group2"><?php echo wp_get_attachment_image( $menus); ?></a>

第二个图库组的Fancybox仅显示一个图像

1 个答案: