将缩略图连接到使用php提取的图像 [英] Connecting thumbnails to images extracted using php

问题描述

我有一个滑块（flexslider），我使用以下面的形式显示图像jsfiddle ...我优化了滑块，使其提取图像（使用数字命名，例如：12364，50046）

I have a slider (flexslider) that i'm using to display images in the form shown in the below jsfiddle... I optimized the slider so that it extracts images (which are named using numbers e.g:12364, 50046) dynamically from a certain directory based on its names.

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

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>

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

Now the problem is that when i had the original slider (before optimizing it) i connected it to "fancybox" to display thumbnails and hidden images. However now i have no idea on how to connect it to images that are being extracted using php.

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

Code of the Fancybox. JSFIDDLE: http://jsfiddle.net/ny9ytae5/2/

案例：在目录图像（我从中提取图像）中，有一些以数字命名的图像（例如：54236），每个图像都有一个相同名称的等效文件夹：对于图像54236，存在文件夹54236）。文件夹54236的内容是需要连接到图像54236的缩略图。
任何帮助？

Case: inside the directory images (which i'm extracting the images from) i have images that are named in numbers (e.g:54236), and for each image an equivalent folder with the same name (e.g: for image 54236 there is a folder 54236). The content of the folder 54236 are the thumbnails that needs to be connected to the image 54236. Any help?

推荐答案

您必须编辑您的php代码，其中生成hmtl的图像到以下代码：

You have to edit your php code, where you generate hmtl for images to the code below:

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

所以你会得到精确的标记，fancybox需要，但你必须设置 fancybox-data-group 属性在一张幻灯片上的所有图像相同（将slide-N替换为实际的slide-1等），当fancybox将显示图像的缩略图您当前的幻灯片。
这里是 jsfiddle 示例，之后它会得到什么。

So you'll get exact markup, needed for fancybox, but you have to set fancybox-data-group attribute to be equal for all images on one slide (replace "slide-N" to your actual "slide-1" etc), when fancybox will show thumbs for images on your current slide. Here is jsfiddle example what you'll get after it.

这篇关于将缩略图连接到使用php提取的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！