Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
206 lines (163 sloc) 6.96 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Choco-Slider | A very tasty jQuery Plugin</title>
<meta name="description" content="Choco-Slider, a very tasty jQuery Plugin.">
<meta name="author" content="Alan Dawidowicz">
<meta name="keywords" content="jquery plugin, slideshow, image slider, slider, chocolate, tasty, chocoslider, choco, alandawi">
<link rel="shortcut icon" href="favicon.ico">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" media="screen" href="estilo.css">
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="ie7.css">
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.chocoslider.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').chocoslider();
});
</script>
</head>
<body>
<div id="contenedor">
<div id="contenido" class="clearfix">
<div id="header">
<img src="img/header2.png" alt="Choco-Slider">
</div>
<div id="slider">
<a href="#"><img src="img/img_1.jpg" alt="Foto 1" title="Choco-Slider ist nur 7kb groß."></a>
<a href="#"><img src="img/img_2.jpg" alt="Foto 2" title=""></a>
<a href="#"><img src="img/img_3.jpg" alt="Foto 3" title="Choco-Slider wurde unter MIT Lizenz veröffentlicht."></a>
<a href="#"><img src="img/img_4.jpg" alt="Foto 4" title=""></a>
<a href="#"><img src="img/img_5.jpg" alt="Foto 5" title="Choco-Slider ist kompatibel zu allen modernen Browsern."></a>
</div>
<div class="explicacion">
<div class="titulo">Eigenschaften:</div>
<br><br><br>
<ul>
<li>Leichtgewichtig</li>
<li>Flexibel</li>
<li>Anpassbar</li>
<li>Veröffentlicht unter MIT Lizenz</li>
<li>Compatible with Firefox 2 +, IE 6 +, Safari v4, Google Chrome 3 + and Opera 9 +</li>
</ul>
</div>
<br>
<div class="explicacion">
<div class="titulo">Implementierung:</div>
<br><br><br>
<p>Download the Choco-Slider (Javascript and CSS). Having done so, include them and the jQuery library on the site:</p>
<pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;chocoslider.css&quot; type=&quot;text/css&quot; /&gt;<br>
&lt;script type=&quot;text/javascript&quot; src=&quot;jquery.chocoslider.js&quot;&gt;&lt;/script&gt;<br>
&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</code>
</pre>
<p>Füge den folgenden Container hinzu und ändere Bilder und Beschriftungen:</p>
<pre><code>&lt;div id=&quot;slider&quot;&gt;
&lt;img src=&quot;img/img_1.jpg&quot; alt=&quot;&quot; title=&quot;&quot;/&gt;
&lt;img src=&quot;img/img_2.jpg&quot; alt=&quot;&quot; title=&quot;&quot;/&gt;
&lt;img src=&quot;img/img_3.jpg&quot; alt=&quot;&quot; title=&quot;&quot;/&gt;
&lt;img src=&quot;img/img_4.jpg&quot; alt=&quot;&quot; title=&quot;&quot;/&gt;
&lt;img src=&quot;img/img_5.jpg&quot; alt=&quot;&quot; title=&quot;&quot;/&gt;
&lt;/div&gt;
</code></pre>
<p>Folgenden Code im &lt;head&gt; einfügen, um den Choco-Slider aufzurufen:</p>
<pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
$(window).load(function() {
$('#slider').chocoslider();
});
&lt;/script&gt;
</code></pre>
</div>
<br>
<div class="explicacion">
<div class="titulo">Anpassung:</div>
<br><br><br>
<p>Für den Fall, dass keine spezielle Anpassung der Parameter erfolgt, werden automatisch diese Standardeinstellungen genutzt:</p>
<pre><code>auto:true, (für automatisches sliden)<br>
autoPause:true, (stopt den slider nach einem klick)<br>
speedStrip:500, (Zeit zwischen den Streifen)<br>
effect:'random', (Es gibt diese drei Arten: 'slide', 'fade' and 'random')<br>
numberStrips:15, (Anzahl von Streifen)<br>
sliderDelay:3000, (Zeitverzögerung zwischen den Bildübergängen)<br>
transparencytitle:0.8, (Tranzparenz des Titels)<br>
bChange: function(){}, (Funktion notwendig für Abschluss)<br>
aChange: function(){}, (Funktion notwendig für Abschluss)<br>
chocoEnd: function(){}, (Funktion notwendig für Abschluss)<br>
controlNavigation:true (Entfernt nur die Bilder)
</code></pre>
</div>
<br>
<div class="explicacion">
<div class="titulo">Beispiele:</div>
<br><br><br>
<p>Beispiel N&ordm; 1:</p>
<pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
$(window).load(function() {
$('#slider').chocoslider({
auto:true,
autoPause:true,
speedStrip:500,
effect:'effect1',
numberStrips:15,
sliderDelay:3000,
transparencytitle:0.8,
bChange: function(){},
aChange: function(){},
chocoEnd: function(){},
controlNavigation:true
});
});
&lt;/script&gt;
</code></pre>
<br>
<p>Beispiel N&ordm; 2:</p>
<pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
$(window).load(function() {
$('#slider').chocoslider({
auto:true,
autoPause:false,
speedStrip:500,
effect:'random',
numberStrips:15,
sliderDelay:6000,
transparencytitle:1.0,
bChange: function(){},
aChange: function(){},
chocoEnd: function(){},
controlNavigation:false
});
});
&lt;/script&gt;
</code></pre>
</div>
<br>
<div class="explicacion">
<div class="titulo">Nachtisch:</div>
<br><br><br>
<div id="bloque-imagen">
<a href="choco_slider_v2.rar"><img src="img/img_en/download.png" alt="Download"></a>
</div>
<div id="bloque-imagen2">
<a href="index_en.html"><img src="img/idioma.png" alt="Language"></a>
</div>
</div>
<!--[if IE 7]>
<br><br>
<![endif]-->
</div>
</div>
<div id="footer"></div>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-12965236-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>