Hallo liebe Forengemeinde,
ich bin dabei ein PHP - Bildkarussell, welches sowohl Fotos als auch Videos aus einem gemeinsamen Ordner abspielt, zu erstellen.
Zuvor, ja, bei tutorials.de habe ich ebenfalls die Frage gestellt, bisher aber kein Lösungsweg bekommen, ich warte schon lange, daher mein post hier.
Ich möchte kein jquery-script einsetzen, wie ebenfalls dort vorgeschlagen und nur PHP einsetzen, auch wenn es "90er - style" ist.
In einem Media - Ordner befinden sich sowohl Fotos als auch Videos die entsprechend "abgespielt werden sollen.
Ich benötige also eine Art "Weiche", welche erkennt ob ein Foto oder ein Video ausgegeben wird.
Grundsätzlich sähe soetwas doch so (in der Art) aus:
Ist dies richtig?
Nungut. Mein bisheriges script gibt bisher alle img`s aus einem Ordner an:
Es ist ein MODUL welches ich in meiner Seite "einsetzen" möchte (hier habe ich das css das html und das PHP zur Übersicht hintereinander getippt)
An den beiden Stellen:
if (preg_match('/^.*\.(jpg|jpeg|gif|png|webm|mp4|ogg)$/i', $file))
und:
$caption = preg_replace('/\.(jpe?g|gif|png|webm|mp4|ogg)$/i', '', $caption);
habe ich die Video-Endungen: webm / mp4 und ogg eingefügt
eigentlich müsste also der Bildzähler auch die Videos mitzählen.
Sehe ich dies richtig?
Um nun meine Foto / Video Weiche einzusetzen bräuchte ich eigentlich nicht nochmal (wie im script ganz oben) den Ordner zu durchsuchen,
denn ich habe eine Variable $curr die den aktuellen img / Video Namen enthält:
Daher habe ich mir gedacht das meine Weiche so aussähe:
Doch wie gebe ich in meinem Fall ein Foto bzw ein Video
mit den Variablen als echo "'<image source="......" aus
was im normalen html so aussähe: <img src="<?=WEBIMGDIR;?><?=$curr;?>" alt="" />
Meine Frage: Findet ihr diese Lösung ebenfalls nicht elegant gelöst oder wie würdet Ihr soetwas lösen?
Oder eben doch den Media-Ordner auslesen mit den entsprechenden Variablen?
Was denkt Ihr??
DANKE im vorraus.
Grüsse der einsiedler
ich bin dabei ein PHP - Bildkarussell, welches sowohl Fotos als auch Videos aus einem gemeinsamen Ordner abspielt, zu erstellen.
Zuvor, ja, bei tutorials.de habe ich ebenfalls die Frage gestellt, bisher aber kein Lösungsweg bekommen, ich warte schon lange, daher mein post hier.
Ich möchte kein jquery-script einsetzen, wie ebenfalls dort vorgeschlagen und nur PHP einsetzen, auch wenn es "90er - style" ist.
In einem Media - Ordner befinden sich sowohl Fotos als auch Videos die entsprechend "abgespielt werden sollen.
Ich benötige also eine Art "Weiche", welche erkennt ob ein Foto oder ein Video ausgegeben wird.
Grundsätzlich sähe soetwas doch so (in der Art) aus:
PHP-Code:
<?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"){
echo "'<image source=" <!-- Pfad zur Datei --> "; }
if($extension=="mp4"){
echo "'<video source=" <!-- Pfad zur Datei --> "; }
if($extension=="webm"){
echo "'<video source=" <!-- Pfad zur Datei --> "; } } }
?>
Nungut. Mein bisheriges script gibt bisher alle img`s aus einem Ordner an:
Es ist ein MODUL welches ich in meiner Seite "einsetzen" möchte (hier habe ich das css das html und das PHP zur Übersicht hintereinander getippt)
PHP-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, $first, $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|webm|mp4|ogg)$/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|webm|mp4|ogg)$/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">
<!-- HIER DIE FOTO / VIDEO WEICHE -->
<?
echo $curr;
$ext = pathinfo($curr, PATHINFO_EXTENSION);
echo $ext;
$mediaendungen = array('ogg','mp4','webm');
if(in_array($ext ,$mediaendungen)) {
echo "treffer";
<!-- HIER DIE Ausgabe des VIDEOS -->
}
else {
echo "dann nicht";
<!-- HIER DIE Ausgabe des FOTOS -->
}
?>
<!-- NORMALE Ausgabe Foto --> <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>
An den beiden Stellen:
if (preg_match('/^.*\.(jpg|jpeg|gif|png|webm|mp4|ogg)$/i', $file))
und:
$caption = preg_replace('/\.(jpe?g|gif|png|webm|mp4|ogg)$/i', '', $caption);
habe ich die Video-Endungen: webm / mp4 und ogg eingefügt
eigentlich müsste also der Bildzähler auch die Videos mitzählen.
Sehe ich dies richtig?
Um nun meine Foto / Video Weiche einzusetzen bräuchte ich eigentlich nicht nochmal (wie im script ganz oben) den Ordner zu durchsuchen,
denn ich habe eine Variable $curr die den aktuellen img / Video Namen enthält:
Daher habe ich mir gedacht das meine Weiche so aussähe:
PHP-Code:
$ext = pathinfo($curr, PATHINFO_EXTENSION);
echo $ext;
$mediaendungen = array('ogg','mp4','webm');
if(in_array($ext ,$mediaendungen)) {
echo "treffer";
<!-- hier die Ausgabe des Videos -->
echo "'<video source="......" <!-- Wie sieht soetwas korrekt aus? -->
}
else {
echo "dann nicht";
<!-- hier die Ausgabe der Fotos -->
echo "'<image source="......" <!-- Wie sieht soetwas korrekt aus? -->
}
Doch wie gebe ich in meinem Fall ein Foto bzw ein Video
mit den Variablen als echo "'<image source="......" aus
was im normalen html so aussähe: <img src="<?=WEBIMGDIR;?><?=$curr;?>" alt="" />
Meine Frage: Findet ihr diese Lösung ebenfalls nicht elegant gelöst oder wie würdet Ihr soetwas lösen?
Oder eben doch den Media-Ordner auslesen mit den entsprechenden Variablen?
Was denkt Ihr??
DANKE im vorraus.
Grüsse der einsiedler
Kommentar