Fancybox为第二个画廊组只显示一个图像

Question

好吧，这里是我有两个画廊和两个rel组。第一个画廊（group1）打开并显示所有图像出现在花式框中。然而，第二个图库（组2）打开时只显示一个图像，当图像中有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。

你可能会更好不是靶向的标签，只是使用的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>