Question

我正在构建一个WordPress网站，我想要一个全屏主页背景滑块。我非常喜欢这里的jQuery backstretch插件：https://github.com/srobbin/jquery-backstretch

（如果你快速查看它是如何工作的，请在Demo下拉列表中选择第二个。）

要使插件正常工作，您需要使用此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; ?>'

Answer 1

我设法使用以下代码：

        <?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的帮助

Answer 2

这取决于这些图片与帖子/选项的关联方式，这在您的问题中并不明确。你在那里建议的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>

jQuery Backstretch和PHP

2 个答案: