jQuery Backstretch和PHP

我正在構建一個WordPress網站，我想要一個全屏主頁背景滑塊。我真的很喜歡jQuery的直道插件在這裏：https://github.com/srobbin/jquery-backstretch jQuery Backstretch和PHP

（如果你看看它是如何工作有一個快速瀏覽一下，選擇在演示下拉第二）

爲了讓你需要使用插件工作這JS片段：

  <script>    
     $.backstretch([ 
       "http://dl.dropbox.com/u/515046/www/outside.jpg" 
      , "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg" 
      , "http://dl.dropbox.com/u/515046/www/cheers.jpg" 
      ], {duration: 3000, fade: 750}); 
     </script>

正如你所看到的，圖像需要在JS中聲明。我需要能夠上傳儘可能多的圖像，運行一個循環來獲取每個圖像的URL，然後顯示它們。我需要通過PHP傳遞這些信息。

的PHP代碼段獲取每個圖像將是：<?php the_field('background_image'); ?>

我怎樣才能改變腳本來運行一個循環，並通過PHP獲得圖像/秒？

在此先感謝

編輯：

這是循環顯示所有使用ACF插件我的圖片和選項頁附加：「

<ul> 

    <?php while(has_sub_field('slider_images','option')): ?> 

     <li><img src="<?php the_sub_field('slider_image'); ?>" /></li> 

    <?php endwhile; ?> 

    </ul> 

<?php endif; ?>'

來源

2013-09-26 Huw Rowlands

這取決於如何這些圖像與帖子/選項相關聯，這是不明確的問題。您建議的PHP看起來像是附加到單個頁面上的選項，而不是陣列中充滿圖像的選項。但是，爲了您的示例，我們假設您想從名爲home_slider的自定義帖子類型的前5個帖子中拉出背景圖片並使用它們;

 <?php 

      $imgList = ''; 

      $homeslider_query = new WP_Query(array('post_type' => 'home_slider', 'numberposts' => '5', 'orderby' => 'menu_order', 'order' => 'ASC')); 

      if ($homeslider_query->have_posts()) : 
       while ($homeslider_query->have_posts()) : $homeslider_query->the_post(); 

        // Build your list of images 
        $imgList .= '"'. the_field('background_image') .'",'; 

       endwhile; 
      endif; 

      // Trim trailing comma from list 
      $imgList = rtrim($imgList, ','); 

     ?>

現在，你有腳本標記出現，告訴我的JS在頁面本身，可能是頭部，而不是.js文件等等;

 <script>    
     $.backstretch([ 
       <?php echo $imgList; ?> 
      ], {duration: 3000, fade: 750}); 
     </script>

來源

2013-09-27 09:19:07 McNab

這似乎是非常接近我所需要的。對不起，我應該多說一點。我將使用高級自定義字段從「選項」頁面調用圖像。（請參閱上面的我的php循環） –

你看過文檔嗎？ - http://www.advancedcustomfields.com/resources/field-types/image/ – McNab

它看起來像你應該使用get_field，它看起來不像它返回的圖像數組，但包含一個圖像和關聯的數組信息。這個問題實際上是關於高級自定義字段。 – McNab

我設法用下面的代碼來做到這一點：

 <?php 

     $images = get_field('bg_images','option'); 

      if ($images): 

       foreach($images as $image): ?> 

       <?php $imageList .= '"'. $image['url'] .'",'; ?> 

      <?php endforeach; 
      endif; 

     $imageList = rtrim($imageList, ','); 

    ?> 

     <script>    
    $.backstretch([ 
      <?php echo $imageList; ?> 
     ], {duration: 3000, fade: 750}); 
    </script>

感謝您的幫助@mcNab

來源

2013-09-27 11:59:29

jQuery Backstretch和PHP

回答

相關問題