Foto's Lightbox + PHP

Status
Niet open voor verdere reacties.
B

BoukeWeening

Gebruiker
Lid geworden
3 apr 2007
Berichten
232
Goedemiddag,

Ik heb het volgende, voor onze website: www.festival316.nl. wil ik graag het volgende in elkaar zetten. De huidige beheerders onderhouden de site door een simpel CMS systeempje, zelf in elkaar geknutseld! Dus die schrijven in een tekstvak een berichtje wat in een database wordt opgeslagen en deze wordt op de site weer geladen...

Nu wil ik graag een scriptje o.i.d. maken/hebben waarbij hun gemakkelijk een album met foto's op de site kunnen plaatsen. Dus eigenlijk zo dat je 1 foto ziet, waar je op kunt klikken en dat hij dan lightbox opent en alle foto's in het zelfde mapje op de server door kunt gaan... En dit eigenlijk zonder extra werk voor de beheerders.

Dus in het kort:
En script of code die achter elk plaatje een lightbox hangt en hierna de hele map meeneemt in het album...

Vraag ik te veel of is zoiets mogelijk (of heeft iemand een ander steengoed idee? :o)

Alvast bedankt voor jullie reacties!!!
 
Even voor de duidelijkheid:
Je wilt dus dat er één foto te zien is, en dan als je er op klikt, lightbox opent en dat je dan alle fotos door kunt klikken.
Zoja, dit zal vast mogelijk zijn.
Ik zou eerst beginnen met een database te ontwerpen met daarin:
locatie afbeelding, naam afbeelding, album.
Dan een pagina maken (voor de admin) waar hij alle fotos kan uploaden en tegelijkertijd in de database stopt.
Dan op de pagina die je wilt laten zien alle fotos uit één album loopt, er maar een laat zien en de andere op display="none" zet.

Ik ga het even proberen te maken voor je:)

Gegroet, Michiel
 
Zo, denk dat ik het af heb.. heb er nog geen resize functie in verwerkt dus je zult de fotos zelf even kleiner moeten maken. Op verzoek zal ik deze er nog bij maken als ik tijd heb.
Wat je eerst zult moeten doen is een MySQL database maken met deze SQL:
Code: 
CREATE TABLE IF NOT EXISTS `fotos` (
  `naam` text NOT NULL,
  `commentaar` text NOT NULL,
  `album` text NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

Ik ga niet uitleggen hoe dit moet, ik denk dat je dit zelf wel weet en anders de beheerder van je website.

Dan hebben we wat bestanden:
Maak een map aan (upload) in de map waar dit bestand zich bevindt:
upload.php (voor de uploader van de fotos):
PHP: 
<?php
if(isset($_POST["submit"])){
	$link = mysql_connect('localhost', 'root', '');
	if (!$link) { die('Could not connect: ' . mysql_error()); }
	mysql_select_db("lightbox",$link);
	$album = $_POST["album"];
	$comments = $_POST["commentaar"];
	$i=0;
	foreach($_FILES["foto"]["name"] as $foto){
		$commentaar = $comments[$i];
		$tmp_name = $_FILES["foto"]["tmp_name"][$i];
		move_uploaded_file($tmp_name,"upload/" . $foto);
		mysql_query("INSERT INTO fotos (naam,commentaar,album) VALUES ('$foto','$commentaar','$album')");
		$i++;
	}
	mysql_close($link);
	echo "Uploaden Succesvol!";
}
?>
<html>
<head>
<script>
var counter = 1;
var limit = 0;
function addInput(divName){
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "<label>Foto " + (counter + 1) + ": "+
          					 	"<input type='file' name='foto[]' />\n"+
          					 	"<input type='text' name='commentaar[]' value='commentaar' />\n"+
          					 "</label><br>";
          document.getElementById(divName).appendChild(newdiv);
          counter++;
}
</script>
</head>
<body>
	<form action="upload.php" method="POST" enctype="multipart/form-data">
		<label>Album: 
			<input type="text" name="album" />
		</label>
		<hr>
		<div id="foto">
		<label>Foto 1: 
			<input type="file" name="foto[]" />
			<input type="text" name="commentaar[]" value="commentaar" />
		</label><br>
		</div>
		<a href="#" onclick="addInput('foto');">+Foto!</a><br>
		<input type="submit" name="submit" value="Upload!" />
</form>
</body>
</html>

Dan hebben we het script die je op de homepage moet zetten:
De eerste foto wordt als de foto gezien die je gaat laten zien op de pagina, het stuk php plak je waar je de afbeelding wilt laten zien. Ook geef je het album aan dat je wilt laten zien door de variable $album aan te passen.
PHP: 
<html>
<head>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</head>
<body>
<?php
$link = mysql_connect('localhost', 'root', '');
if (!$link) { die('Could not connect: ' . mysql_error()); }
mysql_select_db("lightbox",$link);
$album = "Wallpapers";
$result = mysql_query("SELECT * FROM fotos WHERE album='$album'");
$i=1;
while ($row = mysql_fetch_assoc($result)) {
    $naam = $row["naam"];
    $commentaar = $row["commentaar"];
    $album = $row["album"];
    if($i=="1"){
    	echo "<a href='upload/$naam' rel='lightbox[$album]'><img src='$naam'</a>\n";
    }else{
    	echo "<span style='display:none;'><a href='upload/$naam' rel='lightbox[$album]'>$naam</a></span>\n";
    }
    $i++;
}
?>
</body>
</html>

Mocht je nog vragen hebben, stel ze maar!:)

Gegroet, Michiel
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan