Jump to content


Photo

Displaying Images From Array Using PHP/HTML

images array php gallery html

  • Please log in to reply
4 replies to this topic

#1 BorysSokolov

BorysSokolov
  • Members
  • PipPipPip
  • Advanced Member
  • 78 posts
  • LocationBratislava

Posted 04 February 2013 - 11:33 PM

I have several images in a directory, which I would like to output(in an organized way) to the page. I've tried reading all the directory contents, and loading their names into an array to display the images using HTML, but I can't for the life of me figure out how to then position the pictures correctly in CSS.

Here's the code:

<?php
$dirLoc = 'myWebsite/galleryPics';
$handle = opendir($dirLoc);


while($readDir = readdir($handle)){
if($readDir != '.' && $readDir != '..'){
$pic[] = $readDir;
}
}


foreach($pic as $k){
echo "<div class = \"picsDiv\">";
echo "<img src = \"$dirLoc/$k\" height = \"100px\" width = \"100px\"/></div>";
}
?>


<html>
<head>
<style type = "text/css">

.picsDiv {width:150px;
	 height:150px;
	 border:1px solid red;
	 background-color:grey;}
	
img {position:relative;
	 top:50%;
	 left:50%;
	 margin-top:-50px;
	 margin-left:-50px;}
</style>
</head>
</html>

Thank you in advance for any feedback.

#2 requinix

requinix
  • Administrators
  • Impoverished Administrator
  • 9,823 posts
  • LocationWA

Posted 04 February 2013 - 11:55 PM

What is "correctly" supposed to be? How does it look now and how do you want it to look?
The Reimann Zeta Function Trolley Problem | If you want to escape with me, come take my hand...

#3 BorysSokolov

BorysSokolov
  • Members
  • PipPipPip
  • Advanced Member
  • 78 posts
  • LocationBratislava

Posted 05 February 2013 - 12:16 AM

What is "correctly" supposed to be? How does it look now and how do you want it to look?


At the moment the images are positioned in a single, straight, vertical column, with no spaces in between them. I'd like them, however, to run left to right, skipping to the next line once there's no more space, with some space separating them; like a typical grid layout.

#4 Christian F.

Christian F.
  • Staff Alumni
  • Advanced Member
  • 3,106 posts
  • LocationNorway

Posted 05 February 2013 - 12:53 AM

Float: left would do that for you, on the div class.
Keeping it simple.

#5 BorysSokolov

BorysSokolov
  • Members
  • PipPipPip
  • Advanced Member
  • 78 posts
  • LocationBratislava

Posted 05 February 2013 - 02:31 AM

Float: left would do that for you, on the div class.


Thanks, worked like a charm :happy-04: .




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users