如何将文件夹中的所有图像放入CSS框中

Question

我有一个问题是从文件夹加载所有图像并在一个CSS框中显示所有图像（以html格式）。

我想制作像视频或gif这样的所有图像。

因此每个图像将交替出现，直到显示最后一个图像。

这是我的php代码：

camera.php

<?php 

$img_dir = "image/";
$images = scandir($img_dir);
$html = '';
$html .='<ul>';

foreach($images as $img) { 
    if($img === '.' || $img === '..') {continue;}         

    if (  (preg_match('/.jpg/',$img))  ||  (preg_match('/.gif/',$img)) || (preg_match('/.tiff/',$img)) || (preg_match('/.png/',$img)) ){                

        $html .='<li><img src="'.$img_dir.$img.'" ></li>' ; 
    } else { continue; }    
} 

    $html .='</ul>' ; 

    echo $html ;

?>

这是我的jquery代码：

jquery.custom.js

jQuery('document').ready(function() {
  $.ajax({            
     url: "camera.php", 
    type: "POST",          
    dataType: "HTML", 
        success: function( data ) { 
    jQuery('body').append(data);
        },
        error: function(jqXHR, data ) {        
    alert ('Ajax request Failed.');    
    }
    }); 
});

这是我的CSS框：

 #myGallery{
  position:relative;
  width:800px; /* Set your image width */
  height:500px; /* Set your image height */
}

我可以让所有图片都显示出来，但我不知道如何在CSS框中显示所有图像，并使所有图像都像一个视频。

我还有200张照片。

感谢您的帮助。

Answer 1

对于camera.php，您需要以ajax调用可以正确读取的格式返回数据。假设对图像的调用正确返回，您可以执行以下操作：

---

的 camera.php

$img_dir = "image/";
$images = scandir($img_dir);

$pictures = array();
foreach($images as $img) { 
    // Not sure how these are returning, so I'm making a guess after looking at your code
    $picture = array(
        "img" => $img_dir.$img
    );
    $pictures[] = $picture;
}

echo json_encode($pictures);

---

对于jQuery，您需要将dataType指定为json才能正确返回。您还需要在成功返回时将所需的html和数据附加到正文，然后在完成后调用动画的函数。

的 jquery.custom.js

jQuery('document').ready(function() {

    var i = 0;

    var request = $.ajax({            
        url: "camera.php", 
        type: "POST", 
        dataType: "json",
        success: function(pictures){
            var html = '<ul'>;
            $.each(pictures, function(idx, picture){
                html += '<li><img src="'+picture.img+'"></li>'
            });
            html += '</ul>';
            $('body').append(html);
       }
    });

    request.done({
        loopThruImg();
    });

    function loopThruImg() {
        var li = $('li');
        li.eq(i).animate({
            opacity: 1
        }, 100, function () {
            li.eq(i).delay(1000).animate({
                opacity: 0
            }, 100, function () {
                i = i < (li.length - 1) ? i+1 : 0;
                loopThruImg(i);
            });
        });
    }
});

---

一些有用的CSS

   ul {
        list-style-type:none;
        position: relative;
    }
    li {
        position:absolute;
        top:0;
        opacity:0;
    }

JSFiddle for the animation

Awesome Stackoverflow answer that I borrowed heavily from