php - haster - Billed opload og visning - Udvikleren.dk - Programmering, webdesign og grafik

Tags: php

Bruger #14510 @ 05.08.09 22:46

hejsa udviklere, dette er lidt en haster da jeg ikke har mere end 4 dage til rådighed til at lave det.

men det jeg gerne vil lave er et system hvor jeg på min hjemmeside kan uploade billedere, som vil blive vist på hjemmesiden,

Billederen skal uploades fra http://www.MITSITE.dk/upload.php

og så skal man kunne se billederen på
http://www.MITSITe.DK/billeder.php
måden billederne skal stilles på er i i størrelsen 100*100 (px) og så 5 billeder på række, i uendelig rækker ned af siden afhængeligt at hvor mange billeder der er.
Men når man så klikker på det 100*100(px) skal billedet vises i fuldstørrelse.

Håber virkeligt nogen kan hjælpe mig med dette, da jeg skal bruge det til en (photoclass) jeg skal tage på highschool i USA, og jeg rejser d. 14/8, og har kun fra på mandag til at lave på det..
så håber nogen kan hjælpe, og give nogle Links til nogle tuts, hvordan man kan lave dette, spørg endeligt hvis du mangler informatio

4 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 2 karma

Sorter efter stemmer Sorter efter dato

Bruger #12118 @ 05.08.09 23:47

http://phpartikler.dk/artikler/filsystem.php#upload

der laver du upload scriptet.

så er det vel bare at udskrive alle billederne på billeder.php fx.

<img style="width:100px; height:100px;" src="images/<?php echo $navn; ?>">

og så finde et javascript pop op hvor du så bare henter det ID som billedet har og udskriver det i pop oppen

Bruger #5620 @ 06.08.09 23:27

1.500

Det her er et eksempel på view delen:

Kode

<?php
Class Grid{
	public $rows;
	public $cols;

	public $beforeGrid="";
	public $funBeforeGrid="";	
	
	public $afterGrid="";
	public $funAfterGrid="";
	
	public $beforeRow="";
	public $funBeforeRow="";	
	
	public $afterRow="";
	public $funAfterRow="";
	
	public $beforeCell="";
	public $funBeforeCell="";
		
	public $afterCell="";
	public $funAfterCell="";
	
	public $cell="";
	public $funCell="";
	public function make1D($arr,$cols){

		$str="";
		$funBeforeGrid=$this->funBeforeGrid;
		if($funBeforeGrid==""){
			$str=$this->beforeGrid;
		}else{
			$str=$funBeforeGrid();
		}
		$funBeforeRow=$this->funBeforeRow;
		if($funBeforeRow==""){
			$funBeforeRow=create_function('$cell_index,$y','return str_replace(array("%cell_index","%row_number"),array($cell_index,$y),"'.$this->beforeRow.'");');
		}
		$funAfterRow=$this->funAfterRow;
		if($funAfterRow==""){
			$funAfterRow=create_function('$cell_index,$y','return str_replace(array("%cell_index","%row_number"),array($cell_index,$y),"'.$this->beforeRow.'");');
		}
				
		$funCell=$this->funCell;
		if($funCell==""){
			$funCell=create_function('$cell,$cell_index,$x,$y','
			return str_replace(array("%cell","%cell_index","%x","%y"),array($cell,$cell_index,$x,$y),"'.$this->cell.'");');
		}
		$funBeforeCell=$this->funBeforeCell;
		if($funBeforeCell==""){
			$funBeforeCell=create_function('$x,$y','
			return str_replace(array("%x","%y"),array($x,$y),"'.$this->beforeCell.'");');
		}
		$funAfterCell=$this->funAfterCell;
		if($funAfterCell==""){
			$funAfterCell=create_function('$x,$y','
			return str_replace(array("%x","%y"),array($x,$y),"'.$this->afterCell.'");');
		}				
		$i=0;
		$r=0;
		$c=0;
		foreach($arr as $cell){
			if(($c%$cols)==0){

				if($r>0){
					$str.=$funAfterRow($i,$r);
				}
				$str.=$funBeforeRow($i,$r);
				$c=0;
				$r++;
			}		
			$str.=$funBeforeCell($c,$r).$funCell($cell,$i,$c,$r).$funAfterCell($c,$r);
			$c++;
			$i++;
		}
		
		
		$funAfterGrid=$this->funAfterGrid;
		if($funAfterGrid==""){
			$str.=$this->beforeGrid;
		}else{
			$str.=$funAfterGrid();
		}		
		return $str;
	}	
}

$galGrid=new Grid();

$galGrid->beforeGrid="<table>";
$galGrid->afterGrid="</table>";

$galGrid->beforeRow="<tr>";
$galGrid->afterRow="</tr>";

$galGrid->beforeCell="<td>";
$galGrid->afterCell="</td>";

$galGrid->cell="<div class='thumb'><img src='%cell' style></div>";


?>
<style>
.thumb{
	width:100px;
	height:100px;	
}
.thumb img{
	max-width:100%;
	max-height:100%;	
}
div.thumb:hover img{
	position:fixed;
	float:left;
	margin:auto;
	//top:0px;
	left:450px;
	width:auto;
	height:auto;		
}
</style>
<?php
echo $galGrid->make1D(glob("gallery/*.{jpg,png,jpeg,gif}",GLOB_BRACE ),3,3);
?>

De vigtig dele er glob der tager alle jpg,png,jpeg og gif filer i folderen gallery/
og giver dem til galGrid der laver et grid ud af dem, et simpelt css gallery er resultatet.

Et mere advanceret css gallery men princippet er stadig det samme:

Kode

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><html>
  <head>
<style>/*
CSS Gallery v. 2
made by:Small Green Alien
page:donp.the-hive.dk
*/
.gallery{
  width:800px;
  height:600px;
   
}
.thumbs{
  float:left;
  width:100px;
  height:575px;
 overflow:auto; 
}

.picture{
  float:left;
  background-color:gray;
  width:700px;
  height:575px;
  -moz-border-radius-topleft: 5px;
  -webkit-border-top-left-radius: 5px;
  -moz-border-radius-bottomleft: 5px;
  -webkit-border-bottom-left-radius: 5px;
}



div.holder .thumb .fit{
  max-width:100%;
  max-height:100%;

}

div.holder .thumb{
  width:80px;
  height:60px;

}
div.default .thumb{
  position:absolute;
  left:5px;
  top:5px;
  height:560px;
  width:696px; 
  padding-left:3px;
}
div.thumbs:hover .default .thumb{
  position:relative;
  left:0px;
  top:0px;  
  width:80px;
  height:60px;
}


div.gallery .holder:hover .thumb{
  position:absolute;
  left:5px;
  top:5px;
  height:560px;
  width:696px; 
}


.gallery div.thumbimitator{ 
  margin-bottom:1px;
  background-color:black;
  border:1px gray solid;
  text-align:center;
  width:80px;
  height:60px;
  -moz-border-radius-topright: 5px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius-bottomright: 5px;
  -webkit-border-bottom-right-radius: 5px;
}

.gallery div.holder:hover .thumbimitator{
  border:1px black solid;
  border-left:1px solid gray ;
  height:60px;
  background-color:gray;
}

.gallery{
  float:left;
  padding:5px;
  background-color:#dddddd;  
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-bottomright: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  -webkit-border-bottom-left-radius: 10px;
}
.gallery .container{
  position:relative;
}

.gallery .title{ 
  font-size:12pt;
  text-align:center;
  font-weight:bolder;
}

div.box:hover .content{
  display:block;
}



.full{
  float:left;
  color:white;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  display:None;
  background-color:black;
  border-color:1px solid white;
  padding:2px;
  padding-left:4px;
  padding-right:7px;
  font-weight:bolder;
}
.full .fulli{
  display:None;
}
div.holder:hover .full{
  display:block;
}
div.full:hover .fulli{
  display:block;
  position:absolute;
  top:20px; 
  left:-1px; 
}

</style><link rel="stylesheet" media="screen" type="text/css" href="styles/common.css"></head>
<?php
Class Grid{
	public $rows;
	public $cols;

	public $beforeGrid="";
	public $funBeforeGrid="";	
	
	public $afterGrid="";
	public $funAfterGrid="";
	
	public $beforeRow="";
	public $funBeforeRow="";	
	
	public $afterRow="";
	public $funAfterRow="";
	
	public $beforeCell="";
	public $funBeforeCell="";
		
	public $afterCell="";
	public $funAfterCell="";
	
	public $cell="";
	public $funCell="";
	public function make1D($arr,$cols){

		$str="";
		$funBeforeGrid=$this->funBeforeGrid;
		if($funBeforeGrid==""){
			$str=$this->beforeGrid;
		}else{
			$str=$funBeforeGrid();
		}
		$funBeforeRow=$this->funBeforeRow;
		if($funBeforeRow==""){
			$funBeforeRow=create_function('$cell_index,$y','return str_replace(array("%cell_index","%row_number"),array($cell_index,$y),"'.$this->beforeRow.'");');
		}
		$funAfterRow=$this->funAfterRow;
		if($funAfterRow==""){
			$funAfterRow=create_function('$cell_index,$y','return str_replace(array("%cell_index","%row_number"),array($cell_index,$y),"'.$this->beforeRow.'");');
		}
				
		$funCell=$this->funCell;
		if($funCell==""){
			$funCell=create_function('$cell,$cell_index,$x,$y','
			return str_replace(array("%cell","%cell_index","%x","%y"),array($cell,$cell_index,$x,$y),"'.$this->cell.'");');
		}
		$funBeforeCell=$this->funBeforeCell;
		if($funBeforeCell==""){
			$funBeforeCell=create_function('$x,$y','
			return str_replace(array("%x","%y"),array($x,$y),"'.$this->beforeCell.'");');
		}
		$funAfterCell=$this->funAfterCell;
		if($funAfterCell==""){
			$funAfterCell=create_function('$x,$y','
			return str_replace(array("%x","%y"),array($x,$y),"'.$this->afterCell.'");');
		}				
		$i=0;
		$r=0;
		$c=0;
		foreach($arr as $cell){
			if(($c%$cols)==0){

				if($r>0){
					$str.=$funAfterRow($i,$r);
				}
				$str.=$funBeforeRow($i,$r);
				$c=0;
				$r++;
			}		
			$str.=$funBeforeCell($c,$r).$funCell($cell,$i,$c,$r).$funAfterCell($c,$r);
			$c++;
			$i++;
		}
		
		
		$funAfterGrid=$this->funAfterGrid;
		if($funAfterGrid==""){
			$str.=$this->beforeGrid;
		}else{
			$str.=$funAfterGrid();
		}		
		return $str;
	}	
}


$galGrid=new Grid();

$galGrid->beforeGrid="<table>";
$galGrid->afterGrid="";

$galGrid->beforeRow="";
$galGrid->afterRow="";

$galGrid->beforeCell="";
$galGrid->afterCell="";

function cellMaker($cell,$cell_index){
  return '<div class="holder'.(($cell_index==0)?' default':"").'"><div class="thumbimitator"><div class="thumb"><div class="full">Full<img class="fulli" src="'.$cell.'"/></div><img  class="fit" src="'.$cell.'"/></div></div></div>';
}

$galGrid->funCell="cellMaker";


?>

</style>

  <body>
<div class="box">
<div class="content">
<div class="gallery">
<div class="title">Coastal pictures from FreeDigitalPhotos.net</div>
<div class="container">
<div class="picture"></div>
<div class="thumbs">
<?php
echo $galGrid->make1D(glob("gallery/*.{jpg,png,jpeg,gif}",GLOB_BRACE ),1);
?>
</div>


</div>
</div>

</div>

<html>

Bruger #14510 @ 06.08.09 12:34

okay, det vil jeg da prøve og kigge på når jeg får adgang til en computer

mange tak

Bruger #13723 @ 24.08.09 13:55

Hej Nørden,

Jeg tænkte på om den class du har skrevet om du gad knalde nogel kommentarer ind så en knap så kyndig som jeg kan forstå hvad du har lavet der for det virker som en ret god class men nogle få ting er der fejl i. f.eks. kommer der ikke en </table> tag ved slutning selvom defineret i afterGrid. Og så om du muligvis kunne supplere noget mere advanceret css så det ikke kokser rundt når man hove musen hen over.

haster - Billed opload og visning

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler