Пока этот скрипт работает очень хорошо. Однако это не совсем то, что я ищу. У меня есть эхо эхо формы, и для каждого изображения, которое он находит, он перекликается с 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";
}
?>
Я не знаю, как выглядит ваш 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";