Es geht um diese Seite:
Project X2
Hier wird per Ajax aus einem Bilder-Array ein kleiner Slider gebaut, und es werden dabei immer nur soviel Elemente erzeugt, wie in das Elternelement passen. Beim Klick auf den Button verschieben sich alle Bilder im Container um eine Position nach links, das erste Element wird gelöscht und ein neues aus dem Bilder-Array hinzugefügt.
Technisch ausgedrückt wird beim Klick das erste Bild in ein Array geschoben und nach der Animation mit einem Ajax-Request an den Server übergeben, der anschließend die Elemente im Slider neu lädt. Das Ganze funktioniert allerdings nur solange, wie sich noch Elemente im Bilder-Array befinden, und nun überlege ich, wie ich dieses Bilder-Array immer wieder auffülle. Mein bisheriger, noch unstrukturierter Code im Auszug:
Die foreach-Schleife vergleicht das Bilder-Array mit den per Ajax übergebenen Werten und erzeugt aus der Differenz das Array $products. Die for-Schleife erzeugt aus $products soviel HTML-Elemente, wie im Container Platz haben.
Die if-Abfrage soll nun prüfen, ob noch genügend Elemente in $products vorhanden sind und dieses Array bedarfsweise mit Bildern aus $elements auffüllen, und genau an dem Punkt hänge ich fest. Ehe ich jetzt weiter frickel, wollte ich fragen, ob es für die Aufgabe nicht einen eleganteren Ansatz gibt.
Project X2
Hier wird per Ajax aus einem Bilder-Array ein kleiner Slider gebaut, und es werden dabei immer nur soviel Elemente erzeugt, wie in das Elternelement passen. Beim Klick auf den Button verschieben sich alle Bilder im Container um eine Position nach links, das erste Element wird gelöscht und ein neues aus dem Bilder-Array hinzugefügt.
Technisch ausgedrückt wird beim Klick das erste Bild in ein Array geschoben und nach der Animation mit einem Ajax-Request an den Server übergeben, der anschließend die Elemente im Slider neu lädt. Das Ganze funktioniert allerdings nur solange, wie sich noch Elemente im Bilder-Array befinden, und nun überlege ich, wie ich dieses Bilder-Array immer wieder auffülle. Mein bisheriger, noch unstrukturierter Code im Auszug:
PHP:
<?php
$sliderWidth = $_POST['sliderWidth'];
$linkWidth = $_POST['linkWidth'];
$imgCount = intval($sliderWidth / $linkWidth) - 1; //Anzahl Bilder im Slider
$elements = array('aufkleber', 'blöcke', 'briefbogen', 'cover', 'flyer', 'klappkarten', 'kalender', 'kuverts', 'magazine', 'mappen',
'plakate', 'postkarten', 'sonstiges', 'visitenkarten');
// per Ajax übergebene Elemente
$hiddenElements = $_POST['elements'] ? $_POST['elements'] : array();
$products = array();
// subtrahiere $hiddenElemente von $elements
foreach ($elements as $value) {
if ( !in_array($value, $hiddenElements) ) {
array_push($products, $value);
}
}
// Fülle das Array auf
if (count($products) < $imgCount) {
array_push($products, array_shift($elements));
}
for ($i = 0; $i <= $imgCount; $i++) : ?>
<a class="product-link" href="#"><img class="product-icon" src="img/<?php echo $products[$i]; ?>.jpg" alt="<?php echo $products[$i]; ?>" /></a>
<?php endfor; ?>Die foreach-Schleife vergleicht das Bilder-Array mit den per Ajax übergebenen Werten und erzeugt aus der Differenz das Array $products. Die for-Schleife erzeugt aus $products soviel HTML-Elemente, wie im Container Platz haben.
Die if-Abfrage soll nun prüfen, ob noch genügend Elemente in $products vorhanden sind und dieses Array bedarfsweise mit Bildern aus $elements auffüllen, und genau an dem Punkt hänge ich fest. Ehe ich jetzt weiter frickel, wollte ich fragen, ob es für die Aufgabe nicht einen eleganteren Ansatz gibt.
Zuletzt bearbeitet von einem Moderator:
