unable to display images in a grid using php html
Question
Im using the code from this website to display images from a directory along with their file name. https://github.com/dcblogdev/gallery-from-folder
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Gallery from Folder Demo</title>
<style type="text/css">
<!--
li{
list-style-type:none;
margin-right:10px;
margin-bottom:10px;
float:left;
}
-->
</style>
</head>
<body>
<ul>
<?php
$dirname = "images/";
$images = scandir($dirname);
shuffle($images);
$ignore = Array(".", "..");
foreach($images as $curimg){
if(!in_array($curimg, $ignore)) {
echo "<li><a href='".$dirname.$curimg."'><img src='img.php?src=".$dirname.$curimg."&w=300&zc=1' alt='' /></a></li>\n";
}
}
?>
</ul>
</body>
</html>
Im getting this funny error in console: -
<a href=".$dirname .$curimg."><img src=".$dirname .$curimg."></a>
Image isnt showing up (I can only see a broken image icon), when I click on it I see this http://192.168.1.7/temp/.$dirname%20.$curimg.
1 answers
solution1
0 2020-10-08 11:44:52
try out this, here I just simplified the echo of li code, and you no need \n at the end of the list tag, coz as per HTML li after completion of one li tag it moves to the next line by default
<ul>
<?php
$dirname = "images/";
$images = scandir($dirname);
shuffle($images);
$ignore = array(".", "..");
foreach($images as $curimg){
if(!in_array($curimg, $ignore)) {
echo '<li><a href="'.$dirname.$curimg.'"><img src="'.$dirname.$curimg.'"></a></li>';
}
}
?>
</ul>
here is the working Image
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.