Slider

phoenix430 · 30. März 2011

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 · 30. März 2011

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 · 30. März 2011

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:

HTML:

	<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:

HTML:

<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 · 4. April 2011

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

phoenix430 · 4. April 2011

Ja das habe ich gemacht

HTML:

<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

HTML:

<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

HTML:

<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

HTML:

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

unten Rechts ContentFlow mit

HTML:

<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

HTML:

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

Ich hoffe ihr habt Verstanden, was ich meine?

Hat keiner eine Idee?

Suche

Slider

phoenix430

Lt. Commander

Bauergiesen

Lieutenant

phoenix430

Lt. Commander

Bauergiesen

Lieutenant

phoenix430

Lt. Commander

Anhänge

Ähnliche Themen