Как динамически загружать изображения с сервера и отображать их

0

У меня есть изображения, хранящиеся на моем сервере, т.е. у меня есть каталог на моем сервере, такой как: $ uploadsDirectory = $ _SERVER ['DOCUMENT_ROOT']. $ directory_self. 'Uploaded_files/';

Мне нужно загрузить каждое изображение из каталога и отобразить его на следующем html:

<div class="image-set">
                <a class="example-image-link" href="images/demopage/1.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="images/demopage/1.jpg" alt=""/></a>
                <a class="example-image-link" href="images/demopage/2.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="images/demopage/2.jpg" alt="" /></a>
                <a class="example-image-link" href="images/demopage/3.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="images/demopage/3.jpg" alt="" /></a>
                <a class="example-image-link" href="images/demopage/4.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="images/demopage/4.jpg" alt="" /></a>
                <a class="example-image-link" href="images/demopage/5.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="images/demopage/5.jpg" alt=""/></a>
                <a class="example-image-link" href="images/demopage/6.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="images/demopage/6.jpg" alt="" /></a>
                <a class="example-image-link" href="images/demopage/7.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="images/demopage/7.jpg" alt="" /></a>
                <a class="example-image-link" href="images/demopage/8.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="images/demopage/8.jpg" alt="" /></a>
                <a class="example-image-link" href="images/demopage/9.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="images/demopage/9.jpg" alt=""/></a>
                <a class="example-image-link" href="images/demopage/10.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="images/demopage/10.jpg" alt="" /></a>
                <a class="example-image-link" href="images/demopage/11.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="images/demopage/11.jpg" alt="" /></a>
                <a class="example-image-link" href="images/demopage/12.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="images/demopage/12.jpg" alt="" /></a>
                <a class="example-image-link" href="images/demopage/13.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="images/demopage/13.jpg" alt="" /></a>
            </div>

Теги img могут быть динамически увеличены, может ли кто-нибудь помочь мне в этом?

  • 0
    Простая петля?
  • 0
    что вы подразумеваете под простым циклом? да, если вы имеете в виду, мне нужно отобразить все изображения в каталоге, то я должен зациклить их все
Показать ещё 3 комментария
Теги:

3 ответа

0
Лучший ответ

Во-первых, вам нужно отсканировать каталог для всех файлов изображений, которые вы хотите:

$imageFiles = [];
$uploadsDirectory = $_SERVER['DOCUMENT_ROOT'] . $directory_self . 'uploaded_files/';

// check folder exists
if (is_dir($uploadsDirectory))
{
    for (scandir($uploadsDirectory) as $file)
    {
        // include only desired file types
        $ext = pathinfo($file, PATHINFO_EXTENSION);
        if ($ext == 'jpg' || $ext == 'png' || $ext == 'gif')
        {
            $imageFiles[] = $file;
        }
    }
}

Теперь, если вы настроили переписывание URL-адресов, которые связывают URL-адрес/images/demopage/в вашем каталоге, где хранятся изображения (вы можете ограничить его только принятием запросов на изображения), вы можете сделать следующее в своем HTML-шаблоне:

<div class="image-set">
    <?php
        foreach ($imageFiles as $image)
        {
            echo '<a class="example-image-link" href="images/demopage/' . $image . '" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close.">';
            echo '<img class="example-image" src="images/demopage/' . $image . '" alt="" />';
            echo '</a>';
        }
    ?>
</div>
Поделиться
1

Вы можете попробовать получить файлы изображений. Используйте функцию glob в php,

<div class="image-set">    
    <?php foreach (glob('images/demopage/*') as $filename) { ?>
        <img class="example-image" src="images/demopage/<?php echo basename($filename); ?>" alt=""/>
    <?php } ?>
</div>
Поделиться
  • 0
    +1 хотя получать только картинки было бы лучше
0

http://www.php.net/manual/en/function.scandir.php

Что-то вроде того?

function getImageUrls($uploadsDirectory)
{
    $urls = array();
    foreach(scandir($uploadsDirectory) as $filename) {
        if($filename != '.' AND $filename != '..') {
            $pathinfo = pathinfo($filename);
            if(in_array($pathinfo['extension'], array('jpg', 'png', 'gif'))) {
                $urls[] = $uploadsDirectory.$filename;
        }
    }
    return $urls;
}

// ----------------------------------


foreach(getImageUrls($uploadsDirectory) as $src) {
    echo '<a class="example-image-link" href="'.$src.'" data-lightbox="example-set"><img class="example-image" src="'.$src.'" alt=""/></a>'
}
Поделиться
  • 0
    Вы забыли вернуться из функции и завершить foreach.
  • 0
    ничего не отображается как $ src, означает, что я получаю массив URL является нулевым
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню