Profil | Mitglieder | Registrieren | Start | Suche


PHP-Support.de » Programmierung » PHP & MySQL » Codeschnipsel » Bildergallerie    » Hallo Gast [Login | Registrieren]

Neues Thema | Antworten   

Autor Beitrag
fehmaraner
Mitglied
Guter User


Dabei seit: 15.02.2009
Herkunft: Fehmarn
Posts: 380
     Bildergallerie Zitat | Bearbeiten

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  
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
<?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  
1:
2:
3:
4:
5:
6:
7:
<?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  
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
<?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:
 PHP  
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
<!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:
 PHP  
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
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  
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
<?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:
 PHP  
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
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

Dateianhang:
 bildergallerie.zip  (32 KB, 889 mal herruntergeladen)


Post wurde schon 12x editiert, das letzte mal am 24.07.2012 um 09:59 von Andavos
18.09.2009, 15:37 Profil | PM | E-Mail  
Vielgeist
Mitglied
Exzellenter User


Dabei seit: 26.12.2008
Herkunft: Berlin
Posts: 1371
      Zitat | Bearbeiten

Hi

Also von mir bekommt dein Script auf einer Skala von 1-10
nur eine 4


-Du hast im Quellcode keine Infos angegeben.
-Du hast nicht gesagt auf welche anderen Codeschnipsel das aufbaut.

-Die Bilder werden immer in einer neuen Seite geöffnet was das ganze mit dem hin und zurück klicken immer sehr nervig macht.
-Beim überfahren über die Pfeile wird nicht deutlich dass man sie benutzen kann.

-Du hast Css und HTML nicht sauber in jeweilige Datein getrennt.

-Das hochladen der Bilder ist für eine reine Fotogallerie total unwichtig
CONTEMPLATION

If today was perfect, there would be no need for tomorrow.


Mein Youtube Channel
18.09.2009, 16:24 Profil | PM | E-Mail  
fehmaraner
Mitglied
Guter User


Dabei seit: 15.02.2009
Herkunft: Fehmarn
Posts: 380
      Zitat | Bearbeiten

Zitat:
Du hast im Quellcode keine Infos angegeben.

-> dafür ist es doch so erklärt? (erledigt)

Zitat:
Du hast nicht gesagt auf welche anderen Codeschnipsel das aufbaut.

-> das upload script vom upload script und die thumbnails von dem thumbnail

Zitat:
Die Bilder werden immer in einer neuen Seite geöffnet was das ganze mit dem hin und zurück klicken immer sehr nervig macht.

-> stimmt, aber ein tutorial soll ja nur den grundstein legen

Zitat:
Beim überfahren über die Pfeile wird nicht deutlich dass man sie benutzen kann.

-> danke für den tipp (erledigt)

Zitat:
Du hast Css und HTML nicht sauber in jeweilige Datein getrennt.

-> finde ich bei 5 css befehlen unnötig (nicht möglich, da dann css error auftreten und die Seite nicht mehr korrekt dargestellt wird)

Zitat:
Das hochladen der Bilder ist für eine reine Fotogallerie total unwichtig

-> kommt drauf an wofür mans braucht und ich hatte das eh fertig



Post wurde schon 3x editiert, das letzte mal am 18.09.2009 um 17:39 von fehmaraner
18.09.2009, 16:30 Profil | PM | E-Mail  
Gast
      Zitat | Bearbeiten

HMM also ich ahb ein bild hochgeladen und jetzt? der zeigt mir garnichts an o.O

15.05.2010, 13:46  
Gast
      Zitat | Bearbeiten

ah doch jetzt zeigt er mir es erst an ^^

15.05.2010, 13:48  
asdf
Mitglied
Guter User


Dabei seit: 26.10.2009
Herkunft: keine Angabe
Posts: 449
      Zitat | Bearbeiten

deine live vorschau geht nicht 404!



Post wurde schon 1x editiert, das letzte mal am 26.07.2011 um 10:58 von asdf
16.05.2010, 17:20 Profil | PM | E-Mail  
schogetten
Mitglied
Gruenling


Dabei seit: 07.01.2011
Herkunft: Berlin
Posts: 29
      Zitat | Bearbeiten

Hallo,

ich teste gerade ein weinig diese gallery, aber habe iein problem mit den thumbnails.
Bei manchen Bildern ersccheint mir folgender Fehler:


Warning: imagecopyresized() expects parameter 2 to be resource, null given in C:\xampp\htdocs\thumbnail.php on line 76

Warning: imagedestroy() expects parameter 1 to be resource, null given in C:\xampp\htdocs\thumbnail.php on line 89


es handelt sich hierbei immer um $source was nicht gefunden wird. kommischerweise aber nicht bei allen bildern.

wo liegt da der fehler ?

Gruß
Marc

07.01.2011, 18:17 Profil | PM | E-Mail  
Gast
      Zitat | Bearbeiten

Zitat:
Orginal von schogetten
Hallo,

ich teste gerade ein weinig diese gallery, aber habe iein problem mit den thumbnails.
Bei manchen Bildern ersccheint mir folgender Fehler:


Warning: imagecopyresized() expects parameter 2 to be resource, null given in C:\xampp\htdocs\thumbnail.php on line 76

Warning: imagedestroy() expects parameter 1 to be resource, null given in C:\xampp\htdocs\thumbnail.php on line 89



25.07.2011, 16:58  
Seiten (1):  1 
PHP-Support.de » Programmierung » PHP & MySQL » Codeschnipsel » Bildergallerie   

Neues Thema | Antworten   


Powered by Command Board 1.0 - Beta 2.0 © 2004-08 PHP-Einfach | Impressum | Datenschutz