在PHP中提取缩略图

Question

我有一个滑块（flexslider），我用它来显示以下jsfiddle中显示的形式的图像...我优化了滑块，以便它动态地从一个提取图像（使用数字命名，例如：12364,50046）某个目录基于其名称。

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

提取图像的代码：

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

    $slide_images = false;

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

    // 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;
}
?>

<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">
<?php
$slider_kvp = get_slide_images("images", 10, "1");

/**
* 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>

现在的问题是，当我有原始滑块（优化之前）时，我将它连接到“fancybox”以显示缩略图和隐藏图像。 但是现在我不知道如何将它连接到使用php提取的图像。

Fancybox的代码。 JSFIDDLE： http ： //jsfiddle.net/ny9ytae5/2/

案例：在目录图像内部（我正在从中提取图像）我有以数字命名的图像（例如：54236），并且对于每个图像，具有相同名称的等效文件夹（例如：对于图像54236，存在文件夹54236）。 文件夹54236的内容是需要连接到图像54236的缩略图。

stackoverflow成员“JFK”告诉我，我可以这样做：“ $slide_images[$filename] = "<img src='{$filename}' alt='{$filename}' />";可以改成这个$slide_images[$filename] = "<a class='fancybox' data-fancybox-group='thumb1' href='{$filename}'><img src='{$filename}' alt='{$filename}' /></a>"; ...唯一的问题是你将使用与缩略图相同的图像，这将增加页面加载的开销。”

建议使用本教程： http ： //www.picssel.com/create-a-filtered-image-gallery-with-jquery-and-fancybox-part-2-create-image-thumbnails-with-php/

但是我没能成功。 有什么帮助吗？

Answer 1

在“JFK”建议中，您应该将src属性指向缩略图图像（并将href属性设置为大尺寸图像）

就像是

$slide_images[$filename] = "<a class='fancybox' data-fancybox-group='thumb1' href='{$filename}'><img src='{$filename}/thumbnail.jpg' alt='{$filename}' /></a>";

因此，缩略图将立即加载，但只有在需要时才会加载大图像。

Answer 2

我认为你可以像启动此

如果你想在飞行中制作你只需要通过高度或宽度（我建议你在飞行中计算另一个，这样你就不会失去比例）; 如果你想缓存它只是保存img并检查你是否有图像（你可以使用自定义名称，如title-width-height.jpg并检查它是否存在）