Klasöründen görüntü Yük listesi

5 Cevap php

Ben 10-200 görüntülerin bir klasör, bir web sayfasını, bir jquery solmaya ve görüntülerin tam klasör okumak bir php komut dosyası var

, (? Bir dizi) görüntünün bir listesini almak ve jquery komut dosyasına geçmek php komut dosyası bir klasör tarama yapmak için herhangi bir yolu var mı? (İlk soru)

Şimdi, ben Bulunan dosyalar sonucu php listeden bir xml dosyası yapmak veya html listeden bir html <li> yapabilirsiniz. Bunu yapmak için başka bir yolu var mı? (Soru # 2)

5 Cevap

nickf's excellent answer itibaren devam etmek için, bu farklı görüntüler için biraz daha sağlamdır.

$imagesDir = 'path/to/your/images/';
$images = glob($imagesDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);

echo json_encode($images);

Orada bunu yapmanın başka yolları vardır, ancak bu kolay değildir. Bazı dosya sistemleri harfe duyarlı olduğunu unutmayın, bu yüzden uzatma liste sonra konum tam olarak ne eşleşen olduğundan emin olun.

glob function bir klasörü taramak ve bir dizi döndürür:

$jpgs = glob("*.jpg");

Eğer JSON kullanarak jQuery geri iletebilirsiniz:

echo json_encode($jpgs);

o zaman sadece gerekli HTML üreten, sonucu ile döngü bir durum olurdu.

Eğer böyle bir şey kullanabilirsiniz liste öğeleri oluşturmak için (görüntü varsayarak json_encode sonucudur ()):

var images = {'image1':'images/image1.jpg','image2':'images/image2.jpg'}

jQuery('#imagelist').empty();
jQuery.each(images, function() {
  jQuery('#imagelist').append('<li>'+this+'</li>');
});

Ve emin HTML kaynağı Sırasız / sıralı liste var olun:

<ul id="imagelist">
  <li>No images found</li>
</ul>

Sadece en azından makul bir şekilde, ekran için bir JavaScript içine "veri" olarak görüntüleri geçemez.

Ben çok gelen cevap burada bir deneyin verecek

Alex ve Nick:

<?php
  $imagesDir = 'path/to/your/images/';
  $images = glob($imagesDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);
  echo json_encode($images);
?>

ve mattoc gelen supersized için alışmak için (değiştirmek)

jQuery('#imagelist').empty();
jQuery.each(images, function() {
  jQuery('#imagelist').append('<img src="'+this+'"/>');
});

ve sonunda böyle bir şey almak için umut!

<div id="supersize">
    <img  src="images/001.jpg"/>
    <img  src="images/002.jpg"/>
    <img  src="images/003.jpg"/>
</div>

kodun son parça, i görüntülerin hata listesi ile sorunsuz önyükleme ile eklenti supersize için görüntü göndermek için bir çözüm bulmak için "tek tek" olacak

Let i 150 görüntüler listesini almak gerekiyordu ... o yüzden sadece preload, 2 fotoğraf olduğunu biliyorum eklentisi icar, bir sorun olacak ve bir sonraki "ajax" sonraki görüntüyü değiştirmek

image001.jpg is display
... preload image002.jpg
display image002.jpg
... preload image003.jpg
on and on and on....

Bütün bu dynamicly dizinin sonuna kadar!

etiketler