Bildkarussell in php welches sowohl Fotos als auch Videos wiedergibt

alter_user

Grünschnabel
Bildkarussell in php welches sowohl Fotos als auch Videos wiedergibt

Ich bin ein wenig am basteln. Mühsam habe ich aus vielen Web-Informationen ein (einfaches) Foto-Karusell "zusammengeschraubt".
Und es funktioniert recht gut: http://goo.gl/1p2Jjs !!!


Doch nun möchte ich diese GALERIE so erweitern das auch Videos ausgegeben werden (falls dies
möglich ist!)
Nach meiner Vorstellung (wenn sie richtig ist!) kann man ja Ordner nach ihrer Dateiendung auslesen
und in einem array speichern.

So in der art:

PHP:
<?php
$ordner = "../mediaordner1/";
$alledateien = scandir($ordner);                    
foreach ($alledateien as $datei) {
    $dateiinfo = pathinfo($ordner."/".$datei);

    if ($datei != "." && $datei != ".."  && $datei != "_notes" && $bildinfo['basename'] != "Thumbs.db") {
            $bildtypen= array("jpg", "jpeg", "gif", "png", "ogg", "mp4", "webm");
      
            if(in_array($dateiinfo['extension'],$bildtypen))
              { ...
    ?>

...und jenachdem ob foto oder video-typ kann/soll das dann ausgegeben werden.....

mein bilderkarusell (der php-teil) sieht derzeit so aus:

PHP:
<?
define ('IMGDIR', '../fotos/');
define ('WEBIMGDIR', '../fotos/');
define ('SS_SESSNAME', 'slideshow_sess');
$err = '';
session_name(SS_SESSNAME);
session_start();
$ss = new slideshow($err);
if (($err = $ss->init()) != '')
{
    header('HTTP/1.1 500 Internal Server Error');
    echo $err;
    exit();
}
$ss->get_images();
list($curr, $caption, $prev, $next, $last) = $ss->run();

class slideshow
{
    private $files_arr = NULL;
    private $err = NULL;

    public function __construct(&$err)
    {
        $this->files_arr = array();
        $this->err = $err;
    }
    public function init()
    {
  
        if (!$this->dir_exists())
        {
            return 'Error retrieving images, missing directory';
        }
        return '';
    }
    public function get_images()
    {
  
        if (isset($_SESSION['imgarr']))
        {
            $this->files_arr = $_SESSION['imgarr'];
        }
        else
        {
            if ($dh = opendir(IMGDIR))
            {
                while (false !== ($file = readdir($dh)))
                {
                    if (preg_match('/^.*\.(jpg|jpeg|gif|png)$/i', $file))
                    {
                        $this->files_arr[] = $file;
                    }
                }
                closedir($dh);
            }
            $_SESSION['imgarr'] = $this->files_arr;
        }
    }
    public function run()
    {
        $curr = 1;
        $last = count($this->files_arr);
        if (isset($_GET['img']))
        {
            if (preg_match('/^[0-9]+$/', $_GET['img'])) $curr = (int)  $_GET['img'];
            if ($curr <= 0 || $curr > $last) $curr = 1;
        }
        if ($curr <= 1)
        {
            $prev = $curr;
            $next = $curr + 1;
        }
        else if ($curr >= $last)
        {
            $prev = $last - 1;
            $next = $last;
        }
        else
        {
            $prev = $curr - 1;
            $next = $curr + 1;
        }
  
        $caption = str_replace('-', ' ', $this->files_arr[$curr - 1]);
        $caption = str_replace('_', ' ', $caption);
        $caption = preg_replace('/\.(jpe?g|gif|png)$/i', '', $caption);
        $caption = ucfirst($caption);
        return array($this->files_arr[$curr - 1], $caption, 1, $prev, $next, $last);
    }
    private function dir_exists()
    {
        return file_exists(IMGDIR);
    }

}
?>

Die Bilder-Galerie in Aktion: http://goo.gl/1p2Jjs !!!

Doch nun bräuchte ich ein kurzes Tutorial wo ich diese Abfrage, also, ob Foto oder Video
am besten einbaue.
Kann mir jemand da bitte bei helfen?

Grüsse derAlte
 
Zuletzt bearbeitet:
Hi,
also ich finde es auch etwas ungünstig eine Gallerie mit PHP zu erstellen.
Auch ist die Usability besser wenn du das mittels JS/CSS umsetzt.
Also mich nervt das immer wenn bei jedem Bild die Seite neugeladen wird, siehe auch T3N.
Da macht es auch immer keinen Spass sich Bildgallerien anzuschauen :).

Grüße
 
SCHADE, wirklich schade, das mir nicht geholfen werden konnte.
Ich bin nicht so ein Fan von jquery-scripten und ehrlich gesagt nerven die mich sehr,
daher habe ich ein Script-Blocker aktiv. Denn man weiss nie was im www so keucht und pfleucht.
Nennt mich altmodisch, aber ich finde das die herkömmliche Methoden auch funzen,
zudem wird ja immer auch ein alternativer weg gecodet wenn java-script blockiert wird.
Kann mir denn wirklich niemand ein Tipp geben wie ich weitermachen kann????

Grüsse der ALTE
 
Hi,
also ich würde das Array welches alle Dateien ausgelesen hat aufteilen in welche mit den Videos und denen mit normalen Bildteilen.
Wie man das jetzt genau macht, müsste ich auch nachschauen, explode oder split könnte das helfen.
Dann musst Du das ganze mittels den neuen HTMl-Elementen video, controls etc. (https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats)
Den Player kannst Du dann mittel Javascript auch beeinflussen.

Da Deine Galerie ja funktioniert, frage ich mich gerade, wo Dein direktes Problem liegt.
Im Grunde funktioniert das doch mit dem Video genauso. Du musst nur andere HTML-Elemente verwenden.
Vielleicht kannst Du Dein Problem konkretisieren?

Ich bin nicht so ein Fan von jquery-scripten und ehrlich gesagt nerven die mich sehr,
daher habe ich ein Script-Blocker aktiv.
Sorry was ist das den für eine pauschalisierte Aussage. Keiner zwingt Dich jQuery einzusetzen, Du kannst auch traditionelles JS verwenden.
Und das Dich jquery-scripte nerven, ähm so gut wie jede halbwegs moderne Webseite verwendet inzwischen Javascript, davon mal abgesehen ist JS auch Bestandteil von HTML5.
JS abzulehnen ist so early 90s. Klar kann man damit Mist machen aber Du kannst auch über die Straße gehen und sterben. Um das Risiko zu minimieren, geht man auch nicht zu Fuß über Schnellstraßen.
Genauso sollte man sich von entsprechenden Webseiten fernhalten.
Vernünftig eingesetztes JS erhöht die Usability einer Webseite.
Ein anderer Punkt bzgl. einer PHP-Galerie ist die grenzwertige Semantik.

Auch ich habe einen Scriptblocker aktiv. Aber nicht weil ich Angst vor JS habe.

Auch ich bin der Meinung das progressive Webentwicklung notwenig ist. Man sollte sich aber trotzdem fragen, ob Man grad den richtigen Weg einschlägt bzw. für etwas die richtige Technik.
Im Fall einer Galerie würde ich eher zu einer CSS/JS Variante greifen als zu einer reinen PHP oder PHP/JS Variante. Oder ich würde im Fall von ausgeschaltetem JS einfach alle Bilder anzeigen lassen.

Grüße
 
Hi,
also ich würde das Array welches alle Dateien ausgelesen hat aufteilen in welche mit den Videos und denen mit normalen Bildteilen.
Wie man das jetzt genau macht, müsste ich auch nachschauen, explode oder split könnte das helfen.
Dann musst Du das ganze mittels den neuen HTMl-Elementen video, controls etc. (https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats)
Den Player kannst Du dann mittel Javascript auch beeinflussen.
( ... )

Hi, genau, richtig erkannt, DAS ist es, woran es bei mir auch scheitert.

In dem (ich sag mal) Media-Ordner soll sich beides befinden, sowohl Videos (jeweils in doppelter Form von webm, mp4) als auch normale jpgs,
und dieser Media-Ordner soll ausgelesen werden.


Es ist also eine Art Weiche gefragt, die Videos und Fotos unterscheidet.
Wenn "video" gewählt wird dann muss ja <video> </video> "aktiviert" werden, ansonsten <picture> </picture>

Auch wenn (ich sag mal) ein Video "verarbeitet" wird soll/muss ja der Zähler (die Anzahl der im Ordner befindlichen
Dateien) auch weiterzählen, wie jetzt bei den Fotos auch.

Und genau da hakt es bei mir, wie soetwas technisch aussieht. Kannst Du mich da weiterbringen?

Im Grunde ginge es doch so:

PHP:
<?php
$ordner = "../media/media_ordner_1";
$handle = opendir($ordner);
$dir = array();
while($file = readdir($handle)){
if($file != "." && $file != ".."){
$dir[] = $file;
}
}
closedir($handle);
sort($dir);
foreach($dir as $file){ 
    $extension = substr(strrchr($file,"."),1);
    $extension = strtolower($extension);
    if($extension=="jpg"){
      include 'foto-ausgabe.php';
    }
    if($extension=="mp4"){
      include 'video-ausgabe.php';
    }
if($extension=="webm"){
      include 'video-ausgabe.php';
  } 
}
}
?>

Nur wie bau ich das nun in meinem bereits vorhandenen Quelltext ein?


Grüss der Alte
 
Zuletzt bearbeitet:
Bitte sehr:

Code:
<?
define ('IMGDIR', '../fotos/');
define ('WEBIMGDIR', '../fotos/');
define ('SS_SESSNAME', 'slideshow_sess');
$err = '';
session_name(SS_SESSNAME);
session_start();
$ss = new slideshow($err);
if (($err = $ss->init()) != '')
{
    header('HTTP/1.1 500 Internal Server Error');
    echo $err;
    exit();
}
$ss->get_images();
list($curr, $caption, $prev, $next, $last) = $ss->run();

class slideshow
{
    private $files_arr = NULL;
    private $err = NULL;
 
    public function __construct(&$err)
    {
        $this->files_arr = array();
        $this->err = $err;
    }
    public function init()
    {
     
        if (!$this->dir_exists())
        {
            return 'Error retrieving images, missing directory';
        }
        return '';
    }
    public function get_images()
    {
     
        if (isset($_SESSION['imgarr']))
        {
            $this->files_arr = $_SESSION['imgarr'];
        }
        else
        {
            if ($dh = opendir(IMGDIR))
            {
                while (false !== ($file = readdir($dh)))
                {
                    if (preg_match('/^.*\.(jpg|jpeg|gif|png)$/i', $file))
                    {
                        $this->files_arr[] = $file;
                    }
                }
                closedir($dh);
            }
            $_SESSION['imgarr'] = $this->files_arr;
        }
    }
    public function run()
    {
        $curr = 1;
        $last = count($this->files_arr);
        if (isset($_GET['img']))
        {
            if (preg_match('/^[0-9]+$/', $_GET['img'])) $curr = (int)  $_GET['img'];
            if ($curr <= 0 || $curr > $last) $curr = 1;
        }
        if ($curr <= 1)
        {
            $prev = $curr;
            $next = $curr + 1;
        }
        else if ($curr >= $last)
        {
            $prev = $last - 1;
            $next = $last;
        }
        else
        {
            $prev = $curr - 1;
            $next = $curr + 1;
        }
     
        $caption = str_replace('-', ' ', $this->files_arr[$curr - 1]);
        $caption = str_replace('_', ' ', $caption);
        $caption = preg_replace('/\.(jpe?g|gif|png)$/i', '', $caption);
        $caption = ucfirst($caption);
        return array($this->files_arr[$curr - 1], $caption, 1, $prev, $next, $last);
    }
    private function dir_exists()
    {
        return file_exists(IMGDIR);
    }
 
}
?>
<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>meine website</title>
     
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Cabin+Sketch' rel='stylesheet' type='text/css'>
    <style type="text/css">
         
        a{color:#333; font-weight: bold; font-size: 3.3vw; text-decoration: none; line-height: 2.5vw;}
        a:hover{color:#352dd8; font-size: 3.3vw; text-decoration: none; border: line-height: 2.5vw;}
     
     
        img { max-width: 100%; height: auto; max-height: 69.7vh;}

        .bildtitel p {color:#000000; font-size: 1.6vw; line-height: 1.2vw; margin: 0; padding: 0;}
     
     
     
        #maincontainer {
             
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;

                -webkit-flex-wrap: wrap;
                -moz-box-wrap: wrap;
                flex-wrap: wrap;

                -webkit-align-items: center;
                -ms-flex-align-items: center;
                align-items: center;

                -webkit-justify-content: center;
                -ms-flex-justify-content: center;
                justify-content: center;

                background-color: #ffffff;
                width: 41vw;
                margin: 0 auto;
                padding: 0;
            } 
     
     
        #fotobox  {
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -webkit-align-items: center;
                -ms-flex-align-items: center;
                align-items: center;

                -webkit-justify-content: center;
                -ms-flex-justify-content: center;
                justify-content: center;
                background-color: #ffffff;
                width: 37.4vw; 
        }

     
        #bottonbox  {
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                width: 40.8vw;             
        }
     
     
        #bottonbox > .bottonprevious {
                -display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                flex: 5 2;  
                -webkit-flex-direction: row;
                flex-direction:         row;
                padding-left: 1.3vw;
                padding-top: 0.3vw;
                padding-bottom: 0.3vw;
                background-color: #e1e1d3;
        }
     
     
        #bottonbox > .bildtitel {
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -webkit-align-items: center;
                align-items: center;
                -webkit-justify-content: center;
                justify-content: center;
                width: 32vw;
                padding-top: 0.6vw;
                padding-bottom: 0.3vw;         
                background-color: #e1e1d3;
        }
     
     
        #bottonbox > .bottonnext {
                -display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                flex: 5 2;
                -webkit-flex-direction: row-reverse;
                flex-direction:         row-reverse;
                padding-right: 1.3vw;
                padding-top: 0.3vw;
                padding-bottom: 0.3vw;
                background-color: #e1e1d3;
        } 
     
    </style>

</head>
 
    <body>
 
     
                <div id="maincontainer">
                 
                    <div id="fotobox">
                 
                                <img src="<?=WEBIMGDIR;?><?=$curr;?>" alt="" />
                         
                    </div>
                 
                 
                    <div id="bottonbox">
                 
                 
                        <div class="bottonprevious">
                 
                            <a href="?img=<?=$prev;?>"> << </a>
                         
                        </div>
                     
                        <div class="bildtitel">
                     
                            <p class="bildtitel"><?=$caption;?></p>
                         
                        </div>
                 
                        <div class="bottonnext">
                     
                            <a href="?img=<?=$next;?>"> >> </a>
                         
                        </div>
                 
                     
                    </div>                 

                </div>
     
    </body>
</html>


wenn ich diese Stelle:

if (preg_match('/^.*\.(jpg|jpeg|gif|png|mp4|webm)$/i', $file))

und diese Stelle:

$caption = preg_replace('/\.(jpe?g|gif|png|mp4|webm)$/i', '', $caption);

(mit mp4 / webm)
erweitere, dann müsste doch der zähler ( $curr ) um eins erhöht werden, auch wenn
es sich um ein Video handelt! Oder?
 
Zuletzt bearbeitet:
Zurück