Zufallsscript für Bilder

micronix

Guten Morgen,

bei meiner Seite gibt es 19 verschiedene Hintergrundbilder, die alle 12 Sekunden wechseln und man kann beliebig mit einem Pfeil "vorspulen". Das alles habe ich schon umgesetzt. Jedoch möchte ich, dass die 16 Bilder in zufälliger Reihenfolge angezeigt werden. Wie funktioniert das? Oder ist das so kompliziert dass ich im Job Forum nachfragen muss?

Code

<div id="supersize">
    <a href="[URL='http://www.forum-hilfe.de/view-source:http://kobedesign.de/index.html#']#[/URL]"><img src="[URL='http://www.forum-hilfe.de/view-source:http://kobedesign.de/images/background1.jpg']images/background1.jpg[/URL]" title="" alt="Bild1" /></a>
    <a href="[URL='http://www.forum-hilfe.de/view-source:http://kobedesign.de/index.html#']#[/URL]"><img src="[URL='http://www.forum-hilfe.de/view-source:http://kobedesign.de/images/background2.jpg']images/background2.jpg[/URL]" title="" alt="Bild2" /></a>
    <a href="[URL='http://www.forum-hilfe.de/view-source:http://kobedesign.de/index.html#']#[/URL]"><img src="[URL='http://www.forum-hilfe.de/view-source:http://kobedesign.de/images/background3.jpg']images/background3.jpg[/URL]" title="" alt="Bild3" /></a>
    <a href="[URL='http://www.forum-hilfe.de/view-source:http://kobedesign.de/index.html#']#[/URL]"><img src="[URL='http://www.forum-hilfe.de/view-source:http://kobedesign.de/images/background4.jpg']images/background4.jpg[/URL]" title="" alt="Bild4" /></a>
    <a href="[URL='http://www.forum-hilfe.de/view-source:http://kobedesign.de/index.html#']#[/URL]"><img src="[URL='http://www.forum-hilfe.de/view-source:http://kobedesign.de/images/background5.jpg']images/background5.jpg[/URL]" title="" alt="Bild5" /></a>
    <a href="[URL='http://www.forum-hilfe.de/view-source:http://kobedesign.de/index.html#']#[/URL]"><img src="[URL='http://www.forum-hilfe.de/view-source:http://kobedesign.de/images/background6.jpg']images/background6.jpg[/URL]" title="" alt="Bild6" /></a>
    <a href="[URL='http://www.forum-hilfe.de/view-source:http://kobedesign.de/index.html#']#[/URL]"><img src="[URL='http://www.forum-hilfe.de/view-source:http://kobedesign.de/images/background7.jpg']images/background7.jpg[/URL]" title="" alt="Bild7" /></a>
    <a href="[URL='http://www.forum-hilfe.de/view-source:http://kobedesign.de/index.html#']#[/URL]"><img src="[URL='http://www.forum-hilfe.de/view-source:http://kobedesign.de/images/background8.jpg']images/background8.jpg[/URL]" title="" alt="Bild8" /></a>
    <a href="[URL='http://www.forum-hilfe.de/view-source:http://kobedesign.de/index.html#']#[/URL]"><img src="[URL='http://www.forum-hilfe.de/view-source:http://kobedesign.de/images/background9.jpg']images/background9.jpg[/URL]" title="" alt="Bild9" /></a>
    <a href="[URL='http://www.forum-hilfe.de/view-source:http://kobedesign.de/index.html#']#[/URL]"><img src="[URL='http://www.forum-hilfe.de/view-source:http://kobedesign.de/images/background10.jpg']images/background10.jpg[/URL]" title="" alt="Bild10" /></a>
    <a href="[URL='http://www.forum-hilfe.de/view-source:http://kobedesign.de/index.html#']#[/URL]"><img src="[URL='http://www.forum-hilfe.de/view-source:http://kobedesign.de/images/background11.jpg']images/background11.jpg[/URL]" title="" alt="Bild11" /></a>
    <a href="[URL='http://www.forum-hilfe.de/view-source:http://kobedesign.de/index.html#']#[/URL]"><img src="[URL='http://www.forum-hilfe.de/view-source:http://kobedesign.de/images/background12.jpg']images/background12.jpg[/URL]" title="" alt="Bild12" /></a>
    <a href="[URL='http://www.forum-hilfe.de/view-source:http://kobedesign.de/index.html#']#[/URL]"><img src="[URL='http://www.forum-hilfe.de/view-source:http://kobedesign.de/images/background13.jpg']images/background13.jpg[/URL]" title="" alt="Bild13" /></a>
    <a href="[URL='http://www.forum-hilfe.de/view-source:http://kobedesign.de/index.html#']#[/URL]"><img src="[URL='http://www.forum-hilfe.de/view-source:http://kobedesign.de/images/background14.jpg']images/background14.jpg[/URL]" title="" alt="Bild14" /></a>
    <a href="[URL='http://www.forum-hilfe.de/view-source:http://kobedesign.de/index.html#']#[/URL]"><img src="[URL='http://www.forum-hilfe.de/view-source:http://kobedesign.de/images/background15.jpg']images/background15.jpg[/URL]" title="" alt="Bild15" /></a>
    <a href="[URL='http://www.forum-hilfe.de/view-source:http://kobedesign.de/index.html#']#[/URL]"><img src="[URL='http://www.forum-hilfe.de/view-source:http://kobedesign.de/images/background16.jpg']images/background16.jpg[/URL]" title="" alt="Bild16" /></a>
    <a href="[URL='http://www.forum-hilfe.de/view-source:http://kobedesign.de/index.html#']#[/URL]"><img src="[URL='http://www.forum-hilfe.de/view-source:http://kobedesign.de/images/background17.jpg']images/background17.jpg[/URL]" title="" alt="Bild17" /></a>    
    <a href="[URL='http://www.forum-hilfe.de/view-source:http://kobedesign.de/index.html#']#[/URL]"><img src="[URL='http://www.forum-hilfe.de/view-source:http://kobedesign.de/images/background18.jpg']images/background18.jpg[/URL]" title="" alt="Bild18" /></a>    
    <a href="[URL='http://www.forum-hilfe.de/view-source:http://kobedesign.de/index.html#']#[/URL]"><img src="[URL='http://www.forum-hilfe.de/view-source:http://kobedesign.de/images/background19.jpg']images/background19.jpg[/URL]" title="" alt="Bild19" /></a>        
</div>

Alles anzeigen

Beim GOoglen bin ich nur auf komplizierte Lösungen gestoßen und als Anfänger konnte ich damit nichts anfangen. Vielleicht kennt ihr ja simplere Lösungen.

MfG,

miCronix

Dodo

Da du das vorgefertigte Script Supersized verwendest, gibts da ein paar Hürden.
Zum Beispiel: Sieht die Lizenz vor, dass du das Script umprogrammieren darfst?
Wenn jak, kannst du mit ein paar JavaScript-Kenntnissen einfach umschreiben.
Wenn sein, musst du die Bilder per PHP - oder einer anderen Scriptsprache (vielleicht auch JS) in eine zufällige Reihenfolge bringen.

Also: Darfst du das Supersized-Script ändern, oder nicht?

micronix

Danke schon mal für die Antwort (mein Held :D)

Auf http://buildinternet.com/project/supersized/ finde ich nur das:

Zitat

Zitat

Some Notes

The above section provides a sampling of demos (also included in the download) which can also act as templates for many projects.

Here are a couple rules to keep in mind while editing:

All images within the #supersize div must be included in an 'a' link tag

Be mindful of z-index - anything you want on top of the slide should be >= 3

A special thanks goes out to Aen for taking the time to make some improvements between Version 1 and 2, most notably the fade effect.

Aber eine Lizenz finde ich nirgendwo oO

MfG

Dodo

Okay ich hab mir das mal angesehen: Das basiert auf jQuery. Dadurch darfst du es frei ändern.

Bewerte mal deine JavaScript-Kenntnisse auf eine Skala von 1 (das wird eine schwere Geburt) bis 10 (ich programmiere High-Performance-Spiele damit)

micronix

Nunja, ich bin in der Lage Jquery Codes einzubauen und anzupassen, kann allerdings nichts selbst programmieren. Daher gebe ich mir nur 1 von 10.

Dodo

Okay, dann poste hier mal die Funktion, die aufgerufen wird, wenn der nächste Slide gestartet wird.

anagramm

Wenn ich einfach dazwischen funkten darf:

Sowas selbst zu erstellen, geht (wenn ich das richtig verstanden habe), ganz einfach:
Pack' einfach alle Bilder in ein Array (JavaScript). Dann setz ein TimeOut von 12 Sekunden, bei dem das Bild dann immer neu geladen wird. jQuery kannst du hier ja noch einbringen, dass das alte Bild fadeOut();-et und das neue Bild danach fadeIn();-et.

(Den Vorwärts-Button kannst du danach ja genau mit dem selben Prinzip machen, einfach das man nicht das TimeOut abwartet, bis die neue Funktion geladen wird, sondern man macht es einfach manuell)

Versteh ich jetzt hier was falsch?

Tags