Simple Gallery für z.B. Überwachungsbilder

[Aurel_B]

Ich wollte ein paar Bilder (3x3) von einer Überwachungskamera einbinden als kleine, responsive Gallerie die sowohl am PC als auch auf dem Handy schön dargestellt wird. Dazu habe ich ein weblink definiert:

Code Auswählen Erweitern

define Chiggin_Cam_Gallery weblink htmlCode { `/usr/local/bin/php /opt/fhem/www/chigginCam/gallery.php`}
Der entsprechende Code aus dem gallery.php:

Code Auswählen Erweitern

<?php $rand = rand(0,100);?>
<div class="row">
    <div class="column">
        <?php if (file_exists('/opt/fhem/www/chigginCam/Uebersicht_Morgen.jpg')) { echo('<img src="/fhem/chigginCam/Uebersicht_Morgen.jpg?'.$rand.'" />'); } else { echo('<p>Kein Bild für Übersicht (Morgen)</p>'); } ?>
        <?php if (file_exists('/opt/fhem/www/chigginCam/Uebersicht_Mittag.jpg')) { echo('<img src="/fhem/chigginCam/Uebersicht_Mittag.jpg?'.$rand.'" />'); } else { echo('<p>Kein Bild für Übersicht (Mittag)</p>'); } ?>
        <?php if (file_exists('/opt/fhem/www/chigginCam/Uebersicht_Abend.jpg'))  { echo('<img src="/fhem/chigginCam/Uebersicht_Abend.jpg?'.$rand.'" />'); }  else { echo('<p>Kein Bild für Übersicht (Abend)</p>'); } ?>
    </div>
    <div class="column">
        <?php if (file_exists('/opt/fhem/www/chigginCam/NestLinks_Morgen.jpg')) {  echo('<img src="/fhem/chigginCam/NestLinks_Morgen.jpg?'.$rand.'" />'); }  else { echo('<p>Kein Bild für Nest links (Morgen)</p>'); } ?>
        <?php if (file_exists('/opt/fhem/www/chigginCam/NestLinks_Mittag.jpg')) {  echo('<img src="/fhem/chigginCam/NestLinks_Mittag.jpg?'.$rand.'" />'); }  else { echo('<p>Kein Bild für Nest links (Mittag)</p>'); } ?>
        <?php if (file_exists('/opt/fhem/www/chigginCam/NestLinks_Abend.jpg'))  {  echo('<img src="/fhem/chigginCam/NestLinks_Abend.jpg?'.$rand.'" />'); }   else { echo('<p>Kein Bild für Nest links (Abend)</p>'); } ?>
    </div>
    <div class="column">
        <?php if (file_exists('/opt/fhem/www/chigginCam/NestRechts_Morgen.jpg')) { echo('<img src="/fhem/chigginCam/NestRechts_Morgen.jpg?'.$rand.'" />'); } else { echo('<p>Kein Bild für Nest rechts (Morgen)</p>'); } ?>
        <?php if (file_exists('/opt/fhem/www/chigginCam/NestRechts_Mittag.jpg')) { echo('<img src="/fhem/chigginCam/NestRechts_Mittag.jpg?'.$rand.'" />'); } else { echo('<p>Kein Bild für Nest rechts (Mittag)</p>'); } ?>
        <?php if (file_exists('/opt/fhem/www/chigginCam/NestRechts_Abend.jpg'))  { echo('<img src="/fhem/chigginCam/NestRechts_Abend.jpg?'.$rand.'" />'); }  else { echo('<p>Kein Bild für Nest rechts (Abend)</p>'); } ?>
    </div>
</div>

Jaaa, der PHP Code geht auch viel eleganter, für meine einfachen Zwecke reicht es. $rand verhindert das Caching der Bilder. Screenshot im Anhang.

Das "css" Attribut im "WEB" Device muss noch wie folgt ergänzt werden:

Code Auswählen Erweitern

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create three equal columns that sits next to each other */
.column {
  flex: 33%;
  max-width: 33%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout */
@media screen and (max-width: 600px) {
  .column {
        flex: 100%;
        max-width: 100%;
  }
}
Du darfst diesen Dateianhang nicht ansehen.