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

0

Пока этот скрипт работает очень хорошо. Однако это не совсем то, что я ищу. У меня есть эхо эхо формы, и для каждого изображения, которое он находит, он перекликается с div и другой добротой, связанной с изображением. В настоящее время он перекликается со всеми найденными изображениями в хорошем длинном одиночном столбце, а масштабированные изображения не очень пропорциональны (они выглядят извращенными).

Однако вот что я хотел бы, и я не на 100%, как это сделать. Вместо одного длинного одиночного столбца я хотел бы иметь три или четыре <div class=\"imageTile\">\n"; в каждой строке до тех пор, пока в скрипте не закончится изображение. Плитки должны быть выровнены в симпатичных маленьких столбцах.

Во-вторых, я не совсем понял, как масштабировать изображения, которые он находит там, где они НЕ выглядят извращенными. (В основном пытаюсь сделать эскиз изображения, чтобы при щелчке изображения исходное изображение в конечном итоге появлялось).

      <?php
            header('Access-Control-Allow-Origin: *');
            // if no project was sent, display some error message
            if(!isset($_GET['urlName'])) { die('No project has been chosen'); }
            // cast the project to integer (just a little bit of basic security)
            $urlname = (string) $_GET['urlName'];
            $path = $urlname;
            if (strpos($path, '../') !== false || strpos($path, "..\\") !== false || strpos($path, '/..') !== false || strpos($path, '\..') !== false)
                    {
                    // Strange things happening. 403 Forbidden
                    http_response_code(403);
                    } else {
            $dir = "uploads/$path";
            function ListFiles($dir) {
                if($dh = opendir($dir)) {
                    $files = Array();
                    $inner_files = Array();
                    while($file = readdir($dh)) {
                        if($file != "." && $file != ".." && $file[0] != '.') {
                            if(is_dir($dir . "/" . $file)) {
                                $inner_files = ListFiles($dir . "/" . $file);
                                if(is_array($inner_files)) $files = array_merge($files, $inner_files);
                            } else if (strstr($file, ".gif") || strstr($file, ".png") || strstr($file, ".jpg")) {
                                array_push($files, $dir . "/" . $file);
                            }
                        }
                    }
                    closedir($dh);
                    return $files;
                }
            }

echo "<form onsubmit=\"\">\n";           
            foreach (ListFiles("uploads/$path") as $key=>$file){
             $directory_file = $directory . $file;
                    $info = getImageSize($file);
             echo " <div class=\"imageTile\">\n";
             echo "   <img src=\"$directory_file\" width=\"110px\" height=\"120px\"><br>\n";
             echo "   <input class=\"data\" type=\"hidden\" name=\"imageFilename\" value=\"$file\">\n";
             echo "   <input class=\"data\" type=\"hidden\" name=\"imageGalleryID\" value=\"$path\">\n";
             echo "   <label for=\"$file\">Keep</label>\n";
             echo "   <input class=\"checkbox\" type=\"checkbox\">\n";
             echo " </div>\n";
            }
             echo " <div id=\"submit_buttons\">\n";
             echo "  <button type=\"reset\">Reset</button>\n";
             echo "  <input class=\"submit\" type=\"submit\" onclick=\"return false\" value=\"Submit\">\n";
             echo " </div>\n";
             echo "</form>\n";
            }
    ?>
Теги:
image

1 ответ

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

Я не знаю, как выглядит ваш CSS, но вы можете выровнять divs inline друг с другом и (при условии, что они имеют фиксированную ширину и высоту), они будут выравниваться в столбцах. Попробуйте добавить float:left; в вашем селекторе imageTile в вашем CSS.

Что касается вашего второго вопроса, если вы установите max-height или max-width в CSS, большинство современных браузеров будут поддерживать соотношение сторон изображения и изменять его размер в соответствии с максимальной шириной или максимальной высотой.

Измените эту строку:

echo "   <img src=\"$directory_file\" width=\"110px\" height=\"120px\"><br>\n";

к этому:

echo "   <img src=\"$directory_file\" style=\"max-width: 120px; max-height: 110px;\" /><br>\n";
  • 0
    Спасибо за рекомендацию, она отправила меня по правильному пути

Ещё вопросы

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