Извлечь эскизы в 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>"; ... Единственная проблема в том, что вы будете использовать то же изображение, уменьшенное изображение, которое будет добавить накладные расходы на ваш PageLoad "

И предложил использовать этот учебник:. 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

Я думаю, что вы можете начать с чем-то вроде this

, если вы хотите сделать это на лету вы можете просто передать ширину или высоту (я предлагаю вам рассчитать на лету другой, так что вы не потерять пропорции); если вы хотите кэшировать его, просто сохраните img и проверьте, есть ли у вас изображение (вы можете использовать настраиваемое имя, например title-width-height.jpg, и проверить, существует ли оно)