PHP-Einfach.de
  • PHP Tutorial
  • MySQL Tutorial
  • Für Fortgeschrittene
  • Webhosting
  • Forum

Codeschnipsel

Bildergallerie

Zurück zur Übersicht
Hier will ich euch nun zeigen wie man sich eine kleine Bildergallerie mit Vorschau erstellen kann.
Diese baut zum Teil auf anderen Tutorials aus diesem Forum auf.


zuerst müssen wir einige Ordner nach folgender Struktur erstellen (alle php Dateien kommen jedoch in den Hauptordner):
einen Ordner "img" mit 2 Unterordnern:
upload und thumbnail.
und einen "js" Ordner, in den beide java script Dateien hineinkommen.

Als erstes die upload.php
<?php
    
include("config.php");
    include(
"thumbnail.php");
    
$maximal_size = $max_size / 1024;
//-- Datei überprüfen --//
    
$a = 0;
    while(
$a < $count_files)
        {
        if(
$_FILES['datei']['type'] == "image/$filetypes[$a]" OR $_FILES['datei']['type'] == "application/$filetypes[$a]" OR $_FILES['datei']['type'] == "text/$filetypes[$a]")
            {
            
$fehlerfrei = TRUE;
            }
        
$a++;
        }
//-- Wenns fehlerhaft ist --//
    
if($fehlerfrei != TRUE)
        {
        echo 
'Du darfst nur die Dateitypen -> ';
        
$a = 0;
        while(
$a < $count_files)
        {
        echo 
$filetypes[$a].', ';
        
$a++;
        }
        echo 
' <- hochladen';
        }
//-- Fehlerdiagnose bzw upload --//
    
else
        {
        if(
$_FILES['datei']['size'] > $min_size)
            {
            
$min_size = TRUE;
            }
        if(
$_FILES['datei']['size'] < $max_size)
            {
            
$max_size = TRUE;
            }
        if(
$min_size == "TRUE" AND $max_size == "TRUE")
            {
            
move_uploaded_file($_FILES['datei']['tmp_name'], "$pfad".$_FILES['datei']['name']);
        
//-- Thumbnail erstellen --//
            
thumbnail($pfad."".$_FILES['datei']['name']);
            echo 
'Deine Datei '.$_FILES['datei']['name'].' wurde erfolgreich hochgeladen.';
            }
        else
            {
            
$fehlerfrei = FALSE;
            echo 
'Du darfst nur Dateien mit einer Größe von '.$min_size.' Bytes bis '.$maximal_size.' KB hochladen.'; 
            }
        }
?>

Die dazu gehörige config.php:
<?php
$pfad        
= "img/upload/";                            # Pfad in dem die hochgeladenen Dateien gespeichert werden (Ordner muss existieren und mind. ChMod 755)
$min_size     = 10;                                        # minimale Dateigröße in Bytes
$max_size     = 1524288;                                    # maximale Dateigröße in Bytes -> 1024 Bytes = 1 KB / 1024 KB = 1 MB
$count_files = 4;                                        # Wie viele verschiedene Dateitypen soll es geben?
$filetypes     = array('jpg','jpeg','gif');
?>

und noch die thumbnail.php die die bilder zur vorschau auf die richtige größe schneidet:
<?php
function thumbnail($imgfile, $speicherordner="./img/thumbnail/", $filenameOnly=true)
   {
   
//Max. Größe des Thumbnail (Höhe und Breite)
   
$thumbsize = 140;

   
//Dateiname erzeugen
   
$filename = basename($imgfile);

   
//Fügt den Pfad zur Datei dem Dateinamen hinzu
   //Aus ordner/bilder/bild1.jpg wird dann ordner_bilder_bild1.jpg
   
if(!$filenameOnly)
      {
      
$replace = array("/","\\",".");
      
$filename = str_replace($replace,"_",dirname($imgfile))."_".$filename;
      }

   
//Schreibarbeit sparen
   
$ordner = $speicherordner;

   
//Speicherordner vorhanden
   
if(!is_dir($ordner))
      return 
false;

   
//Wenn Datei schon vorhanden, kein Thumbnail erstellen
   
if(file_exists($ordner.$filename))
      return 
$ordner.$filename;

   
//Ausgansdatei vorhanden? Wenn nicht, false zurückgeben
   
if(!file_exists($imgfile))
      return 
false;



   
//Infos über das Bild
   
$endung = strrchr($imgfile,".");

   list(
$width, $height) = getimagesize($imgfile);
   
$imgratio=$width/$height;

   
//Ist das Bild höher als breit?
   
if($imgratio>1)
      {
      
$newwidth = $thumbsize;
      
$newheight = $thumbsize/$imgratio;
      }
   else
      {
      
$newheight = $thumbsize;
      
$newwidth = $thumbsize*$imgratio;
      }

   
//Bild erstellen
   //Achtung: imagecreatetruecolor funktioniert nur bei bestimmten GD Versionen
   //Falls ein Fehler auftritt, imagecreate nutzen
   
if(function_exists("imagecreatetruecolor"))
     
$thumb = imagecreatetruecolor($newwidth,$newheight); 
   else
      
$thumb = imagecreate ($newwidth,$newheight);

   if(
$endung == ".jpg")
      {
      
imageJPEG($thumb,$ordner."temp.jpg");
      
$thumb = imagecreatefromjpeg($ordner."temp.jpg");

      
$source = imagecreatefromjpeg($imgfile);
      }
   else if(
$endung == ".gif")
      {
      
imageGIF($thumb,$ordner."temp.gif");
      
$thumb = imagecreatefromgif($ordner."temp.gif");

      
$source = imagecreatefromgif($imgfile);
      }

   
imagecopyresized($thumb, $source, 0, 0, 0, 0, $newwidth, $newheight, $width, $height);

   
//Bild speichern
   
if($endung == ".png")
      
imagepng($thumb,$ordner.$filename);
   else if(
$endung == ".gif")
      
imagegif($thumb,$ordner.$filename);
   else
      
imagejpeg($thumb,$ordner.$filename,100);


   
//Speicherplatz wieder freigeben
   
ImageDestroy($thumb);
   
ImageDestroy($source);


   
//Pfad zu dem Bild zurückgeben
   
return $ordner.$filename;
}
?>

Diese Dateien stammen aus schon existierenden codeschnipseln.
Nun brauchen wir noch eine index.php:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <!-- Head & Title include -->
<title></title>
    <!-- CSS -->

    <!-- end CSS -->
    <!-- Java scripts -->
<script src="js/mouseover.js" type="text/javascript"></script>
<script src="js/switch.js" type="text/javascript"></script>
    <!-- end java scripts -->
    <!-- end Head & Title include -->
    <!-- standard Design stylesheet -->
<style type="text/css">
<!--
#background{
    background-image:url('img/background.jpg');
    position: absolute;
    left:333px;
    top:166px;
    width:180px;
    height:180px;
    z-index:1;
}
#img{
    position:absolute;
    left:20px;
    top:20px;
    width:140px;
    height:140px;
    z-index:1;
}
#left{
    position:absolute;
    left:10px;
    top:75px;
    width:20px;
    height:30px;
    z-index:1;
}
#right{
    position:absolute;
    left:150px;
    top:75px;
    width:20px;
    height:30px;
    z-index:1;
}
-->
</style>
    <!-- end standard Design stylesheet -->
</head>
<body onload="switch_right()">
<noscript>Für diese Seite musst du Java Script aktiviert haben!</noscript>
    <form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="datei"><br>
    <input type="submit" value="Hochladen">
    </form><br><br><br>
    
    <div id="background">
        <div id="img"></div>
        <div id="left">
            <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('left_over','','img/left_over.png',1)" onclick="switch_left()">
                <img src="img/left.png" name="left_over" id="left_over" border="0">
            </a>
        </div>
        <div id="right">
            <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('right_over','','img/right_over.png',1)" onclick="switch_right()">
                <img src="img/right.png" name="right_over" id="right_over" border="0">
            </a>
        </div>
    </div>
</body>


sobald man nun auf einen der beiden Pfeile drückt, wird ein java script aktiviert.
switch.js:
function switch_left (){
    var http = false;
    if (navigator.appName == "Microsoft Internet Explorer"){
      http = new ActiveXObject("Microsoft.XMLHTTP");
    } else {
      http = new XMLHttpRequest();
    }
    http.open("GET", "switch.php?action=left", true);
    http.onreadystatechange=function() {
          if (http.readyState == 4) {
              document.getElementById("img").innerHTML=http.responseText;
          }
    }
    http.send(null);
}
function switch_right (){
    var http = false;
    if (navigator.appName == "Microsoft Internet Explorer"){
      http = new ActiveXObject("Microsoft.XMLHTTP");
    } else {
      http = new XMLHttpRequest();
    }
    http.open("GET", "switch.php?action=right", true);
    http.onreadystatechange=function() {
          if (http.readyState == 4) {
              document.getElementById("img").innerHTML=http.responseText;
          }
    }
    http.send(null);
}


Dieses gibt die Richtung in welche weitergescrollt werden soll per AJAX an eine switch.php weiter.
switch.php:
<?php
//-- Informationen bekommen  + daten vorbereiten --//
    
@session_start();
    @
$img_num = $_SESSION["img_num"];
    
$action = $_GET["action"];
    
$img = array();
    
$a = 0;
        
//-- Bilder auslesen + in array speichern --//
            
$handle = opendir ("img/thumbnail/");
            while (
$datei = readdir ($handle)){
                if(
$datei != ".." && $datei != "."  && $datei != "" && $datei != "temp.jpg" && $datei != "temp.gif"){
                    
$img[] = array("zahl" => "$a", "img" => "$datei");
                    
$a++;
                }
            }
            
closedir($handle);
    
//-- überprüfung welches Bild vorher ausgewählt war --//
        
$a--;
        if(
$img_num == ""){
            
$img_num = 0;
        }
    
//-- nach rechts scrollen --//
        
if($action == "right"){
            if(
$img_num == $a){
                
$a = 0;
            }else{
                
$a = $img_num;
                
$a++;
            }
        }
    
//-- nach links scrollen --//
        
if($action == "left"){
            if(
$img_num != "0"){
                
$a = $img_num;
                
$a--;
            }
        }
    
//-- Bild in SESSION speichern --//
        
$img = @$img[$a]["img"];
        
$_SESSION["img_num"] = $a;
//-- Bild an JS übergeben --//
    
echo '<a href="img/upload/'.$img.'"><img src="img/thumbnail/'.$img.'" width="140px" height="140px" border="0"></a>';
?>

In der switch.php werden alle Bilder aus dem Verzeichnis "img/thumbnail" ausgelesen und danach überprüft in welche Richtung gescrollt werden soll und überprüft, welches Bild derzeit angezeigt wird.
Je nach dem ob nach links oder rechts gewechselt werden soll wird + oder - gerechnet.
Danach wird das neue Bild in die Session "img_num" eingetragen, das Bild ausgegeben und an das Java Script zurückgeschickt.
Das Java Script gibt das Bild anschliesend in dem Div mit der id="img" aus.
mouseover.js:
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

Dieses Java script sorgt für den Bild wechsel, sobald man mit der Maus über die Pfeile rüberfährt.

MFG fehmaraner

//EDIT
Mouse Over für die Pfeile eingefügt + Dateien hochgeladen
//EDIT²
Index.php aufgeräumt
//EDIT³
Kommentare im Code gesetzt

Kommentare

Autor fehmaraner

Zurück zur Übersicht
Autor: Nils Reimers
Zurück: URLs im Text identifizieren

Für Fortgeschrittene

  • Objektorientierte Programmierung
  • PHP Sicherheit
  • Script-Beispiele
  • Codeschnipsel
  • Stellenmarkt
Mit freundlicher Unterstützung von:
  • Punkt191 Werbeagentur
  • CasinoAndy Finland
  • Casinoohnelizenz.info
  • Cryptocasinomaster.com
  • CasinoHEX.at
  • inkedin.com

Hoster – Geringste Ausfallzeit

  1. webgo Ø 1 Min.
  2. Linevast Ø 2 Min.
  3. netcup Ø 3 Min.
  4. All-Inkl.com Ø 6 Min.
  5. checkdomain Ø 8 Min.
  6. dogado Ø 17 Min.
  7. bplaced Ø 17 Min.
  8. Contabo Ø 25 Min.
  9. Hetzner Ø 49 Min.
  10. ONE.com Ø 62 Min.
» Mehr erfahren

Impressum | Datenschutz | Auf PHP-Einfach.de werben

© PHP-Einfach.de 2003 - 2023

Cookie-Zustimmung verwalten
Um dir ein optimales Erlebnis zu bieten, verwenden wir Technologien wie Cookies, um Geräteinformationen zu speichern und/oder darauf zuzugreifen. Wenn du diesen Technologien zustimmst, können wir Daten wie das Surfverhalten oder eindeutige IDs auf dieser Website verarbeiten. Wenn du deine Zustimmung nicht erteilst oder zurückziehst, können bestimmte Merkmale und Funktionen beeinträchtigt werden.
Funktional Immer aktiv
Die technische Speicherung oder der Zugang ist unbedingt erforderlich für den rechtmäßigen Zweck, die Nutzung eines bestimmten Dienstes zu ermöglichen, der vom Teilnehmer oder Nutzer ausdrücklich gewünscht wird, oder für den alleinigen Zweck, die Übertragung einer Nachricht über ein elektronisches Kommunikationsnetz durchzuführen.
Vorlieben
Die technische Speicherung oder der Zugriff ist für den rechtmäßigen Zweck der Speicherung von Präferenzen erforderlich, die nicht vom Abonnenten oder Benutzer angefordert wurden.
Statistiken
Die technische Speicherung oder der Zugriff, der ausschließlich zu statistischen Zwecken erfolgt. Die technische Speicherung oder der Zugriff, der ausschließlich zu anonymen statistischen Zwecken verwendet wird. Ohne eine Vorladung, die freiwillige Zustimmung deines Internetdienstanbieters oder zusätzliche Aufzeichnungen von Dritten können die zu diesem Zweck gespeicherten oder abgerufenen Informationen allein in der Regel nicht dazu verwendet werden, dich zu identifizieren.
Marketing
Die technische Speicherung oder der Zugriff ist erforderlich, um Nutzerprofile zu erstellen, um Werbung zu versenden oder um den Nutzer auf einer Website oder über mehrere Websites hinweg zu ähnlichen Marketingzwecken zu verfolgen.
Optionen verwalten Dienste verwalten Anbieter verwalten Lese mehr über diese Zwecke
Einstellungen ansehen
{title} {title} {title}