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

Question

好的，我有两个库和两个rel组。第一个画廊（第1组）打开得很好，展示了精美盒子中的所有图像。然而，当集合中有5个图像时，第二个图库（组2）会打开，但只显示一个图像。

 <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。

你最好不要以标签为目标，只使用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>