1

我正在构建一个 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; ?>'
4

2 回答 2

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

于 2013-09-27T11:59:29.290 回答
0

这取决于这些图像如何与帖子/选项相关联，这在您的问题中并不清楚。您在那里建议的 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-27T09:19:07.020 回答