Flexsliderが、私はこのコードを使用して、各ループのためにACFを用いて活性化flexslider持つダイナミックなアイテムで

Question

を同期していない：私は、

$(window).load(function() { 
    // The slider being synced must be initialized first 
    $('#gallerycarousel').flexslider({ 
     animation: "slide", 
     controlNav: false, 
     animationLoop: false, 
     slideshow: false, 
     directionNav: true, 
     itemWidth: 300, 
     itemMargin: 10, 
     animationLoop: true, 
     asNavFor: '#galleryslider' 
    }); 

    $('#galleryslider').flexslider({ 
     animation: "slide", 
     controlNav: false, 
     animationLoop: false, 
     slideshow: false, 
     directionNav: true, 
     sync: "#gallerycarousel" 
    }); 

}); 


<div class="flexslider" id="galleryslider"> 
    <ul class="slides"> 

    <?php 
    $gallery = get_field('fullgallery'); 

     foreach($gallery as $galleryImage): 
     $image = $galleryImage['url']; ?> 

      <li style="background-image: url('<?php echo $image; ?>')"></li> 

     <?php endforeach; ?> 

    </ul> 
</div> 

<div class="flexslider" id="gallerycarousel"> 
    <ul class="slides"> 

     <?php 
     foreach($gallery as $galleryImage): 
     $image = $galleryImage['url']; 
     ?> 

      <li style="background-image: url('<?php echo $image; ?>'); background-size: cover;"> 

       <div class="viewImg"> 
        <a class="fancybox" rel="gallery1" href="<?php echo $image; ?>" title="<?php echo $galleryImage['caption']; ?>"><i class="fa fa-search"></i></a> 
       </div> 

      </li> 

      <meta property="og:image" content="<?php echo $galleryImage['url']; ?>" /> 
     <?php endforeach; ?> 

    </ul> 
</div> 

私の問題は、サムネイルをクリックするだけで、それは間違っている大きな画像に私を取ることですがflexsliderを再ダウンロードしようとしましたが、運が悪いので、各ループのforループを静的なアイテムで置き換えようとしましたが、それは修正するようです。

foreachループで動作させる方法が不明ですが、誰にもこの解決策がありますか？

Answer 1

これを削除しているようです：<meta property="og:image" content="<?php echo $galleryImage['url']; ?>" />問題を修正しました。