Bildergalerie mit wischendem Übergang
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
aktualisierung
bildergalerie
code
deutsch url
element
folgender code
galerie
hilfreichen antworten
http
index
item
jemand
kleine punkte
links buttons
nachteil
navigator
page
rechts code
sekunde
url
-
Hi
ich habe eine Bildergalerie, die jeweils nach 6 sekunden durch aktualisierung zum nächten Bild übergeht.
Der Name des aktuellen Bildes wird via PHP über GET übertragen, dadurch kommt allerdings der Nachteil, dass die Seite langsamer lädt und das der Übergang etwas rau ist.
Jetzt will ich die Galerie mit Javascript machen, habe aber kaum eine Ahnung von js. Gibt es irgendwo ein fertiges Script, ein Tutorial oder etwas ähnliches?
LG -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Ich würde mit Fading arbeiten:
http://www.maltesieb.de/skripte/imgfader-deutsch/
oder ein Tutorial:
http://www.webmasterpro.de/coding/article/javascript-bildershow.html -
Für dich wäre auch jQuery nicht falsch,
damit lassen sich solche Sachen einfach erstellen. -
Ich habs mit jQuery (von http://flowplayer.org/tools/) gemacht. Ich habe das ganze mit dem minimal setup for scrollable neu geschrieben und dann mit einem Navigator plugin erweitert. Rausgekommen ist folgender Code:
<head> <link rel="stylesheet" type="text/css" href="layout/bar.css" /> <link rel="stylesheet" type="text/css" href="http://flowplayer.org/tools/css/scrollable-navigator.css" /> <script src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js" language="JavaScript" type="text/javascript"></script> <script language="JavaScript" type="text/javascript"> // execute your scripts when the DOM is ready. this is mostly a good habit $(function() { // initialize scrollable $("#browsable").scrollable().navigator(); }); </script> </head> <body> <!-- wrapper for navigator elements --> <div class="navi"></div> <div id="navi"> <!-- "previous page" action --> <a class="prev browse left">Links</a> <!-- root element for scrollable --> <div class="scrollable" id=browsable> <!-- root element for the items --> <div class="items"> <div> <img src="img/preview1/0.png"> </div> <div> <img src="img/preview1/1.png"> </div> <div> <img src="img/preview1/2.png"> </div> <div> <img src="img/preview1/3.png"> </div> <div> <img src="img/preview1/4.png"> </div> <div> <img src="img/preview1/5.png"> </div> <div> <img src="img/preview1/6.png"> </div> <div> <img src="img/preview1/7.png"> </div> </div> </div> </div> <!-- "next page" action --> <a class="next browse right">Rechts</a> <br clear="all" /> </div> </body>
Tja, die rechts und links Buttons funktionieren einwandfrei, das Problem liegt bei dem Navigator (einfach ein paar Knöpfe, von denen jeder zur entsprechenden Seite verlinkt). Dazu gibt es das leere div mit der Klasse "navi". Es sollte eigentlich von dem JScode gefüllt werden, was aber anscheinend nicht geschieht.
Kann mir jemand helfen?
LG
Edit:
Ich warte...
Trotzdem danke für eure "zahlreichen und hilfreichen" Antworten.
Edit 2:
Ich habs geschafft da ganze mit einem anderen Script zu machen.
JS:
var fader; window.onload = init; function init(){ fader = new Fade('imgContainer', { imgs: ['img/preview1/0.png', 'img/preview1/1.png', 'img/preview1/2.png', 'img/preview1/3.png', 'img/preview1/4.png', 'img/preview1/5.png', 'img/preview1/6.png', 'img/preview1/7.png'] }); }
HTML:
<div class="navi"> <a href="javascript:fader.go(1);" /> <a href="javascript:fader.go(2);" /> <a href="javascript:fader.go(3);" /> <a href="javascript:fader.go(4);" /> <a href="javascript:fader.go(5);" /> <a href="javascript:fader.go(6);" /> <a href="javascript:fader.go(7);" /> <a href="javascript:fader.go(8);" /> </div> <div id="imgContainer"></div>
Bei den Links werden jeweils kleine Punkte angezeigt. Sie sollen sich jetzt umfärben, wenn man auf dieser Seite ist, indem sich die ID ändert. Weiß jemand, wie? Also irgendwie mit einer if-Struktur, und wenn z.B. die var fader 2 ist, soll der zweite Link die ID active erhalten.
LG
Beitrag zuletzt geändert: 20.6.2011 13:07:12 von squid -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
