zurück

GuPa-Slider v2.2

Dokumentation

Auf Basis von prototype & script.aculo.us

Inhalt

Beispiel 1 - Photoslider mit fester Breite
Beispiel 2 - Slider mit Textcontent und variabler Breite
Installation
Beispielcode 2
mehrere GuPa-Slider verwenden

Beispiele:

Beispiel 1 - Photoslider mit fester Breite

Beispiel 2: Textslider mit variabler Größe

GuPa-Slider

Sie sehen hier ein Beispiel des GuPa-Slider mit einem HTML-formatierten Text:
Fett, kursiv, unterstrichen, Link.
Es können sämtliche Inhalte benutz werden!

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Vorteile:

einfach einzubinden
volle Anpassung via CSS
Integration auf allen gängigen Browsern

< zurück

weiter >

Installation

Hinweis:
GuPa-Slider darf nicht für kommerzielle Zwecke verwendet werden.
Eine nicht-kommerzielle Nutzung ist ausdrücklich gewünscht.

Komponenten

Zur Installation wird das JavaScript Framework "prototype" mit der Erweiterung "script.aculo.us" gebraucht.
Die aktuellen Versionen sind hier zu finden:
Download prototype
Download script.aculo.us
Das prototype-Framework und script.aculo.us liegen dem GuPa-Slider bei, wobei beide Frameworks gepackt sind und so nur einen bruchteil der Größe der oben stehenden links haben.
Download GuPa-Slider

Einbindung

Die Frameworks, sowie die JavaScript-Datei "gupaSlider.js" müssen in die HTML-Datei eingebunden werden:

<html>
	<head>
		[...]
		<script type="text/javascript" src="prototype.js"></script>
		<script type="text/javascript" src="scriptaculous.js?load=effects"></script>
		<script type="text/JavaScript" src="gupaSlider.js"></script>
		[...]
	</head>
	<body>
		[...]
	</body>
</html>

GuPa-Slider

Der GuPa-Slider reagiert auf div-Tags mit der id gupaSlider:

<div id="gupaSlider">
	[..]
</div>

Inhalt

Als Inhalt können div-Boxen verwendet werden. In diesen Boxen können alle HTML-Elemente verwendet werden.

<div>Inhalt Box 1</div>
<div>Inhalt Box 2</div>
[..]

Navigation

Die Buttons können sämtliche HTML-Tags sein, wie div, span, img, p etc.
Zum identifizieren müssen sie die CSS-Klasse gupaSliderBtn besitzen.
Der zurück-Button muss zudem das Attribut rel="-1" besitzen.
Die Buttons müssen innerhalb des GuPa-Slider liegen.

<div class="gupaSliderBtn" rel="-1">zurück</div>
<div class="gupaSliderBtn">weiter</div>

oder als Bilder:

<img src="buttonZurueck.jpg" class="gupaSliderBtn" alt="zurück" rel="-1">
<img src="buttonWeiter.jpg" class="gupaSliderBtn" alt="weiter">

Starten des Sliders

Damit der GuPa-Slider auch animiert wird, muss noch ein kleiner JavaScript-Code in die Seite eingebunden werden:

<script type="Text/JavaScript">
	Event.observe(window, 'load', function() {new GupaSlider('gupaSlider'); })
</script>

Wobei noch erweiterte Parameter für verschiedene Aktionen übergeben werden können:

<script type="Text/JavaScript">
	Event.observe(window, 'load', function() {new GupaSlider(Identifier:String, Effektdauer:Integer, Autostart:Boolean, Delay:Integer, Effekt:Integer); })
</script>

Identifier: id des HTML-Elements welches als GuPa-Slider dienen soll (zB 'gupaSlider').
Effektdauer: Dauer (in Sekunden) der Überblendung (zB 0.5 oder 5)
Autostart: Slider automatisch starten (true oder false)
Delay: Pause (in Sekunden) zwischen der automatischen Überblendung (zB: 2 oder 4.5)
Effekt: Überblendverhalten (Zahlen)
- 1: Slider mit linearem Verhalten
- 2: Slider mit sinusförmigen Verhalten
- 3: Slider mit Bounce-Verhalten

Dieser Code wurde für den ersten Slider verwendet:

<script type="Text/JavaScript">
	Event.observe(window, 'load', function() {new GupaSlider('gupaSlider', 1,  true, 2, 3); })
</script>

Stylen

Über CSS können alle Elemente wie gewünscht positioniert und gestyled werden.
Zum Beispiel der erste GuPa-Slider von oben:

#gupaSlider {
	position: relative;
	width: 600px;
	height: 340px;
	overflow: hidden;
}

#gupaSlider div.content {
	position: absolute;
	width: 600px;
	padding: 0px;
}

#gupaSlider .gupaSliderBtn {
	position: absolute;
	cursor: pointer;
	top: 322px;
}

#gupaSlider .inactive {
	position: absolute;
	color: #AAA;
	cursor: default;
	top: 322px;
}

Der komplette Code

<html>
	<head>
		<title>GuPa-Slider</title>
		<script type="text/javascript" src="prototype.js"></script>
		<script type="text/javascript" src="scriptaculous.js?load=effects"></script>
		<script type="text/JavaScript" src="gupaSlider.js"></script>
		<style type="text/css">
			<!--
			#gupaSlider {
				position: relative;
				width: 600px;
				height: 340px;
				overflow: hidden;
			}
			#gupaSlider div.content {
				position: absolute;
				width: 600px;
				padding: 0px;
			}
			#gupaSlider .gupaSliderBtn {
				position: absolute;
				cursor: pointer;
				top: 322px;
			}
			#gupaSlider .inactive {
				position: absolute;
				color: #AAA;
				cursor: default;
				top: 322px;
			}
			-->
		</style>
		<script type="Text/JavaScript">
			Event.observe(window, 'load', function() {new GupaSlider('gupaSlider'); })
		</script>
	</head>
	<body>
		<div id="gupaSlider">
			<div class="content">
				<img src="images/beispiel1.jpg" alt="Beispielbild 1">
			</div>
			<div class="content">
				<img src="images/beispiel2.jpg" alt="Beispielbild 2">
			</div>
			<div class="content">
				<img src="images/beispiel3.jpg" alt="Beispielbild 3">
			</div>
			<div class="gupaSliderBtn" rel="-1">< zurück</div>
			<div class="gupaSliderBtn" style="right: 0px;">weiter ></div>
		</div>
	</body>
</html>

Code vom Beispiel 2

Der GuPa-Slider hat bei diesem Beispiel eine variable Breite und fügt sich somit dem vorhergegangenen Element. In dem Beispiel ist der das Browserfenster.

<html>
	<head>
		<title>GuPa-Slider</title>
		<script type="text/javascript" src="prototype.js"></script>
		<script type="text/javascript" src="scriptaculous.js?load=effects"></script>
		<script type="text/JavaScript" src="gupaSlider.js"></script>
		<script type="text/JavaScript">
			Event.observe(window, 'load', function() { new GupaSlider('gupaSlider'); })
		</script>
		<style type="text/css">
			<!--
			#gupaSlider {
				position: relative;
				width: 100%;
				height: 200px;
				overflow: hidden;
			}
			#gupaSlider div.content {
				position: absolute;
				margin: 20px;
				padding: 5px;
				border: 1px solid #D4D4D4;
				box-shadow: 0px 0px 5px #CCC;
				background-color: #FFF;
			}
			#gupaSlider .gupaSliderBtn {
				position: absolute;
				cursor: pointer;
			}
			#gupaSlider .inactive {
				position: absolute;
				cursor: default;
			}
			-->
		</style>
	</head>
	<body>
		<div id="gupaSlider">
			<div class="content">
				<h1>GuPa-Slider</h1>
				Sie sehen hier ein Beispiel des GuPa-Slider mit einem HTML-formatierten Text:<br>
				<b>Fett</b>, <i>kursiv</i>, <u>unterstrichen</u>, <a href="#top">Link</a>.<br>
				Es können sämtliche Inhalte benutz werden!
			</div>
			<div class="content" style="text-align: justify">
				Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
				sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
				sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
				Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
				Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
				sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
				sed diam voluptua.
				At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
				no sea takimata sanctus est Lorem ipsum dolor sit amet.
			</div>
			<div class="content" style="margin-left: 100px;">
				<h2>Vorteile:</h2>
				<ul>
					<li>einfach einzubinden</li>
					<li>volle Anpassung via CSS</li>
					<li>Integration auf allen gängigen Browsern</li>
				</ul>
			</div>
			<img src="images/btLi.png" class="gupaSliderBtn" alt="zurück" title="zurück" rel="-1">
			<img src="images/btRe.png" class="gupaSliderBtn" alt="weiter" title="weiter" style="right: 0px;">
		</div>
	</body>
</html>

Mehrere GuPa-Slider verwenden

Um mehrere GuPa-Slider auf einer Seite benutzen zu können, müssen DIV-Boxen mit unterschiedlichen ID's erstellt werden:

<div id="gupaSlider"> [...] </div> // erster GuPa-Slider
<div id="slider2"> [...] </div> // zweiter GuPa-Slider

Jetzt müssen beide Slider noch initialisiert werden:

<script type="text/JavaScript">
	Event.observe(window, 'load', function() {new GupaSlider('gupaSlider'); new GupaSlider('slider2'); })
</script>

In diese Funktion muss immer die ID von dem zu erstellenden GuPa-Slider stehen. In diesem Beispiel:
new GupaSlider('slider2');
Auf diese Weise können beliebig viele GuPa-Slider eingebunden werden.

Bei Fragen, Anregungen oder Bugs: info@web-gupa.de

Wenn Ihnen der GuPa-Slider gefällt, verlinken Sie doch bitte die Seite:

© 2009-2011 Web-GuPa - web-gupa.de