slideshow mit links auf dem Bild

[creative82]

hi,
Javascript hats mir zur Zeit sehr angetan..gilt ja wieder hip seit AJAX
Nur bin ich noch ned wirklich weit..also zu meinem Problem.

Auf der Startseite meinens Projekts möchte die slideshow drinne haben..die so ausschaut. (siehe Anhang) wird natürlich noch verfeinert.

Also ich habe grad sowas von keine Ahnung wie ich das hinbekomme.
Javascriptcode? wie müsste der ausschauen?
Die graue Leiste unten auf dem Bild sollte auch noch anzeigen welches Bild grad angezeigt wird..also klickt man auf den Pfeil slidet das neue Bild rein und unten in der grauen Leiste auf den entsprechenden Fussboden.
Wie bekomme ich die Links auf der Leiste hin?..überdecken ja das Foto..mit css..position? z-index?

Steh aufm Schlauch.

Tipps und vllt ein Link auf ein Tutorial wären sehr nett.

Gruß

[Guillermo]

Hi creative82,

das stimmt allerdings, JavaScript ist wieder ziemlich anziehend
Es gibt zwei Möglichkeiten: Entweder du benützt eine bestehende Bibliothek wie jQuery oder du machst es eben selbst, was eher der Fall zu sein scheint.
Wenn du es selbst machen willst, hier ein paar Tipps:

Du hast zwei DIVs. Das eine ist das Kind des anderen. Im prinzip funktioniert das so dass du das Kind einfach hin und her schiebst. Wie? Mit margin-left z.B. . Ich könnte mir da einer Methode vorstellen, der du übergibst, um wie viel px du scrollen willst, also wie breit einer dieser Links ist. Wird diese Methode aufgerufen wird das innere DIV um eben diese bestimmte Breite verschoben, und zwar stückchenweise. Dasa mit dem stückchenweise ist an sich ganz einfach: du rufst eine Funktion, die das Kind-Div um 1px verschiebt jede paar Millisekunden auf. Im Detail geht das mit der Funktion setTimeout(Befehl, millisekunden).

Sollte ich mich nicht deutlich erklärt haben, sag einfach bescheid, dann kann ich dir auch ein paar Codeschnipsel posten

Gruß,
Guillermo

[creative82]

hi,
ich schau zur Zeit eine video2braindvd über jquery..aber das ist ja ganz nett..aber too much für mich.(deswegen lern ich grad javascript).

Codeschnipsel gerne,verstand nur die Hälfte die du da geschrieben hast .
Auch gerne viel Codeschnipsel


Gruß

[Ingo]

Hi.

Ich bin gerade dabei, eine jQuery-Lösung zu schreiben (läuft schon, will aber noch 'was ändern).
Mit jQuery ist es einfacher umzusetzen als ohne. Wenn es allerdings darum geht, anhand
dieses Beispiels JavaScript zu lernen, dann ist Guillermos Weg (ohne lib) wohl schwieriger, aber
ganz sicher effektiver, zumal man eine jQuery-Lösung vllt. besser versteht, wenn man diese Dinge
zuvor schon einmal "zu Fuß" erledigt hat. Du könntest dann zunächst ein Teilproblem angehen, z.B.
das erwähnte Slide: "Wie bringt man ein Element dazu, sich fließend (=in sehr kleinen, schnellen
Schritten) zur Seite zu bewegen?"

Gruß, Ingo

[creative82]

das klingt doch vielversprechend.

Ja ich möchte Javascript..und auch das coole Framework jquery lernen..und das hier wird mich gleich ein Stück weiterbringen..dein baldigen code zu lesen mit ein wenig Erklärung dazu bringt sicher viel.

Dann werd ich mal schauen wie man das so macht mit dem slide.

Gruß

[Ingo]

So, vorweg meine jQuery-Experimente. Version 1.0 ist am ehesten zu verstehen, aber auch "redundant"
geschrieben und etwas sperrig. Version 1.1 regelt den Klick auf .slideTo anders, wodurch die Links und
Bilder keine ID mehr brauchen. Das ist wartungsfreundlicher. - Version 2.0 geht die Sache anders an und
zeigt einen anderen Effekt. Diese Version ist am ehesten für größere Bildermengen brauchbar, kann aber
sicher noch optimiert werden, wodurch er wiederum weniger leicht zu durchschauen sein könnte. -
Kommentare fehlen noch gänzlich. Welche Version soll ich denn erklären?

[creative82]

Hi Ingo,

genau so hab ich mir das vorgestellt.Ich werde jetzt den Quelltext durchgehen und nachbauen..nach den Quelltextstellen bei JS bzw. JQuery googlen die ich nicht verstehe,und dann werde ich hier nochmal posten.

Jetzt hab ich was zu tun für heute

Großes Dankeschön

[weblizz]

Hallo Ingo,

bist Du noch an Bord?
Ich hab' mir Deine "jQuery-Experimente" angeschaut und bin ganz angetan, insbesondere von Version 1.1. Hast Du das noch in irgendeiner Form weiterentwickelt ...?!

Ich bin auf der Suche nach einer ähnlichen Lösung, allerdings soll die Slideshow automatisch durchlaufen so ähnlich wie hier zu sehen (natürlich nur viel schöner ):
http://www.gartenmoebel.de/

Hast Du vielleicht 'ne Idee, wo ich ein solche Lösung finden könnte oder ist gar Dein Code mit ein paar Modifikationen dafür zu gebrauchen? Über Deine Hilfe würde ich mich freuen ...

Beste Grüße
Lizzy

[Ingo]

Hi.

Also, mein Script war nur als Demo gedacht, weitergeschrieben habe ich daran nicht; sie funktioniert ja soweit,
dass man die Grundlagen erkennen kann. Ob man das Script noch ausbauen kann? Jo, ich denke, das geht. Es ist
allerdings mit ein wenig Arbeit verbunden: Wenn neben der Steuerung "von Hand" noch ein Timer die Slides weiter-
schubsen soll, muss man auch dafür sorgen, dass der Nutzer die Chance hat, die Slideshow anzuhalten. (Ein rein
automatisches Sliden ist weniger das Problem.)
Ich vermute fast, dass es im Netz einige Slideshow-Scripte gibt. Wenn da nix wirklich ansprechendes rumliegt,
könnten wir ja mal überlegen, was genau ein Script leisten soll, und das dann -je nach Aufwand- umsetzen.

Gruß, Ingo

[weblizz]

Hi Ingo,

vielen Dank für Deine Rückmeldung und ja, das ist ne gute Idee! Ich versuche mich noch ein wenig im Web inspirieren zu lassen ... und würde mich dann ggf. melden, wenn nichts gescheites dabei ist ...

Grüße Lizzy