结合PHP和jQuery循环图片，匹配id，并在幻灯片中输出图像 - Combine PHP and jQuery to loop over pictures, match IDs, and output images in slideshow

我有以下一段代码。它循环遍历目录中的所有图片，并将它们与之前保存的id进行比较。到目前为止运行良好。

现在我不只是想显示图片，但包括它们在这些花哨的jQuery幻灯片之一(这里我想使用循环插件:http://jquery.malsup.com/cycle/)。PHP代码是在服务器端执行的，我猜这就是为什么到目前为止幻灯片没有按预期工作的原因。对吗?知道我怎样才能把它组合起来，使滑块正常工作吗?或者这在这个组合中是不可能的?

编辑:包围PHP代码的基本jQuery幻灯片Cycle2

<body>
<div class="cycle-slideshow">
    <?php 
    $selection = $_GET["selection"];
    $selectionAsArray = explode(",", $selection);
    //print_r($selectionAsArray);
    $dir="../../img";
    $againAllPics = scandir($dir);
    //set counter to -2 to skip . & ..  & other element in Folder and start
      //with first pictureId = 1
    //loop over all selected Ids and compare them with the counter (Id) 
    //of the freshly loaded pictures from the directory; display them if Ids match
    $i=0;
    for($i; $i < count($selectionAsArray); $i++) {
    $counter =  -2;
        foreach ($againAllPics as $pic) {
        $picinfo = pathinfo($dir."/".$pic); 
            if($selectionAsArray[$i] == $counter) {
            ?>
             <img src="<?php echo $picinfo['dirname']."/".$picinfo['basename'];?>" 
                     width="960" height="540" />
            <?php
            };      
        $counter++;
        }
    }
    ?>
</div>
</body>

编辑:HTML输出

<script type="text/javascript" src="../../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.cycle2.js"></script>
</head>
<body>
<div class="cycle-slideshow">
<img src="../../img/Folie4.jpg" width="960" height="540" />
<img src="../../img/Folie5.jpg" width="960" height="540" />
</div>
</body>

如果我把它放在一个HTML文件中，它工作得很好

既然你的代码已经输出了img标记，为了给你一个如何结合jQuery插件工作的好主意，这就是我要做的:

查看基本示例的源代码:http://jquery.malsup.com/cycle/basic.html，然后用您的代码替换您看到的img标记:

<!DOCTYPE html>
<html>
<head>
<title>JQuery Cycle Plugin - Basic Demo</title>
<style type="text/css">
.slideshow { height: 232px; width: 232px; margin: auto }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
                fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
        });
});
</script>
</head>
<body>
        <div class="slideshow">
<?php 
    $selection = $_GET["selection"];
    $selectionAsArray = explode(",", $selection);
    $dir="../../img";
    $againAllPics = scandir($dir);
    //loop over all selected Ids and compare them with the counter (Id) of 
    //the freshly loaded pictures from the directory; display them if Ids match
    $i=0;
    for($i; $i < count($selectionAsArray); $i++) {
    //skip the . and .. elements
    $counter =  -2;
        foreach ($againAllPics as $pic) {
        $picinfo = pathinfo($dir."/".$pic); 
            if($selectionAsArray[$i] == $counter) {
            ?>
            <img u="image" src="<?php echo $picinfo['dirname']
           ."/".$picinfo['basename'];?>" width="200" height="200" />
            <?php
            };      
        $counter++;
        }
    }
    ?>

        </div>
</body>
</html>

你应该只是能够运行这个，因为你做你的脚本:保存为slideshow.php，并把它放在相同的位置作为你发布的脚本，然后访问http://www.yourwebsite.com/your/dir/slideshow.php。

我已经按照演示制作了200x200px的图像，所以你可能需要编写一些代码来根据相关的宽度和高度比率改变大小。希望这能给你一个如何结合jQuery, HTML和PHP的想法。

你是对的，PHP代码在服务器端执行，其余的将在客户端执行。当您的服务器收到对页面的请求时，PHP将生成HTML，然后作为页面的一部分传递给您。Javascript将被浏览器执行。