Slider

[phoenix430]

Hallo Leute,

ich würde gerne für eine Bildergalerie einen Slider einbauen, aber keine wo man auf "weiter" klicken muss.
Ich suche etwas in der Art
http://www.elmastudio.de/content-flow-demo/

Wie kann man sowas am besten erstellen und gibt es für sowas ein Tutorial?

 

[Bauergiesen]

In diesem Fall ist es eine JavaScript-Erweiterung, welche auf JQuery basiert.
Das Addon nennt sich ContentFlow und ist unter folgender Adresse zu finden:
http://www.jacksasylum.eu/ContentFlow/

 

[phoenix430]

Ich habe nun ContentFlow mit der Bildgalerie. Das durchlaufen der Galerie funktioniert, lediglich das aufmachen der Bilder mit "lightbox" funktioniert nicht richtig.
Binde ich meine Bilder so ein:

	<a href="/Welcome/apple1.jpg" rel="lightbox">Bild1</a>
				<a href="/Welcome/Zertifikat.jpg" rel="lightbox">Bild2</a>
				<a href="/Welcome/bild4.jpg" rel="lightbox">Bild3</a>
                <a href="/Welcome/kokok.jpg" rel="lightbox">Auto</a>

So wird bei einem Klick darauf das Bild richtig aufgemacht und skaliert.

Binde ich meine Bilder so ein:

<img class="item" src="/Welcome/bild1.jpg" title="Your_Image_Title"/>
                <img class="item" src="/Welcome/bild2.jpg" title="Your_Image_Title"/>
                <img class="item" src="/Welcome/bild3.jpg" title="Your_Image_Title"/>
                <img class="item" src="/Welcome/bild4.jpg" title="Your_Image_Title"/>
                <img class="item" src="/Welcome/bild5.jpg" title="Your_Image_Title"/>
                <img class="item" src="/Welcome/bild6.jpg" title="Your_Image_Title"/>
                <img class="item" src="/Welcome/bild7.jpg" title="Your_Image_Title"/>
                <img class="item" src="/Welcome/bild8.jpg" title="Your_Image_Title"/>
                <img class="item" src="/Welcome/bild9.jpg" title="Your_Image_Title"/>
                <img class="item" src="/Welcome/bild10.jpg" title="Your_Image_Title"/>
                <img class="item" src="/Welcome/apple1.jpg" title="Your_Image_Title"/>
                <img class="item" src="/Welcome/kokok.jpg" title="Brumbrum"/>

So habe ich den Durchlauf der Bildergalerie. Leider wird beim Klick auf das Bild, das Bild in einem anderen Fenster geöffnet, also nicht mit "lightbox".
Gibt es eine Möglichkeit den aufruf zusammen zu führen? Ich Habe leider im Internet keine Lösung dazu gefunden.

 

[Bauergiesen]

Hast du den benötigten JavaScript-Code für die Lightbox in dein Html eingebunden?

 

[phoenix430]

Ja das habe ich gemacht

<script type="text/javascript" src="/Welcome/prototype.js"></script>
<script type="text/javascript" src="/Welcome/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/Welcome/lightbox.js"></script>
<script type="text/javascript" src="/Welcome/contentflow_src.js"></script>
<link rel="stylesheet" href="/Welcome/contentflow_src.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/Welcome/lightbox.css" type="text/css" media="screen" />

Wie gesagt, mit

<img class="item" src="/Welcome/bild1.jpg" title="Your_Image_Title"/>

funktioniert ja das ContentFlow, nur wenn ich auf ein Bild klicke, dann macht er es im neuen Fenster auf, und nicht mit einem "lightbox" Efekt. Das ganze ist dann immer sehr bescheiden, wenn man im Browser auf zurück gehen muss, um zur Galerie zurück zu kommen.

Öffne ich ein Bild so

<a href="/Welcome/bild4.jpg" rel="lightbox">Bild3</a>

so kann ich drauf klicken und es wird mit dem "lightbox" Efekt aufgerufen. Alerdings habe ich dann ja keine Galerie Ansicht.

Zum veranschaulichen, lade ich mal 3 Bilder hoch.

Ausgang--> Ausgangssituation oben links eingebunden mit

<a href="/Welcome/bild4.jpg" rel="lightbox">Bild3</a>

unten Rechts ContentFlow mit

<img class="item" src="/Welcome/bild4.jpg" title="Your_Image_Title"/>

klick auf Galerie--> klicke ich auf ein Bild von ContentFlow, öffnet es sich in einem neuen Fenster

klick auf Bild3--> Das Bild wird skaliert und im Vordergrund geöffnet und man sieht im Hintergrund noch die Galerie(So soll es sein). Eingebunden mit

<a href="/Welcome/bild4.jpg" rel="lightbox">Bild3</a>

Ich hoffe ihr habt Verstanden, was ich meine?

Hat keiner eine Idee?