Slideshow Part2: Verzeichnis auslesen und Bilder ordnen
Hier der zweite Teil zum Thema Slideshow in xt:Commerce. In diesem Post ist bereits beschrieben, wie man Bilder auf der Startseite (bzw. im Content) sliden bzw. faden (alles was das Jquery cycle Plugin bietet) lassen kann.
Die Grundlage dafür ist eine HTML-Liste von Bildern, welche in dieser Form im Quelltext stehen:
<div id="stage"> <a title="{$store_name}" href="/"> <img id="img_1" class="header_img" src="{$tpl_path}slide_header/A.gif" alt="{$store_name}" /> </a> <a title="{$store_name}" href="/"> <img id="img_2" class="header_img" src="{$tpl_path}slide_header/B.gif" alt="{$store_name}" /> </a> <a title="{$store_name}" href="/"> <img id="img_3" class="header_img" src="{$tpl_path}slide_header/C.gif" alt="{$store_name}" /> </a> <a title="{$store_name}" href="/"> <img id="img_4" class="header_img" src="{$tpl_path}slide_header/D.gif" alt="{$store_name}" /> </a></div>
Ist natürlich nervig, wenn dauern die selben Bilder erscheinen, bzw. man jedes mal den Quelltext ändern muss, wenn man ein Bild austauschen will. Also nehmen wir die Bilder von oben raus und fügen folgendes Script ein:
{php} $path = 'bilder'; $dir = opendir($path); while (false !==($entry = readdir($dir))) { if($entry != '.' || $entry != '..'){ $pics[] = $entry; } } sort($pics); $i=-2; foreach ($pics as $item) { $i++; if ($item != '.' && $item != '..' ){ echo '<img alt="HIER EUER ALT '.$item."\" style=\"height: 129px;width: 960px;\" src =\"".$path.'/' . $item . "\" id=\"img_".$i."\" />\n"; } } closedir($dir); {/php}
Das Script im Detail:
Das Script liest das Verzeichnis ‘bilder’ in ein Array aus, danach wird das Array mit sort() alphabetisch geordnet und in einer schleife als HTML ausgegeben. Es muss an der Stelle im Template stehen, an der die Bilder erscheinen sollen.
Man kann die Bilder auch zufällig ordnen, dazu muss nur die Zeile
sort($pics);
in
shuffle($pics);
geändert werden.
Wichtiger Punkt: Internet Explorer fix
Die Größe der Bilder solltet ihr per
style="height: 129px;width: 960px;"
in die Ausgabe schreiben, da es sonst zu Anzeigefehlern im IE kommen kann.
Like it? Then share, rate or comment it:
(1 votes, average: 4,00 out of 5)
Loading ...
[...] UPDATE: xt:Commerce Slideshow Part2 hier [...]