ImageBank: простое решение для демонстрации большого количества изображений
php guide images galleries sharing

ImageBank: простое решение для демонстрации большого количества изображений

17 ноября 2022 г.

По стечению ряда уникальных обстоятельств, запутанных подробностей которых я вам избавлю, я оказался там, где у меня есть ряд галерей, в которых может быть несколько тысяч изображений.

В прошлом я написал «Gallery Builder», который хорошо справлялся с созданием адаптивных галерей на основе сетки с прокручиваемыми модальными полноэкранными дисплеями для отдельных изображений. Например, такие функции, как подписи и альтернативные текстовые описания. Еще неплохое решение для нескольких десятков изображений.

Не для нескольких тысяч изображений, особенно для нескольких тысяч, которым эти функции не понадобятся.

Что я хотел сделать, так это просто массово загружать и отображать некоторые из этих изображений в удобной для использования форме, хороший способ иметь значительную галерею изображений, загружаемых или отображаемых довольно быстро в чистом незагроможденном списке отображения.< /p>

Вы можете просмотреть демонстрационную галерею ImageBank, содержащую около 4400 файлов изображений, по адресу https://syntheticreality.net/ImageBank<. /сильный>.

В отличие от моего более раннего приложения «Gallery Builder», здесь нет возможности для загрузки пользовательских изображений или контента. Этот пакет предназначен для содержимого (то есть изображений), предоставленного создателем сайта или страницы.

Отображение галереи использует простой формат списка, в котором каждый элемент появляется один за другим по вертикали. Каждый элемент изображения отображает имя файла изображения, изображение для предварительного просмотра и размер файла изображения в столбцах, и список можно сортировать по столбцам.

Щелчок по изображению приводит к отображению этого изображения на всю страницу, а кнопка «Назад» используется для возврата к списку галереи.

Ниже приведена базовая программа PHP для отображения галереи.

<!doctype html>
<html lang="En">
<head>
   <meta charset="UTF-8">
   <link rel="shortcut icon" href="./.favicon.ico">
   <title>Imagebank Contents</title>

   <link rel="stylesheet" href="./.style.css">
   <script src="./.sorttable.js"></script>
</head>

<body>
<div id="container">
    <h1>ImageBank Contents</h1>
    <h2>This is a collection of images that you may enjoy<br>or use under a <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons BY license.</a><br>A repository for the ImageBank code is on <a href="https://github.com/Bob-Wright/ImageBank">GitHub.</a></h2>
    <table class="sortable">
        <thead>
        <tr>
            <th>Filename</th>
            <th>Preview</th>
            <th>Size</th>
<!--    <th>Date Modified</th> --->
        </tr>
        </thead>
        <tbody>

<?php

    // Adds pretty filesizes
    function pretty_filesize($file) {
        $size=filesize($file);
        if($size<1024){$size=$size." Bytes";}
        elseif(($size<1048576)&&($size>1023)){$size=round($size/1024, 1)." KB";}
        elseif(($size<1073741824)&&($size>1048575)){$size=round($size/1048576, 1)." MB";}
        else{$size=round($size/1073741824, 1)." GB";}
        return $size;
    }

    $hide=".";

    // Opens directory
    $myDirectory=opendir(".");
    // Gets each entry
    while($entryName=readdir($myDirectory)) {
       $dirArray[]=$entryName;}
    // Closes directory
    closedir($myDirectory);
    // Counts elements in array
    $indexCount=count($dirArray);
    // Sorts files
    sort($dirArray);
    // Loops through the array of files
    for($index=0; $index < $indexCount; $index++) {
    // Decides if hidden files should be displayed, based on query above.
        if(substr("$dirArray[$index]", 0, 1)!=$hide) {

    // Resets Variables
        $favicon="";
        $class="file";

    // Gets File Names
        $name=$dirArray[$index];

    // Separates directories, and performs operations on those directories
        if(is_dir($dirArray[$index]))
        {
                $extn="&lt;Directory&gt;";
                $size="&lt;Directory&gt;";
                $sizekey="0";
                $class="dir";
            // Gets favicon.ico, and displays it, only if it exists.
                if(file_exists("$name/favicon.ico"))
                    {
                        $favicon=" style='background-image:url($name/favicon.ico);'";
                        $extn="&lt;Website&gt;";
                    }
            // Cleans up . and .. directories
                if($name=="."){$name=". (Current Directory)"; $extn="&lt;System Dir&gt;"; $favicon=" style='background-image:url($name/.favicon.ico);'";}
                if($name==".."){$name=".. (Parent Directory)"; $extn="&lt;System Dir&gt;";}
        }
    // Output
    $extn=pathinfo($dirArray[$index], PATHINFO_EXTENSION);
    // Gets and cleans up file size
    $size=pretty_filesize($dirArray[$index]);
    $sizekey=filesize($dirArray[$index]);

    echo("
        <tr class='$class'>
            <td><a href='./$name' class='name'>$name</a></td>
            <td><a href='./$name'><img src='./$name' width=50% height=auto></a></td>
            <td sorttable_customkey='$sizekey'><a href='./$name'>$size</a></td>
        </tr>");
       }
    }
//          <td sorttable_customkey='$timekey'><a href='./$name'>$modtime</a></td>
    ?>

    </tbody>
</table>
</div>
</body>
</html>

Вторым важным элементом конструкции страницы является CSS, определяющий макет отображения, показанный ниже.

* {
    padding:0;
    margin:0;
}
body {
    color: #333;
    font: 2.4vw Sans-Serif;
    padding: 5vw;
    background: #eee;
}
h1 {
    font-size: 3.8vw;
    text-align: center;
    color: #fff;
    background-color: #2080ff;
    padding: 2vw 0 1.2vw 0;
    margin: 0;
}
h2 {
    font-size: 1.6vw;
    text-align: center;
    padding: 0 0 1.2vw 0; 
}
#container {
    box-shadow: 0 .5vw 1vw -.5vw rgba(0,0,0,0.5);
    position: relative;
    background: white; 
}
table {
    background-color: #F0F0F0;
    border-collapse: collapse;
    width: 100%;
    margin: 1.5vw 0;
}
th {
    background-color: #5e02fee8;
    color: #FFF;
    cursor: pointer;
    padding: .5vw 1vw;
}
th small {
    font-size: 1.1vw; 
}
td, th {
    text-align: left;
}
a {
    text-decoration: none;
}
td a {
    color: #663300;
    display: block;
    padding: .5vw 1vw;
}
th a {
    padding-left: 0
}
td:first-of-type a {
/*  background: url(./.images/file.png) no-repeat 1vw 50%;*/
    padding-left: .5vw;
}
th:first-of-type {
    padding-left: .5vw;
}
td:not(:first-of-type) a {
    background-image: none !important;
} 
tr:nth-of-type(odd) {
    background-color: #E0E0E0;
}
tr:hover td {
    background-color:#CACACA;
}
tr:hover td a {
    color: #000;
}

Изображения, отображаемые в списке галереи, не являются частью программы отображения галереи, а вместо этого собираются из каталога папки веб-сайта, в которой находятся изображения и код ImageBank.

Репозиторий всего кода банка изображений доступен по адресу https://github.com/Bob-Wright/ImageBank. .

Позвольте мне в заключение сказать, что я надеюсь, что некоторые из изображений могут оказаться полезными или полезными, и я надеюсь, что код предоставляет удобный способ поделиться вашими собственными изображениями.

Также опубликовано здесь

Оригинал

Recent Post

Categories

PREVIOUS ARTICLE
NEXT ARTICLE

COPYRIGHT 2020 COFFEE-WEB.RU