Eine Liste dynamisch und zufällig mit Bildern aus einem Ordner befüllen

[Torsten]

Hallo Community!

Ich habe hier eine Liste mit 10 Bildern:

<li><a href="/images/page-rotator/pict-031.jpg">Foto</a></li>
<li><a href="/images/page-rotator/pict-032.jpg">Foto</a></li>
<li><a href="/images/page-rotator/pict-033.jpg">Foto</a></li>
<li><a href="/images/page-rotator/pict-034.jpg">Foto</a></li>
<li><a href="/images/page-rotator/pict-035.jpg">Foto</a></li>
<li><a href="/images/page-rotator/pict-036.jpg">Foto</a></li>
<li><a href="/images/page-rotator/pict-037.jpg">Foto</a></li>
<li><a href="/images/page-rotator/pict-038.jpg">Foto</a></li>
<li><a href="/images/page-rotator/pict-039.jpg">Foto</a></li>
<li><a href="/images/page-rotator/pict-040.jpg">Foto</a></li> 

Es gibt einen Ordner in dem nur Bilder für diese Liste drinnen sind über 100 Bilder.
Nun würde ich gern diese Liste zufällig mit Bildern befüllen, ist dies mit PHP möglich?

Momentan behelfe ich mir damit, das ich diese 10 Listeneinträge in eine Datei speichere.
Solcher Dateien gibt es dann mehrere die Bilder sind dort fest (statisch) eingetragen.
Nun lasse ich zufällig eine dieser Dateien includieren...

Dies ist aber ein bisschen Umständlich, weil es auch sehr viel händische Code-Schreibarbeit erfordert.

Ich wäre echt dankbar, wenn jemand eine Lösung für mich hätte

[phpBuddy]

Hallo Torsten,

man könnte fast annehmen das Du noch nie auf meiner Seite warst.

http://www.phpbuddy.eu/zufallsbild-a...-ausgeben.html

[Torsten]

Hallo Andreas,

ich wollte nur mal testen ob man hier geholfen wird, auch wenn die Lösung selbst gefunden werden kann

Spaß beiseite, mir war nicht bewußt das es dafür fertige Lösungsansätze gibt
Ich kannte das zufällige ausgeben einer PHP/HTML-Datei oder Bilddatei.

Das ausgeben mehrerer Bilddateien stellt mich vor eine neue Hürde.

Wie so oft, wüßte ich jedoch nicht, wie ich das in meinen Code einbauen sollte...
denn bei den 10 Listeneinträgen sollten zwar zufällige Bilder geladen werden, aber kein Bild doppelt.

Böhmische Dörfer halt...

[phpBuddy]

Das ausgeben mehrerer Bilddateien stellt mich vor eine neue Hürde.
…
denn bei den 10 Listeneinträgen sollten zwar zufällige Bilder geladen werden, aber kein Bild doppelt.

Genau das wird doch im Abschnitt "Mehrere Zufallsbilder aus einem Ordner auslesen" auf der oben verlinkten Seite demonstriert.

Für konkretere Hilfe hilft wie immer etwas Code, bzw. der eigene Lösungsansatz.

[Torsten]

Genau das wird doch im Abschnitt "Mehrere Zufallsbilder aus einem Ordner auslesen" auf der oben verlinkten Seite demonstriert.

Für konkretere Hilfe hilft wie immer etwas Code, bzw. der eigene Lösungsansatz.

Ich kann jetzt von hier aus leider nicht experimentieren, da kein Computer mit Testumgebung vorhanden...

Aber ich probiere das auf jeden Fall aus, und dann mal sehen ob ich da den Code in die richtige Reihenfolge kriege oder nicht

[Torsten]

Nun habe ich mir Zufallsbild auf einer Webseite ausgeben einmal genau angesehen.

Das ist auch alles auch für Einsteiger einleuchtend erklärt, vielen Dank lieber phpBuddy!

Ich benötige aber wie oben Beschrieben in 10 Listentags, jeweils 1 Zufallsbild aus einem Ordner.
Klar jetzt bräuchte ich nur den Code für ein Zufallsbild jeweils in einen Tag zu kopieren, kein Problem.

Aber wie erreiche ich, das in jedem Listeneintrag ein anderes Zufallsbild ausgegeben wird?

Wie gesagt, die Liste aus 10 Bildern sollte zufällige Bilder enthalten, jedoch darf kein Bild doppelt (also gleich) sein.

[chorn]

Wenn du für jedes Listenelement einen anderen Ordner benutzt, sollte kein Bild doppelt sein, ausser du hast in 10 Ordnern immer die selben Bilder.

[Torsten]

Nein, alle Bilder liegen in ein und dem selben Ordner... das ist ja mein Problem

[phpBuddy]

Torsten, ich verstehe das Problem daran nicht. Genau das wird doch im Tutorial erklärt. 1 Ordner mit Bilder, alle in ein Array einlesen, Array mischen, n Einträge (in deinem Fall 10) in einer Schleife ausgeben, fertig.
Da braucht man den Code nicht mehrfach oder sonstwas.

EDIT

Der Abschnitt "Mehrere Zufallsbilder aus einem Ordner auslesen" ist der interesante Teil für dich.

[Torsten]

Oookay Andreas, ich habe mir erst jetzt das Beispiel in der ZIP-Datei angesehen.

Also wäre dieses hier mein Freund:

/**
 * Beispiel 2:
 * 1 oder mehrere Bilder aus einem Ordner auslesen
 * Mit array_rand() können auch mehrere Zufallselemente ausgewählt werden
 * In diesem Beispiel werden 3 Zufallsbilder ausgegeben
 */
$bilder   = glob( "zufallsbilder/*.jpg" );
$bild     = array_rand( $bilder, 3 );
foreach ($bild as $zufallsbild)
{
    $bildinfo = getimagesize( $bilder[$zufallsbild] );
    echo '<img src="' .$bilder[$zufallsbild]. '" ' .$bildinfo[3]. ' />';
} 

Richtig? Ich müsste nur bei:

$bild     = array_rand( $bilder, 3 ); 

Die 3 durch eine 10 ersetzen, richtig?

Mein Problem ist eigentlich nun nur, wie kommt das Bild in die Liste?
Und das in jeden Listeneintrag?

PHP-Code sieht ja immer so aus:

 <?php
        ...
        ?>

Wo in meiner Datei muss ich denn was hineinschreiben?

Doch wohl nicht so oder:

<li><?php
        $bilder   = glob( "zufallsbilder/*.jpg" );
$bild     = array_rand( $bilder, 3 );
foreach ($bild as $zufallsbild)
{
    $bildinfo = getimagesize( $bilder[$zufallsbild] );
    echo '<a href="' .$bilder[$zufallsbild]. '" ' .$bildinfo[3]. ' />';
}
        ?>">Foto</a></li>

[max.m]

<li><?php
$bilder = glob( "zufallsbilder/*.jpg" );
$bild = array_rand( $bilder, 3 );
foreach ($bild as $zufallsbild)
{
$bildinfo = getimagesize( $bilder[$zufallsbild] );
echo '<a href="' .$bilder[$zufallsbild]. '" ' .$bildinfo[3]. ' />';
}
?>">Foto</a></li>
[/PHP]

Eher so:

<?php
        $bilder   = glob( "zufallsbilder/*.jpg" );
$bild     = array_rand( $bilder, 3 );
foreach ($bild as $zufallsbild)
{
    $bildinfo = getimagesize( $bilder[$zufallsbild] );
    echo '<li><a href="' .$bilder[$zufallsbild]. '" ' .$bildinfo[3]. ' >Foto</a></li>';
}
        ?>

Es würde dann aber eine Liste enstehen in der jeder Listeneintrag Foto heisst.

[Torsten]

Vielen Dank Max!

Ich stell hier mal lieber den gesamten Sourcecode rein:

<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/index.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Fotograf &middot;&middot;&middot; Mirko Trodler - Professionelle Fotografie &amp; Presse-Bild-Berichterstattung - Home</title>
<!-- InstanceEndEditable -->
<link href="p7mirage/p7mirage05.css" rel="stylesheet" type="text/css" />
<link media="only screen and (max-device-width: 480px)" href="p7mirage/iphone.css" rel="stylesheet" type="text/css" />
<link href="p7mirage/p7mirage-static-menu.css" rel="stylesheet" type="text/css" />
<link href="data/css/kontakt.css" rel="stylesheet" type="text/css" />
<link href="data/css/myStyles.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]>
<style>
#bottom-navigation {position: static !important;}
</style>
<![endif]-->
<!-- InstanceBeginEditable name="head" -->

<link href="p7irm/p7IRM01.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="p7irm/p7IRMscripts.js"></script>
<!-- InstanceEndEditable -->
<!-- InstanceParam name="Optional-PageRotator" type="boolean" value="true" -->
</head>
<body>
<div id="masthead">
  <div id="logo"><img src="p7mirage/images/mirage-logo.jpg" width="488" height="106" alt="Logo" /></div>
</div>
<div id="tagline"><strong>„Ich gebe dem Moment Dauer“</strong> <em>Manuel Alvarez Bravo</em></div><div id="content-columns">
  <div id="column-1">

    <div class="column-heading-wrapper">
      <div class="column-heading">
        <h1>&raquo; Professionelle Fotografie &amp; Presse-Bild-Berichterstattung</h1>
      </div>
    </div>
    <div class="content"><!-- InstanceBeginEditable name="Edit-Content-1" -->
      <h2 class="topper">Mirko Trodler - Bildjournalist.<br />

      Ihre Ideen und Wünsche - meine Aufgabe… </h2>
<p>Die Fotografie ist seid über 20 Jahren meine Berufung. Mit neuester Digitaltechnik setze ich auch Ihr Motiv in das richtige Licht. Egal ob Reiseagentur, Tages,- oder Monatszeitschrift, Internetagentur, Firma oder Sportveranstalter – ich bin Ihr Mann.  Arbeitsproben können angefordert werden. Sehen Sie sich meine <a href="galerie-start.php">Referenzen</a> an. </p>
    <!-- InstanceEndEditable -->
    <div id="p7IRM_1" class="p7IRM01">
      <div id="p7IRMow_1" class="p7IRMowrapper">
        <div id="p7IRMw_1" class="p7IRMwrapper">
          <div id="p7IRMdv_1" class="p7IRMdv"><a class="p7IRMlink" id="p7IRMlk_1" title=""><img class="p7IRMimage" src="images/page-rotator/pict-001.jpg" alt="Foto" name="p7IRMim_1" width="660" height="267" id="p7IRMim_1" /></a></div>

          <div id="p7IRMdsw_1" class="p7IRMdesc_wrapper">
            <div class="p7IRMdesc_close"><a id="p7IRMdsclose_1" href="javascript:;" title="Hide Description"><em>Hide</em></a></div>
            <div id="p7IRMds_1" class="p7IRMdesc">&nbsp;</div>
          </div>
          <div id="p7IRMdsopw_1" class="p7IRMdesc_open_wrapper">
            <div id="p7IRMdsop_1" class="p7IRMdesc_open"><a id="p7IRMdsopen_1" href="javascript:;" title="Show Description"><em>Show</em></a></div>
          </div>
        </div>

      </div>
      <ul id="p7IRMlist_1" class="p7IRMlist">
        <li><a href="http://www.mirko-trodler.de/Mirage/images/page-rotator/pict-011.jpg">Foto</a></li>
<li><a href="http://www.mirko-trodler.de/Mirage/images/page-rotator/pict-012.jpg">Foto</a></li>
<li><a href="http://www.mirko-trodler.de/Mirage/images/page-rotator/pict-013.jpg">Foto</a></li>
<li><a href="http://www.mirko-trodler.de/Mirage/images/page-rotator/pict-014.jpg">Foto</a></li>
<li><a href="http://www.mirko-trodler.de/Mirage/images/page-rotator/pict-015.jpg">Foto</a></li>
<li><a href="http://www.mirko-trodler.de/Mirage/images/page-rotator/pict-016.jpg">Foto</a></li>

<li><a href="http://www.mirko-trodler.de/Mirage/images/page-rotator/pict-017.jpg">Foto</a></li>
<li><a href="http://www.mirko-trodler.de/Mirage/images/page-rotator/pict-018.jpg">Foto</a></li>
<li><a href="http://www.mirko-trodler.de/Mirage/images/page-rotator/pict-019.jpg">Foto</a></li>
<li><a href="http://www.mirko-trodler.de/Mirage/images/page-rotator/pict-020.jpg">Foto</a></li>      </ul>
      <!--[if IE 5.000]>
<style>.p7IRMdesc_wrapper {position:static !important;visibility:visible !important;}.p7IRMdesc_open_wrapper, .p7IRMdesc_close {display: none;}.p7IRMpaginator {position: static !important;height: 3em;}.p7IRMpaginator li, .p7IRMpaginator a {float: left !important;}.p7IRMpaginator a {float: left !important;overflow: visible !important;}</style>
<![endif]-->
      <!--[if lte IE 6]>
<style>.p7IRMpaginator a {width: auto !important;}</style>
<![endif]-->
      <!--[if lte IE 7]>
<style>.p7IRMpaginator li {display: inline !important;margin-right: 3px !important;}.p7IRMpaginator {zoom: 1;}</style>
<![endif]-->
      <script type="text/javascript">P7_opIRM('p7IRM_1',1,0,1,3000,3000,1,0,1,0,1500,0,0);</script>

    </div>
    <p><span class="caption">Fotografie Beruht auf der Kraft der Beobachtung</span></p>
    <!-- InstanceBeginEditable name="Edit-Content-2" -->
    <h2>Ich bitte Sie die folgende Hinweise ausdrücklich zu lesen und zu beachten!</h2>
    <p>Wenn Sie noch nicht volljährig sein sollten oder es nach den Gesetzen Ihres Landes verboten ist teilweise bekliedete oder unbekleidete Körper zu sehen, so bitte ich Sie meine Seite umgehend zu verlassen. Bilder von Reisen können Menschen in unerfreulichen Situationen zeigen. Auch hier sei gewarnt. Danke.</p>
    <p>Mit dem weiterblätern durch meien Seite erklären Sie ausdrücklich, dass Sie volljährig sind und Sie alle meine Fotos sehen möchten. Desweiteren erklähren Sie mit dieser Willensbekundung ausdrücklich das es Ihnen nach den gültigen Gesetzen Ihres Landes erlaubt ist, derrerlei Bilder an zu sehen. Alle auf der Seite / den Seiten diese Homepage gezeigten Bilder unterliegen dem Urheberrecht ! Ein kopieren, herunterladen oder jede Art von  Vervielfältigungen ohne meine Ausdrückliche schriftliche Genehmigung sind ausdrücklich untersagt!    </p>
    <!-- InstanceEndEditable --></div>

  </div>
  <div id="column-2">
    <div class="column-heading-wrapper">
      <div class="column-heading">
        <h1>&raquo; Mirko Trodler</h1>
      </div>
    </div>
    <div class="content">

      <div class="page-popper-gray">
        <img src="images/mirko-trodler.png" alt="Portrait Mirko Trodler" width="187" height="249" />
</div>
      <!--<h2 class="topper">&nbsp;</h2>--> 
      <a href="http://www.facebook.com/profile.php?id=100000377364180"><img src="images/64x64/facebook_64x64.png" width="61" height="61" alt="mein Facebook Profil" title="mein Facebook Profil" /></a> <a href="http://twitter.com/#!/artdsign"><img src="images/64x64/twitter_64x64.png" width="61" height="61" alt="folge mir auf Twitter" title="folge mir auf Twitter" /></a><a href="#"><img src="images/64x64/delicious_64x64.png" width="61" height="61" alt="diese Seite auf Delicious empfehlen" title="diese Seite auf Delicious empfehlen" /></a>
      <p>Mirko Trodler<br />
        Siemensstraße 10<br />
        D-71672 Ludwigsburg</p>

      <p>+49 162 4846401</p>
    </div>
  </div>
  <div id="footer">1980 - <span class="legal">2010</span> Fotograf &middot;&middot;&middot; Mirko Trodler • Siemensstrasse 10 • 71636 Ludwigsburg</div>
</div>
<div id="bottom-navigation">

  <div id="nav-wrapper">
    <ul class="mirage-fixed-menu">
      <li><a href="index.php">HomePage</a></li>
      <li><a href="arbeiten.php">Arbeiten</a></li>
      <li><a href="fotograf.php">Fotograf</a></li>
      <li><a href="kontakt.php">Kontakt</a></li>
      <li><a href="impressum.php">Impressum</a></li>

    </ul>
  </div>
</div>
</body>
<!-- InstanceEnd --></html> 

Denn ich vermute, dieser PHP-Code generiert dann auch an anderer Stelle Listen, oder irre ich da?

[max.m]

Denn ich vermute, dieser PHP-Code generiert dann auch an anderer Stelle Listen, oder irre ich da?

Wenn Du diesen Bereich

<ul id="p7IRMlist_1" class="p7IRMlist">
    ...
</ul>

damit ersetzt:

<ul id="p7IRMlist_1" class="p7IRMlist">
<?php
        $bilder   = glob( "zufallsbilder/*.jpg" );
$bild     = array_rand( $bilder, 3 );
foreach ($bild as $zufallsbild)
{
    $bildinfo = getimagesize( $bilder[$zufallsbild] );
    echo '<li><a href="' .$bilder[$zufallsbild]. '" ' .$bildinfo[3]. ' >Foto</a></li>';
}
?> 
</ul>

sollte es eigentlich passen.

[phpBuddy]

Ich würde das vermutlich etwas sauberer trennen. Soll heißen, eine PHP Datei mit dem auslesenden Code, der alle Links generiert und ausgibt in den Bilderordner speichern und in der Seite selbst nur diese PHP Datei in die UL inkludieren. Ist aber eher eine kosmetische Korrektur und nicht wirklich nötig für die Funktionalität.

[Torsten]

Super, es funktioniert!

Vielen Dank Euch allen - jetzt ist die Sache viel viel einfacher!

Noch eine Frage dazu: Kann man die erzeugte Liste für eine übersichtliche Darstellung im Sourcecode optimieren? Derzeit werden alle Listenelemente hintereinander dargestellt, untereinander wäre doch schöner...