Hallo zusammen,
ist es moeglich eine zufaellige Grafik (deren Pfade ich natuerlich vorher angeben muss) in einer Box darzustellen?
Gruss
Zufaellige Grafik in einer Box
Neuer Shop von Pur Digital, ich hoffe es funktioniert alles so wie es soll.
Habe extra kein Update gemacht, da ich so viel besser alten Schrott losgeworden bin.
-
Wie sollen den die Bilder wechseln, nach neu laden der Seite oder wie?
-
ist es moeglich eine zufaellige Grafik (deren Pfade ich natuerlich vorher angeben muss) in einer Box darzustellen?
wie misterpu schon nannte, kommt es darauf an wie die Bilder angezeigt werden sollen (automatischer Wechsel oder beim reload der Seite)
- Beim jedem Reload der Seite ließe sich dies mit PHP bewerkstelligen
- Beim automatischen Wechsel der Bilder kommt man jedoch nicht um JS / jQuery herum
Gruss,
Andreas -
nachfolgend einmal ein paar Möglichkeiten, samt den Vor- und Nachteilen, wie du eines gleichen bewerkstelligen kannst:
JS Methode 1
Vorteile Nachteile + Schlichter und einfacher Quellcode
+ An beliebiger Stelle (Boxen, Seiten, etc.) einsetzbar- Bilder müssen manuell ins Array eingetragen werden JavaScript
Alles anzeigen<script> function randomImage() { var fileNames = [ // Schleife der Bilder mit Dateiname mit Endung "1.jpg", "2.jpg", "3.jpg" ]; var randomIndex = Math.floor(Math.random() * fileNames.length); // Pfad zu den Bilderordner unter "random-pictures/" anpassen. Das Slash (/) am Ende muss erhalten bleiben. document.getElementById("background").background = "random-pictures/" + fileNames[randomIndex]; setTimeout(function() { randomImage(); }, 10000); } </script>JS Methode 2
Vorteile Nachteile + Vollständiger Quellcode
+ Animation (fade-in) der Bilder mittels CSS
+ An beliebiger Stelle (Boxen, Seiten, etc.) einsetzbar- Bilder müssen manuell ins Array eingetragen werden CSS
Alles anzeigen.fade-in{ -webkit-animation: fade-in 2s ease; -moz-animation: fade-in ease-in-out 2s both; -ms-animation: fade-in ease-in-out 2s both; -o-animation: fade-in ease-in-out 2s both; animation: fade-in 2s ease; visibility: visible; -webkit-backface-visibility: hidden; } @-webkit-keyframes fade-in{0%{opacity:0;} 100%{opacity:1;}} @-moz-keyframes fade-in{0%{opacity:0} 100%{opacity:1}} @-o-keyframes fade-in{0%{opacity:0} 100%{opacity:1}} @keyframes fade-in{0%{opacity:0} 100%{opacity:1}}HTML<div id="random-pictures"></div> <script> // Schleife der Bilder mit Dateiname mit Endung var images = ['bild-1.jpg', 'bild-2.jpg', 'bild-3.jpg', 'bild-4.jpg]; // Pfad zu den Bilderordner unter "images/" anpassen. Das Slash (/) am Ende muss erhalten bleiben. $('<img class="fade-in" src="images/' + images[Math.floor(Math.random() * images.length)] + '">').appendTo('#random-pictures'); </script>JS Methode 3
Vorteile Nachteile + Schlichter und einfacher Quellcode
+ An beliebiger Stelle (Boxen, Seiten, etc.) einsetzbar- Weitere CSS-Anpassungen erforderlich JavaScript<script> // Pfad zu den Bilderordner unter "pictures" anpassen. $.getJSON('pictures', function(data) { $.each(data, function(image) { // ID-Name "random-pictures" des Divs in welchen sich die Bilder befinden sollen anpassen. $('#random-pictures ul').append('<li><img src="' + image + '" alt="" />'); }); }); </script>PHP & SQL Methode 1
Vorteile Nachteile + Es können mit Anpassung(en) auch Galerie Bilder ausgegeben werden
+ Wenig Quellcode- Datenbankverbindung erforderlich
- Plugin "PHP in Boxen / Seiten" erforderlichPHP
Alles anzeigen<? // Datenbankverbindung aufbauen. Die Tabelle "table" ist entsprechend anzupassen $sql=mysql_query("SELECT * FROM table ORDER BY RAND() LIMIT 0,1;"); while($row=mysql_fetch_array($sql)){ // Folgend werden Bildname und Dateiname ausgelesen und ausgegeben. // Dies wäre jedoch mit Anpassung auch nur mit den Bildnamen möglich. // Spalte des Dateinamen $name=$row['name']; // Spalte des Bildnamen $imagename=$row['imagename']; // Ausgabe des Dateinamen echo "Name: ".$name."<br>"; // Ausgabe des Bildes echo "<img src='random-pictures/'".$imagename." width='100' height='100'>"; } ?>Gruss,
Andreas -
Wasserlasser
nichts zu danken und gern geschehen
Jetzt mitmachen!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!