Einfache Gallerie

Singleplayer™ · 10/13/2021, 15:13

Hey , kennt jemand zufällig ein extrem simplen weg sowas wie eine Gallerie zu machen in html,php oder so , also ich würde mehrere medien auf ein server packen bilder sowie videos , diese sollen einfach der reihe nach auf der "website" gelistet sein , aber mit "vorschau" also auch die videos sollten wie man z.b. von windows kennt so ein "preview bild" haben.

da es sich dabei um eine ständig wachsende Gallerie handelt sollte es auch simpel gehalten sein , sodass man nicht erst 10 minuten im source rumspielen muss sondern einfach das bild/video aufn server packt 2-3 handgriffe macht und schon ist´s in der liste.
es soll auch sonst keine sicherheit oder sonst irgendwas geben da es nur für private zwecke ist , ich mein ein extrem simplen login bevor man auf die seite kommt wäre auch nicht schlecht aber eben nicht unbedingt nötig.

da ich nahezu 0 plan von html/php habe sollte es auch so einfach wie möglich sein , habe auch kein großes interesse an web programmierung daher am besten copy/paste ready (natürlich kann ich einfache änderungen an der source machen durch meine allgemeinen programmierkentnisse aber habe eben keine speziell auf html/php,css ,.... usw bezogen)

xShizoidx · 10/14/2021, 08:37

Auf diese Webseite gehen:

Dort auf Code -> Download ZIP gehen und nach Abschluss des Downloads den Ordner irgendwohin entpacken.
In dem Ordner kannst du den Inhalt der index.html einfach ersetzen gegen diesen Code hier:

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="dist/simpleLightbox.css">
</head>
<body>
    
    <div class="imageGallery1">
        <a href="demo/images/4big.jpg" title="Caption for gallery item 1"><img src="demo/images/4small.jpg" alt="Gallery image 1" /></a>
        <a href="demo/images/5big.jpg" title="Caption for gallery item 2"><img src="demo/images/5small.jpg" alt="Gallery image 2" /></a>
        <a href="demo/images/6big.jpg" title="Caption for gallery item 3"><img src="demo/images/6small.jpg" alt="Gallery image 3" /></a>
    </div>
    <script src="dist/simpleLightbox.js"></script>
    <script>
        new SimpleLightbox({elements: '.imageGallery1 a'});
    </script>
</body>
</html>

Dann speichern und in Google Chrome öffnen.

Ist sehr einfach zu erweitern und einzurichten.

Singleplayer™ · 10/14/2021, 10:01

@xShizoidx
danke dafür , werds heute direkt mal testen

#edit
funktioniert fast perfekt , wie würdest du das umsetzen damit die "preview" in einer festen größe angezeigt wird , also was in deinem source das "small" ist , würde einfach das original anzeigen wollen lassen , also ohne das ich da extra für jedes bild noch mal ein small erstellen muss

xShizoidx · 10/14/2021, 10:19

Quote:

Originally Posted by Singleplayer™

@xShizoidx
danke dafür , werds heute direkt mal testen

#edit
funktioniert fast perfekt , wie würdest du das umsetzen damit die "preview" in einer festen größe angezeigt wird , also was in deinem source das "small" ist , würde einfach das original anzeigen wollen lassen , also ohne das ich da extra für jedes bild noch mal ein small erstellen muss

Dort, wo die small Images sind, packst du einfach das selbe Ziel rein wie bei dem anderem Image, sodass jeder Image Link zweimal im Quellcode vorkommt. Dann wendest du etwas CSS an, so sieht es dann aus:

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="dist/simpleLightbox.css">
    <style>
        .imageGallery1 img:nth-child(odd) 
        {
            width: 30%;
            height: auto;
        }
    </style>
</head>
<body>
    
    <div class="imageGallery1">
        <a href="demo/images/4big.jpg" title="Caption for gallery item 1"><img src="demo/images/4big.jpg" alt="Gallery image 1" /></a>
        <a href="demo/images/5big.jpg" title="Caption for gallery item 2"><img src="demo/images/5big.jpg" alt="Gallery image 2" /></a>
        <a href="demo/images/6big.jpg" title="Caption for gallery item 3"><img src="demo/images/6big.jpg" alt="Gallery image 3" /></a>
    </div>
    <script src="dist/simpleLightbox.js"></script>
    <script>
        new SimpleLightbox({elements: '.imageGallery1 a'});
    </script>
</body>
</html>

Du kannst auch Pixelwerte statt % verwenden.

Singleplayer™ · 10/14/2021, 10:25

@xShizoidx
funktioniert perfekt danke <3
letzte frage wäre wegen dem video , habe mir die dokumentation auf github angeschaut und versucht den source von dort zu nutzen fürs video jedoch steht dann dauerhaft nur da "loading...." , wie würdest du das ganze einbauen ?

123liebdich · 10/20/2021, 12:11

Wenn du das ganze etwas dynamischer gestalten möchtest, statt jedes Bild statisch als HTML-Code hinzuzufügen, kannst du es z.B. auch so machen:
Dein Upload-Container:

Code:

<form action="" method="post" enctype="multipart/form-data">
    <label for="fileup">Choose file</label>
    <input type="file" accept=".jpg, .jpeg, .png, .gif" name="datei" id="fileup">
    </div>
    <button type="submit" name="upload" value="Upload">Upload</button>
</form>

PHP-Skript wird ausgeführt, wenn du auf den Upload-Button klickst. Es lädt die Datei auf deinen Server in das in $upload_folder angegebene Verzeichnis.

PHP Code:


			
<?php
  if(isset($_POST["upload"])) {
    $upload_folder = 'uploads/files/'; //Das Upload-Verzeichnis
    $filename = md5(pathinfo($_FILES['datei']['name'], PATHINFO_FILENAME));
    $extension = strtolower(pathinfo($_FILES['datei']['name'], PATHINFO_EXTENSION));
    
    //Überprüfung der Dateiendung
    $allowed_extensions = array('png', 'jpg', 'jpeg', 'gif');
    if(!in_array($extension, $allowed_extensions)) {
      die('<div>
          <strong>Unallowed filetype!</strong> Only png, jpg, jpeg und gif files are allowed!
        </div>');
    }
    
    //Überprüfung der Dateigröße
    $max_size = 50000*1024; //50 MB
    if($_FILES['datei']['size'] > $max_size) {
      die('<div>
            <strong>Unallowed filetype!</strong> Only '.$max_size.' MB allowed!
        </div>');
    }
    
    //Überprüfung dass das Bild keine Fehler enthält
    if(function_exists('exif_imagetype')) { //exif_imagetype erfordert die exif-Erweiterung
      $allowed_types = array(IMAGETYPE_PNG, IMAGETYPE_JPEG, IMAGETYPE_GIF);
      $detected_type = exif_imagetype($_FILES['datei']['tmp_name']);
      if(!in_array($detected_type, $allowed_types)) {
        die('<div>
            <strong>Unallowed filetype!</strong> Only png, jpg, jpeg und gif files are allowed!
        </div>');
      }
    }
    
    //Pfad zum Upload
    $new_path = $upload_folder.$filename.'.'.$extension;
    
    //Neuer Dateiname falls die Datei bereits existiert
    if(file_exists($new_path)) { //Falls Datei existiert, hänge eine Zahl an den Dateinamen
      $id = 1;
      do {
        $new_path = $upload_folder.$filename.'_'.$id.'.'.$extension;
        $id++;
      } while(file_exists($new_path));
    }
    
    //Alles okay, verschiebe Datei an neuen Pfad
    move_uploaded_file($_FILES['datei']['tmp_name'], $new_path);
    echo 'Your picture was successfully uploaded! <a target="_blank" href="'.$new_path.'">'.$new_path.'</a>';
    header('Location: https://deineurl.de/gallery.php');
    exit;
  }
?>

Zeigt alle Bilder an die in uploads/files hochgeladen wurden. Kannst natürlich den Filter auch anpassen bzw. erweitern auf mp4 oder wmv oder andere.

PHP Code:


			
<?php
  $i = 0;
  foreach (glob("uploads/files/*.{jpg,png,gif}", GLOB_BRACE) as $filename) {
    $i++;
    
    echo "<div style='margin-bottom: 15px;'>
            <a target='_blank' data-id='$i' href='$filename'>
              <img data-id='$i' src='$filename' style='max-width: 400px; max-height: 400px;' alt='$filename'>
            </a>
          </div>";
  }
  ?>

Der ganze Code ist schon sehr alt, ich glaube von 2015, hat damals aber sehr gut funktioniert und mein Anwendungsfall war ähnlich wie deiner. Nimm noch Bootstrap dazu und das ganze sieht halbwegs gut aus.

Singleplayer™ · 10/20/2021, 12:24

wenn das so funktioniert wie du es beschrieben hast erleichtert es die arbeit extrem , danke dafür <3.

muss mich erst mal um nen neuen root kümmern dann werd ich den source direkt testen