Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Merge pull request #1 from srkd/master

tiny improvements=)
  • Loading branch information...
commit 9492a4c3211b0e1d0ed329fcc29475cd82496eda 2 parents 2fe4a11 + 526fe97
@alandawi authored
View
228 estilo.css
@@ -1,59 +1,59 @@
/**** Sitio Web ****/
body {
- background-image: url(img/fondito3.png);
- font-family: arial, helvetica, sans-serif;
- margin: 0px auto;
- padding: 0px;
- color: #333;
- text-align: center;
- font-size: 14px;
- line-height: 140%;
+ background-image: url(img/fondito3.png);
+ font-family: arial, helvetica, sans-serif;
+ margin: 0px auto;
+ padding: 0px;
+ color: #333;
+ text-align: center;
+ font-size: 14px;
+ line-height: 140%;
}
#contenedor {
- margin: 0px auto;
- width: 590px;
- position:relative;
+ margin: 0px auto;
+ width: 590px;
+ position:relative;
}
#contenido {
- background: white;
- margin: 40px 0 40px 0;
- border: 1px solid #999;
- clear: both;
- padding: 15px 25px 25px 15px;
- -moz-box-shadow: rgba(0, 0, 0, 0.25) 1px 1px 1px;
- -webkit-box-shadow: rgba(0, 0, 0, 0.95) 1px 1px 1px;
- border-bottom: 1px solid #999;
- -webkit-border-radius:5px;
- -moz-border-radius: 5px;
+ background: white;
+ margin: 40px 0 40px 0;
+ border: 1px solid #999;
+ clear: both;
+ padding: 15px 25px 25px 15px;
+ -moz-box-shadow: rgba(0, 0, 0, 0.25) 1px 1px 1px;
+ -webkit-box-shadow: rgba(0, 0, 0, 0.95) 1px 1px 1px;
+ border-bottom: 1px solid #999;
+ -webkit-border-radius:5px;
+ -moz-border-radius: 5px;
}
#bloque-imagen {
- float: left;
- width: auto;
+ float: left;
+ width: auto;
}
#bloque-imagen2 {
- float: left;
- margin-left: 6px;
-
+ float: left;
+ margin-left: 6px;
+
}
div, img, form, ul, td, th {
- margin: 0px;
- padding: 0px;
- border: 0px;
- text-align: left;
+ margin: 0px;
+ padding: 0px;
+ border: 0px;
+ text-align: left;
}
p {
- margin: 0 0 20px 0;
+ margin: 0 0 20px 0;
}
h3 {
- color: #666666;
- text-shadow: 0 0 1px #999999;
+ color: #666666;
+ text-shadow: 0 0 1px #999999;
}
.explicacion ul
@@ -63,105 +63,129 @@ h3 {
margin-left: 20px;
}
+.explicacion {
+ position: relative;
+}
+
+.explicacion .titulo
+{
+ position: absolute;
+ background-image: url(img/titulo.png);
+ background-repeat: no-repeat;
+ display: block;
+ height: 49px;
+ width:590px;
+ padding-left: 10px;
+ padding-top: 7px;
+ font-family: 'Open Sans', sans-serif;
+ font-weight: 800;
+ font-size: 17px;
+ color: #503e21;
+ text-shadow: 0px 1px 1px rgba(255, 255, 255, .5);
+}
+
pre {
- margin: 10px 0px;
- padding: 0;
+ margin: 10px 0px;
+ padding: 0;
}
code {
- display: block;
- background-color: #F7F4DD;
- padding: 10px;
- overflow: auto;
+ display: block;
+ background-color: #F7F4DD;
+ padding: 10px;
+ overflow: auto;
}
#footer {
- clear: both;
- width: 100%;
- height: 129px;
- background: transparent url('img/bgfoo.png') repeat-x top right;
- text-align: center;
+ clear: both;
+ width: 100%;
+ height: 129px;
+ background: transparent url('img/bgfoo.png') repeat-x top right;
+ text-align: center;
}
.clearfix:after, .container:after {
- content:"\0020";
- display:block;
- height:0;
- clear:both;
- visibility:hidden;
- overflow:hidden;
+ content:"\0020";
+ display:block;
+ height:0;
+ clear:both;
+ visibility:hidden;
+ overflow:hidden;
}
.clearfix, .container {
- display:block;
+ display:block;
}
.clear {
- clear:both;
+ clear:both;
}
.clearfix:after {
- content: ".";
- display: block;
- height: 0;
- clear: both;
- visibility: hidden;
+ content: ".";
+ display: block;
+ height: 0;
+ clear: both;
+ visibility: hidden;
}
/**** Choco-Slider ****/
-
+#slider {
+ height: 200px;
+ width: 560px;
+}
.chocoslider {
- position:relative;
- margin-bottom: 50px;
+ position:relative;
+ margin-bottom: 50px;
}
.chocoslider img {
- position:absolute;
- top:0px;
- left:0px;
+ position:absolute;
+ top:0px;
+ left:0px;
}
.chocoslider a.choco-imageLink {
- position:absolute;
- top:0px;
- left:0px;
- width:100%;
- height:100%;
- border:0;
- padding:0;
- margin:0;
- z-index:60;
- display:none;
+ position:absolute;
+ top:0px;
+ left:0px;
+ width:100%;
+ height:100%;
+ border:0;
+ padding:0;
+ margin:0;
+ z-index:60;
+ display:none;
}
.choco-slice {
- display:block;
- position:absolute;
- z-index:50;
- height:100%;
+ display:block;
+ position:absolute;
+ z-index:50;
+ height:100%;
}
.choco-title {
- position:absolute;
- left:0px;
- bottom:0px;
- background:#000;
- color:#fff;
- opacity:0.8;
- width:100%;
- z-index:89;
+ position:absolute;
+ left:0px;
+ bottom:0px;
+ background:#000;
+ color:#fff;
+ opacity:0.8;
+ width:100%;
+ z-index:89;
}
.choco-title p {
- padding:5px;
- margin:0;
+ padding:5px;
+ margin:0;
}
.choco-title a {
- display:inline !important;
+ display:inline !important;
}
.choco-html-title {
@@ -169,24 +193,24 @@ code {
}
.choco-controlNavigation {
- position:absolute;
- right:0%;
- bottom:-30px;
+ position:absolute;
+ right:0%;
+ bottom:-30px;
}
.choco-controlNavigation a {
- text-indent: -999999px;
- text-transform:uppercase;
- text-decoration:none;
- height:20px;
- width:18px;
- display:block;
- cursor: pointer;
- background: transparent url(img/controlls.gif) center bottom no-repeat;
- float:left;
- outline: none;
+ text-indent: -999999px;
+ text-transform:uppercase;
+ text-decoration:none;
+ height:20px;
+ width:18px;
+ display:block;
+ cursor: pointer;
+ background: transparent url(img/controlls.gif) center bottom no-repeat;
+ float:left;
+ outline: none;
}
.choco-controlNavigation a.active {
- background: transparent url(img/controlls.gif) center top no-repeat;
+ background: transparent url(img/controlls.gif) center top no-repeat;
}
View
BIN  img/img_en/tittle_customization.png
Deleted file not rendered
View
BIN  img/img_en/tittle_dessert.png
Deleted file not rendered
View
BIN  img/img_en/tittle_examples.png
Deleted file not rendered
View
BIN  img/img_en/tittle_features.png
Deleted file not rendered
View
BIN  img/img_en/tittle_implementation.png
Deleted file not rendered
View
BIN  img/titulo.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  img/titulo_caracteristicas.png
Deleted file not rendered
View
BIN  img/titulo_ejemplos.png
Deleted file not rendered
View
BIN  img/titulo_implementacion.png
Deleted file not rendered
View
BIN  img/titulo_personalizacion.png
Deleted file not rendered
View
BIN  img/titulo_postre.png
Deleted file not rendered
View
332 index.html
@@ -1,211 +1,201 @@
<!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=iso-8859-1" />
-<title>Choco-Slider | A very tasty jQuery Plugin</title>
+ <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" />
+ <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">
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
-<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
-
-<script src="js/jquery.chocoslider.js" type="text/javascript"></script>
-
-
-<link rel="shortcut icon" href="favicon.ico" />
-
-<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 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>
+ <script src="js/jquery.chocoslider.js" type="text/javascript"></script>
+ <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 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 solo pesa 7kb." /></a>
-
- <a href="#"><img src="img/img_2.jpg" alt="Foto 2" /></a>
-
- <a href="#"><img src="img/img_3.jpg" alt="Foto 3" title="Choco-Slider se encuentra liberado bajo la MIT Licence." /></a>
-
- <a href="#"><img src="img/img_4.jpg" alt="Foto 4" /></a>
-
- <a href="#"><img src="img/img_5.jpg" alt="Foto 5" title="Choco-Slider es compatible con todos los navegadores de hoy en dia." /></a>
- </div>
+ <div id="slider">
+ <a href="#"><img src="img/img_1.jpg" alt="Foto 1" title="Choco-Slider solo pesa 7kb."></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 se encuentra liberado bajo la MIT Licence."></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 es compatible con todos los navegadores de hoy en dia."></a>
+ </div>
-
- <div class="explicacion">
- <img src="img/titulo_caracteristicas.png" alt="Caracteristicas" />
- <ul>
- <li>Liviano</li>
- <li>Flexible</li>
- <li>Personalizable</li>
- <li>Liberado bajo MIT licence</li>
- <li>Compatible con Firefox 2+, IE 6+, Safari v4, Opera v10, Google Chrome 3+ y Opera 9+</li>
- </ul>
- </div>
-
-<br />
-
-<div class="explicacion">
- <img src="img/titulo_implementacion.png" alt="Implementacion" />
- <p>Descargue los archivos del Choco-Slider (Javascript y CSS). Una vez hecho eso, incl&uacute;yalos en el sitio, junto a la librer&iacute;a jQuery:</p>
+ <div class="explicacion">
+ <div class="titulo">Características:</div>
+ <br><br><br>
+
+ <ul>
+ <li>Liviano</li>
+ <li>Flexible</li>
+ <li>Personalizable</li>
+ <li>Liberado bajo MIT licence</li>
+ <li>Compatible con Firefox 2+, IE 6+, Safari v4, Opera v10, Google Chrome 3+ y Opera 9+</li>
+ </ul>
+ </div>
+ <br>
-<pre>
-<code>&lt;link rel=&quot;stylesheet&quot; href=&quot;chocoslider.css&quot; type=&quot;text/css&quot; /&gt;
+ <div class="explicacion">
+ <div class="titulo">Implementación:</div>
+ <br><br><br>
+ <p>Descargue los archivos del Choco-Slider (Javascript y CSS). Una vez hecho eso, incl&uacute;yalos en el sitio, junto a la librer&iacute;a jQuery:</p>
-&lt;script type=&quot;text/javascript&quot; src=&quot;jquery.chocoslider.js&quot;&gt;&lt;/script&gt;<br />
+ <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>Agregue el siguiente contenedor, modifique las im&aacute;genes, su alt y su t&iacute;tulo correspondiente:</p>
+
+ <p>Agregue el siguiente contenedor, modifique las im&aacute;genes, su alt y su t&iacute;tulo correspondiente:</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;
+ <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>Agregue lo siguiente antes del cierre del &lt;/head&gt; para llamar al Choco-Slider:</p>
-
-<pre>
-<code>&lt;script type=&quot;text/javascript&quot;&gt;
+ <p>Agregue lo siguiente antes del cierre del &lt;/head&gt; para llamar al Choco-Slider:</p>
+
+ <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
$(window).load(function() {
- $('#slider').chocoslider();
+ $('#slider').chocoslider();
});
-&lt;/script&gt;</code>
-</pre>
+&lt;/script&gt;</code></pre>
+
+ </div>
+
+ <br>
- </div>
-
-<br />
-
<div class="explicacion">
- <img src="img/titulo_personalizacion.png" alt="Personalizacion" />
- <p>En caso de que no personalice las opciones, autom&aacute;ticamente se van a usar las opciones por defecto:</p>
-
-<pre><code>auto:true, (si queremos autom&aacute;tico el slider)<br />
-autoPause:true, (para detener el slider luego de hacer click)<br />
-speedStrip:500, (Velocidad entre las tiras)<br />
-effect:'random', (Hay tres tipos: effect1, effect2 y random)<br />
-numberStrips:15, (cantidad de tiras a mostrar)<br />
-sliderDelay:3000, (tiempo de retraso entre la transici&oacute;n de im&aacute;genes)<br />
-transparencytitle:0.8, (Transparencia del t&iacute;tulo)<br />
-bChange: function(){}, (funci&oacute;n necesaria para finalizar)<br />
-aChange: function(){}, (funci&oacute;n necesaria para finalizar)<br />
-chocoEnd: function(){}, (funci&oacute;n necesaria para finalizar)<br />
-controlNavigation:true (Si se quita solo se mostrar&aacute;n las im&aacute;genes)
-</code></pre>
-
- </div>
-
-<br />
+ <div class="titulo">Personalización:</div>
+ <br><br><br>
+
+ <p>En caso de que no personalice las opciones, autom&aacute;ticamente se van a usar las opciones por defecto:</p>
+
+ <pre><code>auto:true, (si queremos autom&aacute;tico el slider)<br>
+autoPause:true, (para detener el slider luego de hacer click)<br>
+speedStrip:500, (Velocidad entre las tiras)<br>
+effect:'random', (Hay tres tipos: 'slide', 'fade' y 'random')<br>
+numberStrips:15, (cantidad de tiras a mostrar)<br>
+sliderDelay:3000, (tiempo de retraso entre la transici&oacute;n de im&aacute;genes)<br>
+transparencytitle:0.8, (Transparencia del t&iacute;tulo)<br>
+bChange: function(){}, (funci&oacute;n necesaria para finalizar)<br>
+aChange: function(){}, (funci&oacute;n necesaria para finalizar)<br>
+chocoEnd: function(){}, (funci&oacute;n necesaria para finalizar)<br>
+controlNavigation:true (Si se quita solo se mostrar&aacute;n las im&aacute;genes)</code>
+ </pre>
+ </div>
+ <br>
+
<div class="explicacion">
- <img src="img/titulo_ejemplos.png" alt="Ejemplos" />
- <p>Ejemplo N&ordm; 1:</p>
+ <div class="titulo">Ejemplos:</div>
+ <br><br><br>
+
+ <p>Ejemplo N&ordm; 1:</p>
-<pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
+ <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
+ $('#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>
+&lt;/script&gt;</code>
+ </pre>
-<br />
+ <br>
- <p>Ejemplo N&ordm; 2:</p>
+ <p>Ejemplo N&ordm; 2:</p>
-<pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
+ <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
+ $('#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>
+&lt;/script&gt;</code>
+ </pre>
- </div>
-
-<br />
-
- <div class="explicacion">
- <img src="img/titulo_postre.png" alt="El Postre" />
- <div id="bloque-imagen">
- <a href="choco_slider_v2.rar"><img src="img/descarga.png" alt="Descargar" /></a>
- </div>
-
- <div id="bloque-imagen2">
- <a href="index_en.html"><img src="img/idioma.png" alt="Idioma" /></a>
</div>
- </div>
-
- <!--[if IE 7]>
- <br /><br />
- <![endif]-->
+ <br>
+
+ <div class="explicacion">
+ <div class="titulo">El Postre:</div>
+ <br><br><br>
+
+ <div id="bloque-imagen">
+ <a href="choco_slider_v2.rar"><img src="img/descarga.png" alt="Descargar"></a>
+ </div>
+
+ <div id="bloque-imagen2">
+ <a href="index_en.html"><img src="img/idioma.png" alt="Idioma"></a>
+ </div>
+ </div>
+ <!--[if IE 7]>
+ <br><br>
+ <![endif]-->
+
+ </div>
+ </div>
-</div>
-</div>
-<div id="footer"></div>
+ <div id="footer"></div>
-<script type="text/javascript">
- var _gaq = _gaq || [];
- _gaq.push(['_setAccount', 'UA-12965236-2']);
- _gaq.push(['_trackPageview']);
+ <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>
+ (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>
+ </body>
</html>
View
206 index_de.html
@@ -0,0 +1,206 @@
+<!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>
View
309 index_en.html
@@ -1,209 +1,206 @@
<!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=iso-8859-1" />
-<title>Choco-Slider | A very tasty jQuery Plugin</title>
+ <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" />
+ <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 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">
-<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.4.2/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>
+ <!--[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>
-</head>
-<body>
+ <script src="js/jquery.chocoslider.js" type="text/javascript"></script>
-<div id="contenedor">
-<div id="contenido" class="clearfix">
+ <script type="text/javascript">
+ $(window).load(function() {
+ $('#slider').chocoslider();
+ });
+ </script>
+ </head>
+ <body>
- <div id="header">
- <img src="img/header2.png" alt="Choco-Slider" />
- </div>
+ <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 weighs only 7kb." /></a>
-
- <a href="#"><img src="img/img_2.jpg" alt="Foto 2" /></a>
-
- <a href="#"><img src="img/img_3.jpg" alt="Foto 3" title="Choco-Slider se encuentra liberado bajo la MIT Licence." /></a>
-
- <a href="#"><img src="img/img_4.jpg" alt="Foto 4" /></a>
-
- <a href="#"><img src="img/img_5.jpg" alt="Foto 5" title="Choco-Slider is compatible with all browsers today." /></a>
- </div>
-
-
+ <div id="slider">
+ <a href="#"><img src="img/img_1.jpg" alt="Foto 1" title="Choco-Slider weighs only 7kb."></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 se encuentra liberado bajo la MIT Licence."></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 is compatible with all browsers today."></a>
+ </div>
- <div class="explicacion">
- <img src="img/img_en/tittle_features.png" alt="Caracteristicas" />
- <ul>
+ <div class="explicacion">
+ <div class="titulo">Features:</div>
+ <br><br><br>
+
+ <ul>
<li>Lightweight</li>
<li>Flexible</li>
<li>Customizable</li>
<li>Released under MIT license</li>
<li>Compatible with Firefox 2 +, IE 6 +, Safari v4, Google Chrome 3 + and Opera 9 +</li>
- </ul>
- </div>
+ </ul>
+ </div>
-<br />
+ <br>
-<div class="explicacion">
- <img src="img/img_en/tittle_implementation.png" alt="Implementacion" />
- <p>Download the Choco-Slider (Javascript and CSS). Having done so, include them and the jQuery library on the site:</p>
+ <div class="explicacion">
+ <div class="titulo">Implementation:</div>
+ <br><br><br>
-<pre>
-<code>&lt;link rel=&quot;stylesheet&quot; href=&quot;chocoslider.css&quot; type=&quot;text/css&quot; /&gt;
+ <p>Download the Choco-Slider (Javascript and CSS). Having done so, include them and the jQuery library on the site:</p>
-&lt;script type=&quot;text/javascript&quot; src=&quot;jquery.chocoslider.js&quot;&gt;&lt;/script&gt;<br />
+ <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>Add the next container, edit images, alt and title your question:</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>Add the following before the closing &lt;/ head&gt; to call Choco-Slider:</p>
+ </pre>
+
+ <p>Add the next container, edit images, alt and title your question:</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>Add the following before the closing &lt;/ head&gt; to call Choco-Slider:</p>
-<pre>
-<code>&lt;script type=&quot;text/javascript&quot;&gt;
+ <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
$(window).load(function() {
- $('#slider').chocoslider();
+ $('#slider').chocoslider();
});
-&lt;/script&gt;</code>
-</pre>
+&lt;/script&gt;
+</code></pre>
+
+ </div>
+
+ <br>
- </div>
-
-<br />
-
<div class="explicacion">
- <img src="img/img_en/tittle_customization.png" alt="Personalizacion" />
- <p>In case you do not customize the options, it automatically will use the default options:</p>
-
-<pre><code>auto:true, (if you want automatic slider)<br />
-autoPause:true, (to stop the slider after clicking)<br />
-speedStrip:500, (Speed between the strips)<br />
-effect:'random', (There are three types: effect1, effect2 and random)<br />
-numberStrips:15, (number of strips to show)<br />
-sliderDelay:3000, (time delay between images transition)<br />
-transparencytitle:0.8, (Transparency of the title)<br />
-bChange: function(){}, (function necessary to complete)<br />
-aChange: function(){}, (function necessary to complete)<br />
-chocoEnd: function(){}, (function necessary to complete)<br />
+ <div class="titulo">Customization:</div>
+ <br><br><br>
+
+ <p>In case you do not customize the options, it automatically will use the default options:</p>
+
+ <pre><code>auto:true, (if you want automatic slider)<br>
+autoPause:true, (to stop the slider after clicking)<br>
+speedStrip:500, (Speed between the strips)<br>
+effect:'random', (There are three types: 'slide', 'fade' and 'random')<br>
+numberStrips:15, (number of strips to show)<br>
+sliderDelay:3000, (time delay between images transition)<br>
+transparencytitle:0.8, (Transparency of the title)<br>
+bChange: function(){}, (function necessary to complete)<br>
+aChange: function(){}, (function necessary to complete)<br>
+chocoEnd: function(){}, (function necessary to complete)<br>
controlNavigation:true (Removing only show images)
</code></pre>
- </div>
-
-<br />
-
+ </div>
+
+ <br>
+
<div class="explicacion">
- <img src="img/img_en/tittle_examples.png" alt="Ejemplos" />
- <p>Example N&ordm; 1:</p>
+ <div class="titulo">Examples:</div>
+ <br><br><br>
+
+ <p>Example N&ordm; 1:</p>
-<pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
+ <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
+ $('#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 />
+ <br>
- <p>Example N&ordm; 2:</p>
+ <p>Example N&ordm; 2:</p>
-<pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
+ <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
+ $('#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>
+ </code></pre>
- </div>
-
-<br />
-
- <div class="explicacion">
- <img src="img/img_en/tittle_dessert.png" alt="El Postre" />
- <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.html"><img src="img/img_en/language.png" alt="Language" /></a>
+ <br>
+
+ <div class="explicacion">
+ <div class="titulo">Dessert:</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.html"><img src="img/img_en/language.png" alt="Language"></a>
+ </div>
</div>
- </div>
-
- <!--[if IE 7]>
- <br /><br />
- <![endif]-->
-
+ <!--[if IE 7]>
+ <br><br>
+ <![endif]-->
-</div>
-</div>
-<div id="footer"></div>
+ </div>
+ </div>
+ <div id="footer"></div>
-<script type="text/javascript">
- var _gaq = _gaq || [];
- _gaq.push(['_setAccount', 'UA-12965236-2']);
- _gaq.push(['_trackPageview']);
+ <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>
+ (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>
+ </body>
</html>
View
532 js/jquery.chocoslider.js
@@ -11,41 +11,41 @@
(function($) {
- $.fn.chocoslider = function(options) {
-
-
- var settings = $.extend({}, $.fn.chocoslider.defaults, options);
-
- return this.each(function() {
-
- var vars = {
- currentSlide: 0,
- currentImage: '',
- totalSlides: 0,
- randAnim: '',
- running: false,
- paused: false,
- stop:false
- };
-
-
- var slider = $(this);
- slider.data('choco:vars', vars);
- slider.css('position','relative');
- slider.addClass('chocoslider');
-
-
- var kids = slider.children();
- kids.each(function() {
- var child = $(this);
- var link = '';
- if(!child.is('img')){
- if(child.is('a')){
- child.addClass('choco-imageLink');
- link = child;
- }
- child = child.find('img:first');
- }
+ $.fn.chocoslider = function(options) {
+
+
+ var settings = $.extend({}, $.fn.chocoslider.defaults, options);
+
+ return this.each(function() {
+
+ var vars = {
+ currentSlide: 0,
+ currentImage: '',
+ totalSlides: 0,
+ randAnim: '',
+ running: false,
+ paused: false,
+ stop:false
+ };
+
+
+ var slider = $(this);
+ slider.data('choco:vars', vars);
+ slider.css('position','relative');
+ slider.addClass('chocoslider');
+
+
+ var kids = slider.children();
+ kids.each(function() {
+ var child = $(this);
+ var link = '';
+ if(!child.is('img')){
+ if(child.is('a')){
+ child.addClass('choco-imageLink');
+ link = child;
+ }
+ child = child.find('img:first');
+ }
var childWidth = child.width();
if(childWidth == 0) childWidth = child.attr('width');
@@ -63,245 +63,245 @@
}
child.css('display','none');
vars.totalSlides++;
- });
-
-
- if($(kids[vars.currentSlide]).is('img')){
- vars.currentImage = $(kids[vars.currentSlide]);
- } else {
- vars.currentImage = $(kids[vars.currentSlide]).find('img:first');
- }
-
-
- if($(kids[vars.currentSlide]).is('a')){
- $(kids[vars.currentSlide]).css('display','block');
- }
-
-
- slider.css('background','url('+ vars.currentImage.attr('src') +') no-repeat');
-
-
- for(var i = 0; i < settings.numberStrips; i++){
- var sliceWidth = Math.round(slider.width()/settings.numberStrips);
- if(i == settings.numberStrips-1){
- slider.append(
- $('<div class="choco-slice"></div>').css({ left:(sliceWidth*i)+'px', width:(slider.width()-(sliceWidth*i))+'px' })
- );
- } else {
- slider.append(
- $('<div class="choco-slice"></div>').css({ left:(sliceWidth*i)+'px', width:sliceWidth+'px' })
- );
- }
- }
-
-
- slider.append(
- $('<div class="choco-title"><p></p></div>').css({ display:'none', opacity:settings.transparencytitle })
- );
-
- if(vars.currentImage.attr('title') != ''){
+ });
+
+
+ if($(kids[vars.currentSlide]).is('img')){
+ vars.currentImage = $(kids[vars.currentSlide]);
+ } else {
+ vars.currentImage = $(kids[vars.currentSlide]).find('img:first');
+ }
+
+
+ if($(kids[vars.currentSlide]).is('a')){
+ $(kids[vars.currentSlide]).css('display','block');
+ }
+
+
+ slider.css('background','url('+ vars.currentImage.attr('src') +') no-repeat');
+
+
+ for(var i = 0; i < settings.numberStrips; i++){
+ var sliceWidth = Math.round(slider.width()/settings.numberStrips);
+ if(i == settings.numberStrips-1){
+ slider.append(
+ $('<div class="choco-slice"></div>').css({ left:(sliceWidth*i)+'px', width:(slider.width()-(sliceWidth*i))+'px' })
+ );
+ } else {
+ slider.append(
+ $('<div class="choco-slice"></div>').css({ left:(sliceWidth*i)+'px', width:sliceWidth+'px' })
+ );
+ }
+ }
+
+
+ slider.append(
+ $('<div class="choco-title"><p></p></div>').css({ display:'none', opacity:settings.transparencytitle })
+ );
+
+ if(vars.currentImage.attr('title') != ''){
var title = vars.currentImage.attr('title');
if(title.substr(0,1) == '#') title = $(title).html();
- $('.choco-title p', slider).html(title);
- $('.choco-title', slider).fadeIn(settings.speedStrip);
- }
-
-
- var timer = 0;
- if(!settings.auto && kids.length > 1){
- timer = setInterval(function(){ chocoRun(slider, kids, settings, false); }, settings.sliderDelay);
- }
-
-
-
- if(settings.controlNavigation){
- var chocoControl = $('<div class="choco-controlNavigation"></div>');
- slider.append(chocoControl);
- for(var i = 0; i < kids.length; i++){
- chocoControl.append('<a class="choco-control" rel="'+ i +'">'+ (i + 1) +'</a>');
- }
-
-
- $('.choco-controlNavigation a:eq('+ vars.currentSlide +')', slider).addClass('active');
-
- $('.choco-controlNavigation a', slider).live('click', function(){
- if(vars.running) return false;
- if($(this).hasClass('active')) return false;
- clearInterval(timer);
- timer = '';
- slider.css('background','url('+ vars.currentImage.attr('src') +') no-repeat');
- vars.currentSlide = $(this).attr('rel') - 1;
- chocoRun(slider, kids, settings, 'control');
- });
- }
-
-
- if(settings.autoPause){
- slider.hover(function(){
- vars.paused = true;
- clearInterval(timer);
- timer = '';
- }, function(){
- vars.paused = false;
-
- if(timer == '' && !settings.auto){
- timer = setInterval(function(){ chocoRun(slider, kids, settings, false); }, settings.sliderDelay);
- }
- });
- }
-
-
- slider.bind('choco:animFinished', function(){
- vars.running = false;
-
- $(kids).each(function(){
- if($(this).is('a')){
- $(this).css('display','none');
- }
- });
-
- if($(kids[vars.currentSlide]).is('a')){
- $(kids[vars.currentSlide]).css('display','block');
- }
-
- if(timer == '' && !vars.paused && !settings.auto){
- timer = setInterval(function(){ chocoRun(slider, kids, settings, false); }, settings.sliderDelay);
- }
-
- settings.aChange.call(this);
- });
- });
-
- function chocoRun(slider, kids, settings, nudge){
-
- var vars = slider.data('choco:vars');
- if((!vars || vars.stop) && !nudge) return false;
-
-
- settings.bChange.call(this);
-
-
- if(!nudge){
- slider.css('background','url('+ vars.currentImage.attr('src') +') no-repeat');
- } else {
- if(nudge == 'prev'){
- slider.css('background','url('+ vars.currentImage.attr('src') +') no-repeat');
- }
- if(nudge == 'next'){
- slider.css('background','url('+ vars.currentImage.attr('src') +') no-repeat');
- }
- }
- vars.currentSlide++;
- if(vars.currentSlide == vars.totalSlides){
- vars.currentSlide = 0;
-
- settings.chocoEnd.call(this);
- }
- if(vars.currentSlide < 0) vars.currentSlide = (vars.totalSlides - 1);
-
- if($(kids[vars.currentSlide]).is('img')){
- vars.currentImage = $(kids[vars.currentSlide]);
- } else {
- vars.currentImage = $(kids[vars.currentSlide]).find('img:first');
- }
-
-
- if(settings.controlNavigation){
- $('.choco-controlNavigation a', slider).removeClass('active');
- $('.choco-controlNavigation a:eq('+ vars.currentSlide +')', slider).addClass('active');
- }
-
-
- if(vars.currentImage.attr('title') != ''){
+ $('.choco-title p', slider).html(title);
+ $('.choco-title', slider).fadeIn(settings.speedStrip);
+ }
+
+
+ var timer = 0;
+ if(settings.auto && kids.length > 1){
+ timer = setInterval(function(){ chocoRun(slider, kids, settings, false); }, settings.sliderDelay);
+ }
+
+
+
+ if(settings.controlNavigation){
+ var chocoControl = $('<div class="choco-controlNavigation"></div>');
+ slider.append(chocoControl);
+ for(var i = 0; i < kids.length; i++){
+ chocoControl.append('<a class="choco-control" rel="'+ i +'">'+ (i + 1) +'</a>');
+ }
+
+
+ $('.choco-controlNavigation a:eq('+ vars.currentSlide +')', slider).addClass('active');
+
+ $('.choco-controlNavigation a', slider).live('click', function(){
+ if(vars.running) return false;
+ if($(this).hasClass('active')) return false;
+ clearInterval(timer);
+ timer = '';
+ slider.css('background','url('+ vars.currentImage.attr('src') +') no-repeat');
+ vars.currentSlide = $(this).attr('rel') - 1;
+ chocoRun(slider, kids, settings, 'control');
+ });
+ }
+
+
+ if(settings.autoPause){
+ slider.hover(function(){
+ vars.paused = true;
+ clearInterval(timer);
+ timer = '';
+ }, function(){
+ vars.paused = false;
+
+ if(timer == '' && settings.auto){
+ timer = setInterval(function(){ chocoRun(slider, kids, settings, false); }, settings.sliderDelay);
+ }
+ });
+ }
+
+
+ slider.bind('choco:animFinished', function(){
+ vars.running = false;
+
+ $(kids).each(function(){
+ if($(this).is('a')){
+ $(this).css('display','none');
+ }
+ });
+
+ if($(kids[vars.currentSlide]).is('a')){
+ $(kids[vars.currentSlide]).css('display','block');
+ }
+
+ if(timer == '' && !vars.paused && settings.auto){
+ timer = setInterval(function(){ chocoRun(slider, kids, settings, false); }, settings.sliderDelay);
+ }
+
+ settings.aChange.call(this);
+ });
+ });
+
+ function chocoRun(slider, kids, settings, nudge){
+
+ var vars = slider.data('choco:vars');
+ if((!vars || vars.stop) && !nudge) return false;
+
+
+ settings.bChange.call(this);
+
+
+ if(!nudge){
+ slider.css('background','url('+ vars.currentImage.attr('src') +') no-repeat');
+ } else {
+ if(nudge == 'prev'){
+ slider.css('background','url('+ vars.currentImage.attr('src') +') no-repeat');
+ }
+ if(nudge == 'next'){
+ slider.css('background','url('+ vars.currentImage.attr('src') +') no-repeat');
+ }
+ }
+ vars.currentSlide++;
+ if(vars.currentSlide == vars.totalSlides){
+ vars.currentSlide = 0;
+
+ settings.chocoEnd.call(this);
+ }
+ if(vars.currentSlide < 0) vars.currentSlide = (vars.totalSlides - 1);
+
+ if($(kids[vars.currentSlide]).is('img')){
+ vars.currentImage = $(kids[vars.currentSlide]);
+ } else {
+ vars.currentImage = $(kids[vars.currentSlide]).find('img:first');
+ }
+
+
+ if(settings.controlNavigation){
+ $('.choco-controlNavigation a', slider).removeClass('active');
+ $('.choco-controlNavigation a:eq('+ vars.currentSlide +')', slider).addClass('active');
+ }
+
+
+ if(vars.currentImage.attr('title') != ''){
var title = vars.currentImage.attr('title');
- if(title.substr(0,1) == '#') title = $(title).html();
+ if(title.substr(0,1) == '#') title = $(title).html();
- if($('.choco-title', slider).css('display') == 'block'){
- $('.choco-title p', slider).fadeOut(settings.speedStrip, function(){
- $(this).html(title);
- $(this).fadeIn(settings.speedStrip);
- });
- } else {
- $('.choco-title p', slider).html(title);
- }
- $('.choco-title', slider).fadeIn(settings.speedStrip);
- } else {
- $('.choco-title', slider).fadeOut(settings.speedStrip);
- }
-
-
- var i = 0;
- $('.choco-slice', slider).each(function(){
- var sliceWidth = Math.round(slider.width()/settings.numberStrips);
- $(this).css({ height:'0px', opacity:'0',
- background: 'url('+ vars.currentImage.attr('src') +') no-repeat -'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px 0%' });
- i++;
- });
-
- if(settings.effect == 'random'){
- var anims = new Array("effect1","effect2");
- vars.randAnim = anims[Math.floor(Math.random()*(anims.length + 1))];
- if(vars.randAnim == undefined) vars.randAnim = 'effect2';
- }
+ if($('.choco-title', slider).css('display') == 'block'){
+ $('.choco-title p', slider).fadeOut(settings.speedStrip, function(){
+ $(this).html(title);
+ $(this).fadeIn(settings.speedStrip);
+ });
+ } else {
+ $('.choco-title p', slider).html(title);
+ }
+ $('.choco-title', slider).fadeIn(settings.speedStrip);
+ } else {
+ $('.choco-title', slider).fadeOut(settings.speedStrip);
+ }
+
+
+ var i = 0;
+ $('.choco-slice', slider).each(function(){
+ var sliceWidth = Math.round(slider.width()/settings.numberStrips);
+ $(this).css({ height:'0px', opacity:'0',
+ background: 'url('+ vars.currentImage.attr('src') +') no-repeat -'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px 0%' });
+ i++;
+ });
+
+ if(settings.effect == 'random'){
+ var anims = new Array("slide","fade");
+ vars.randAnim = anims[Math.floor(Math.random()*(anims.length + 1))];
+ if(vars.randAnim == undefined) vars.randAnim = 'fade';
+ }
if(settings.effect.indexOf(',') != -1){
var anims = settings.effect.split(',');
vars.randAnim = $.trim(anims[Math.floor(Math.random()*anims.length)]);
}
-
-
- vars.running = true;
- if(settings.effect == 'effect1' || vars.randAnim == 'effect1'){
- var timeBuff = 0;
- var i = 0;
- $('.choco-slice', slider).each(function(){
- var slice = $(this);
- var origWidth = slice.width();
- slice.css({ top:'0px', height:'100%', width:'0px' });
- if(i == settings.numberStrips-1){
- setTimeout(function(){
- slice.animate({ width:origWidth, opacity:'1.0' }, settings.speedStrip, '', function(){ slider.trigger('choco:animFinished'); });
- }, (100 + timeBuff));
- } else {
- setTimeout(function(){
- slice.animate({ width:origWidth, opacity:'1.0' }, settings.speedStrip);
- }, (100 + timeBuff));
- }
- timeBuff += 50;
- i++;
- });
- }
- else if(settings.effect == 'effect2' || vars.randAnim == 'effect2'){
- var i = 0;
- $('.choco-slice', slider).each(function(){
- $(this).css('height','100%');
- if(i == settings.numberStrips-1){
- $(this).animate({ opacity:'1.0' }, (settings.speedStrip*2), '', function(){ slider.trigger('choco:animFinished'); });
- } else {
- $(this).animate({ opacity:'1.0' }, (settings.speedStrip*2));
- }
- i++;
- });
- }
- }
- };
-
-
- $.fn.chocoslider.defaults = {
- auto:true,
- autoPause:true,
- speedStrip:500,
- effect:'random',
- numberStrips:15,
- sliderDelay:3000,
- transparencytitle:0.8,
- bChange: function(){},
- aChange: function(){},
- chocoEnd: function(){},
- controlNavigation:true
- };
-
- $.fn._reverse = [].reverse;
-
+
+
+ vars.running = true;
+ if(settings.effect == 'slide' || vars.randAnim == 'slide'){
+ var timeBuff = 0;
+ var i = 0;
+ $('.choco-slice', slider).each(function(){
+ var slice = $(this);
+ var origWidth = slice.width();
+ slice.css({ top:'0px', height:'100%', width:'0px' });
+ if(i == settings.numberStrips-1){
+ setTimeout(function(){
+ slice.animate({ width:origWidth, opacity:'1.0' }, settings.speedStrip, '', function(){ slider.trigger('choco:animFinished'); });
+ }, (100 + timeBuff));
+ } else {
+ setTimeout(function(){
+ slice.animate({ width:origWidth, opacity:'1.0' }, settings.speedStrip);
+ }, (100 + timeBuff));
+ }
+ timeBuff += 50;
+ i++;
+ });
+ }
+ else if(settings.effect == 'fade' || vars.randAnim == 'fade'){
+ var i = 0;
+ $('.choco-slice', slider).each(function(){
+ $(this).css('height','100%');
+ if(i == settings.numberStrips-1){
+ $(this).animate({ opacity:'1.0' }, (settings.speedStrip*2), '', function(){ slider.trigger('choco:animFinished'); });
+ } else {
+ $(this).animate({ opacity:'1.0' }, (settings.speedStrip*2));
+ }
+ i++;
+ });
+ }
+ }
+ };
+
+
+ $.fn.chocoslider.defaults = {
+ auto:true,
+ autoPause:true,
+ speedStrip:500,
+ effect:'random',
+ numberStrips:15,
+ sliderDelay:3000,
+ transparencytitle:0.8,
+ bChange: function(){},
+ aChange: function(){},
+ chocoEnd: function(){},
+ controlNavigation:true
+ };
+
+ $.fn._reverse = [].reverse;
+
})(jQuery);
Please sign in to comment.
Something went wrong with that request. Please try again.