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>