PHP'deki küçük resimlerin özü

Question

Aşağıdaki jsfiddle'da gösterilen formda görüntüleri görüntülemek için kullanacağım bir sürgüsüm (flexslider) var ... Kaydırıcıyı görüntüleri ayıklayacak şekilde optimize ettim (örn. 12364, 50046) adlarına göre belirli bir dizinden dinamik olarak.

JSFIDDLE:

<?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> 

Şimdi problem I (optimize önce) orijinal sürgüsünü varken bağladım "fancybox" gösterilecek etmektir küçük resimleri: görüntü çekip için https://jsfiddle.net/atkumqpk/1/

Kodu ve gizli görüntüler. Ancak şimdi php kullanarak ayıklanan görüntülere nasıl bağlanacağı konusunda hiçbir fikrim yok.

Fancybox'ın kodu. JSFIDDLE: http://jsfiddle.net/ny9ytae5/2/

Durum: dizin resimlerinin içinde (görüntüleri ayıkladığım) sayılarla isimlendirilmiş resimlerim var (örneğin: 54236) ve her görüntü için aynı ada sahip eşdeğer bir klasör (ör. : Resim 54236 için bir klasör var 54236). klasörün 54236 içeriği görüntüye bağlı olması gerekir küçükleri 54236.

Ben bunu yapabilirsiniz stackoverflow üyesi "JFK" tarafından bilgi verildi

:" $slide_images[$filename] = "<img src='{$filename}' alt='{$filename}' />"; bu $slide_images[$filename] = "<a class='fancybox' data-fancybox-group='thumb1' href='{$filename}'><img src='{$filename}' alt='{$filename}' /></a>"; içine değiştirilebilir ... . tek sorun

"Eğer pageload bir ek yük ekleyecek küçük resim olarak aynı resme olacağını Ve bu öğretici kullanarak önerdi:

http://www.picssel.com/create-a-filtered-image-gallery-with-jquery-and-fancybox-part-2-create-image-thumbnails-with-php/ Ancak o iş yapmak için başarısız oldu. Herhangi bir yardım lütfen?

"JFK" öneri olarak

Answer 1

, kendi küçük resim src özelliğini işaret etmelidir (ve büyük boyutlu resme href özelliği let) Dolayısıyla küçük olacak

şey

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

gibi hemen yüklenir, ancak büyük resim yalnızca gerektiğinde yüklenir.

Answer 2

Ben size sadece sana değil mi böylece diğer sinek üzerinde hesaplamak için önermek (yüksekliğini veya genişliğini geçebilir anında yapmak istiyorsanız this

gibi bir başlangıç ​​düşünüyorum orantıları kaybeder); Eğer önbelleğe almak istiyorsanız sadece img'i kaydedip görüntüye sahip olup olmadığınızı kontrol edin (title-width-height.jpg gibi özel bir ad kullanabilirsiniz ve var olup olmadığını kontrol edin)