基于ID提取图像

时间:2015-06-25 20:27:58

标签: php html css

我有一个滑块(flexslider),我用它来显示下面jsfiddle中显示的图像...我优化了滑块,以便从某个目录动态提取图像。它工作正常,所有图像都被提取出来。 现在在我的文件夹中,图像被命名为1023,2045,304654,50等... 如何指定以“1”开头的图像(可以是14,1040,10000.100000等...)是仅提取的图像?

更新(更多说明):我根据每个图像名称的第一个数字提取的原因是因为我将在菜单的所有元素中使用滑块。因此,如果我点击元素“aaaa”以1开头的图像出现,如果我点击“bbbbbb”,则以2开头的图像出现,依此类推。

JSFIDDLE:https://jsfiddle.net/atkumqpk/1/

PHP代码:

         function get_slide_images($folder, $images_per_slide = 10)
{

    $slide_images = false;

    if (file_exists($folder)) {

        // valid extensions
        $extensions = array(
            "jpg",
            "gif",
            "jpeg",
            "svg",
            "png",
            "bmp"
        );

        foreach (new DirectoryIterator($folder) as $file_key => $file) {

            // Don't bother
            if (!in_array($file->getExtension(), $extensions)) {
                continue;
            }

            // Grab file details
            $filename    = $file->getFilename();
            $file_folder = $folder . "/" . $filename;

            // Store the image to the Slide
            $slide_images[$filename] = "<img src='{$file_folder}' alt='{$file_folder}' />";

        }

        if (!empty($slide_images)) {
            ksort($slide_images);
            $slide_images = array_chunk($slide_images, $images_per_slide);
        }

    }
    return $slide_images;
}

//end of php 

        <div id="logo" class="logo" ><img src="logo.png"/></div>
        <p class="custom-class"><a href="">Go to the main website</a></p>

        <div id="menu" class="menu">
        <ul class="headlines">
              <li id="item1">
        <button>aaaaaaaa</button>
    </li>
    <li id="item2">
        <button>bbbbbbb</button>
    </li>
    <li id="item3">
        <button>ccccccc</button>
    </li>
    <li id="item4">
        <button>dddddddd</button>
    </li>
    <li id="item5">
        <button>eeeeeee eee.</button>
    </li>
    <li id="item6">
        <button>ffffff</button>
    </li>
    <li id="item7">
        <button>ggggggg</button>
    </li>

        </ul>
        </div>


     <div id="container">
<div id="first" class="inner-container">
   <div id="item11" class="item"> <a name="item11"></a>

                <div class="flexslider">

  <ul class="slides">



$slider_kvp = get_slide_images("images", 10);

/**
* Here we are going to generate the SLIDES
*/
if($slider_kvp) {

    $slider_list_html = array();

    foreach($slider_kvp as $slider_key => $slide_images) {

        $html_LI_list = "";
        $html_LI_list = "<li>";

        // Go through each image ...
        foreach($slide_images as $image_key => $image_value) {
            $html_LI_list .= $image_value;
        }

        $html_LI_list .= "</li>";

        $slider_list_html[$slider_key] = $html_LI_list;

    }

    // OUR SLIDES!
    $rendered_slider_list_html = implode(' ', $slider_list_html);
    echo "<ul class='slides'>{$rendered_slider_list_html}</ul>";

}



  </ul>
</div>
            </div>
        </div>
    <div id="second" class="inner-container">
      <div id="item22" class="item"> <a name="item22"></a>

              <div class="flexslider">
  <ul class="slides">



$slider_kvp = get_slide_images("images", 10);

/**
* Here we are going to generate the SLIDES
*/
if($slider_kvp) {

    $slider_list_html = array();

    foreach($slider_kvp as $slider_key => $slide_images) {

        $html_LI_list = "";
        $html_LI_list = "<li>";

        // Go through each image ...
        foreach($slide_images as $image_key => $image_value) {
            $html_LI_list .= $image_value;
        }

        $html_LI_list .= "</li>";

        $slider_list_html[$slider_key] = $html_LI_list;

    }

    // OUR SLIDES!
    $rendered_slider_list_html = implode(' ', $slider_list_html);
    echo "<ul class='slides'>{$rendered_slider_list_html}</ul>";

}


  </ul>
</div>
            </div>
        </div>

4 个答案:

答案 0 :(得分:13)

有多种方法可以实现这一点,但一种方法是过滤函数迭代的文件名。而不是foreach (new DirectoryIterator($folder) as $file_key => $file) { ... }块,你可以做类似的事情:

foreach (glob($folder.'/'.'1*') as $filename) {
    $slide_images[$filename] = "<img src='{$filename}' alt='{$filename}' />";
}

glob位匹配$folder内以“1”开头的所有内容(您也可以通过指定,例如“1 * .png”将其限制为PNG)

这样做的好处是只查看你真正想要的文件,这比迭代查看所有内容并查看其文件名的替代方法更有效。

更新:如果您希望能够更改“启动时”过滤器(因此它并非总是“1”),您可以为您的函数添加额外的参数,如下所示:< / p>

function get_slide_images($folder, $images_per_slide = 10, $starts_with = '') {

...然后更改foreach部分(上图)以便它使用它:

foreach (glob("{$folder}/{$starts_with}*") as $filename) {

...然后你可以这样调用你的函数:

$slider_kvp = get_slide_images("images", 10, "1");

...其中第三个参数(“1”)指定您想要的文件应该从哪个开始。 (如果在没有第三个参数的情况下调用该函数,您将获得该文件夹中的所有文件,就像您目前所做的那样)。因此,您的get_slide_images函数可能类似于:

function get_slide_images($folder, $images_per_slide = 10, $starts_with = '')
{

    $slide_images = false;

    // valid extensions
    $extensions = array(
        "jpg",
        "gif",
        "jpeg",
        "svg",
        "png",
        "bmp"
    );

    // Implode the extensions array into a string:
    $extensions = implode(',', $extensions);

    if (file_exists($folder)) {

        // Get all the files with a valid extension in $folder:
        // (optionally filtered by $starts_with)
        foreach (glob($folder.'/'.$starts_with.'*.{'.$extensions.'}', GLOB_BRACE) as $filename) {
            $slide_images[$filename] = "<img src='{$filename}' alt='{$filename}' />";
        }

        if (!empty($slide_images)) {
            ksort($slide_images);
            $slide_images = array_chunk($slide_images, $images_per_slide);
        }

    }

    return $slide_images;
}

答案 1 :(得分:4)

这不是解决方案,不只是在服务器端过滤掉它吗?

为了使函数更灵活(而不是只过滤'1'):

<?php
function get_slide_images($folder, $images_per_slide = 10, $pattern = "")
{
    $slide_images = false;

    if (!file_exists($folder))
        return $slide_images;

    // valid extensions
    $extensions = array(
        "jpg",
        "gif",
        "jpeg",
        "svg",
        "png",
        "bmp"
    );

    foreach (new DirectoryIterator($folder) as $file_key => $file) {
        // Don't bother
        if (!in_array($file->getExtension(), $extensions))
            continue;

        // Grab file details
        $filename    = $file->getFilename();
        if ($pattern && !preg_match($pattern, $filename))
            continue;
        $file_folder = $folder . "/" . $filename;

        // Store the image to the Slide
        $slide_images[$filename] = "<img src='{$file_folder}' alt='{$file_folder}' />";

    }

    if (!empty($slide_images)) {
        ksort($slide_images);
        $slide_images = array_chunk($slide_images, $images_per_slide);
    }
    return $slide_images;
}

现在您可以使用以下命令运行它:

get_slide_images('images',10,'/^1/'); // get everything starting with 1
get_slide_images('images',10,'/^1234/'); // get everything starting with 1234
希望这就是你要找的东西。

答案 2 :(得分:4)

如果您需要检查条件:

<?php
  function starts_with ($filename, $start)
    if (substr($filename, 0, 1) == $start)
      return true;
    return false;
  }
?>

答案 3 :(得分:3)

在php中我只是检查

if ("1" !== substr($filename, 0, 1)) {
    continue;
}
DirectoryIterator

期间