Einfache HTML Slideshow/Gallerie

~~JuliaWacker~~ · 10/16/2013, 23:25

Hallo Leute,

ich habe folgende Bilder auf meinem Webserver:

<img src="/gallerie/1.jpg" width="408" height="306" alt="">
<img src="/gallerie/2.jpg" width="408" height="306" alt="">
<img src="/gallerie/3.jpg" width="408" height="306" alt="">
<img src="/gallerie/4.jpg" width="408" height="306" alt="">
<img src="/gallerie/5.jpg" width="408" height="306" alt="">
<img src="/gallerie/6.jpg" width="408" height="306" alt="">
<img src="/gallerie/7.jpg" width="408" height="306" alt="">
<img src="/gallerie/8.jpg" width="408" height="306" alt="">
<img src="/gallerie/9.jpg" width="408" height="306" alt="">
<img src="/gallerie/10.jpg" width="408" height="306" alt="">
<img src="/gallerie/11.jpg" width="408" height="306" alt="">
<img src="/gallerie/12.jpg" width="408" height="306" alt="">
<img src="/gallerie/13.jpg" width="408" height="306" alt="">
<img src="/gallerie/14.jpg" width="408" height="306" alt="">
<img src="/gallerie/15.jpg" width="408" height="306" alt="">
<img src="/gallerie/17.jpg" width="408" height="306" alt="">
<img src="/gallerie/18.jpg" width="408" height="306" alt="">
<img src="/gallerie/19.jpg" width="408" height="306" alt="">
<img src="/gallerie/20.jpg" width="408" height="306" alt="">
<img src="/gallerie/21.jpg" width="408" height="306" alt="">
<img src="/gallerie/22.jpg" width="408" height="306" alt="">

Wie erstellt man nun eine einfache Gallerie/Slideshow?

Oder hat vlt jemand was? Einfach dass es schön aussieht. So wie jetzt.. ja, weiter muss ich nichts dazu sagen :-D

~~Shetiru~~ · 10/17/2013, 01:19

~~JuliaWacker~~ · 10/17/2013, 03:25

Quote:

Originally Posted by Shetiru

Werde es morgen einmal testen. Danke

mhaendler · 10/18/2013, 09:48

Hier hab ich eine Variante für einen "eigenen Slider" geschrieben, welche theoretisch genau auf dich passt. Dies wäre dann ein eigens implementierter Slider:

Quote:

Du könntest verschiedene Ansätze verwenden hier ein kleines Beispiel für einen eigenen Slider (ist sehr schnell zusammengeschrieben sorry):

Du hast Bildnamen von 1-4 sag ich jetzt mal also 1.jpg ....
Du hast ein img-Tag im HTML mit id in der "src" steht ja die URL des Bilder drinnen.

Wenn nun jemand auf den Pfeil drückt (onClick="nextImage()") in nextImage holst du dir über die ID (getElementById) die ID deiner Image Tags (oder jquery $('#id')) und veränderst den src Wert auf eine Zählervariable welche du global definierst.

Vom System her verstanden wie ich es meine?

Hoffe konnte helfen / dir den Weg zu deinem eigenen!! ImageSlider näher bringen

Zitat:
Du hast Bildnamen von 1-4 sag ich jetzt mal also 1.jpg ....
Du hast ein img-Tag im HTML mit id in der "src" steht ja die URL des Bilder drinnen.
Je nach Programmierkenntnissen kann man das über ein Array / JSON schöner lösen dann kannst du nämlich irgendwelche Dateinamen verwenden da die Werte über den Index des Array's / JSON ausgegeben werden

KoKsPfLaNzE · 10/18/2013, 10:01

Was auch nutzen kannst ist

, kann meiner meinung bissel mehr als dieser Nivo Slider, da die Doku um einiges besser ist.

Rock_Garden · 10/18/2013, 11:06

Servus,

Eine Galerie kann man auch gut mit der Scriptsprache "ruby on rails" erstellen.
Gibt es aber noch ne einfache Variante. Google mal "PHPSlideShow".

mfg

~~JuliaWacker~~ · 10/19/2013, 14:21

Quote:

Originally Posted by Rock_Garden

Servus,

Eine Galerie kann man auch gut mit der Scriptsprache "ruby on rails" erstellen.
Gibt es aber noch ne einfache Variante. Google mal "PHPSlideShow".

mfg

Brauche einfach einen ganz simplen Slider, der auf meine ganz simple Homepage passt :-P

Luxxus² · 10/19/2013, 16:26

Hey,
Kann die das jQuery Element: Lightbox empfehlen.
Hat jedoch kein Automatisches durchlaufen nach meiens Wissens, kannst dann halt immer auf Next klicken

best regards

kissein · 10/19/2013, 19:15

einfaches CSS in Chrome, keyframe definitionen für IE, FF, etc müssen noch hingezugefügt werden.

Spoiler