git-svn-id: https://192.168.0.254/svn/Proyectos.GrupoArdeco_Web/trunk@3 f3e42445-bc5e-4746-be46-0918cadaadb9
This commit is contained in:
parent
93b19c583d
commit
3bfa29e32f
11
src/.project
Normal file
11
src/.project
Normal file
@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<projectDescription>
|
||||
<name>GrupoArdeco</name>
|
||||
<comment></comment>
|
||||
<projects>
|
||||
</projects>
|
||||
<buildSpec>
|
||||
</buildSpec>
|
||||
<natures>
|
||||
</natures>
|
||||
</projectDescription>
|
||||
73
src/contacto.html
Normal file
73
src/contacto.html
Normal file
@ -0,0 +1,73 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title>Grupo Ardeco - Decoración de interiores</title>
|
||||
<link rel="stylesheet" type="text/css" href="reset.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="estilos.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="menu.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="forms.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<div id="cabecera">
|
||||
<div id="logotipo">
|
||||
<h1>Grupo Ardeco</h1>
|
||||
<h2>Decoración de interiores</h2>
|
||||
</div>
|
||||
|
||||
<div id="menu">
|
||||
<ul>
|
||||
<li><a href="index.html">Inicio</a></li>
|
||||
<li><a href="">Proyectos</a></li>
|
||||
<li class="current">Contacto</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="banner">
|
||||
<div id="foto">
|
||||
<img src="fotos/16.jpg"/>
|
||||
</div>
|
||||
<div id="seleccion">
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear"> </div>
|
||||
|
||||
<div id="principal">
|
||||
<div id="contacto_izquierda">
|
||||
<h3>Formulario de contacto</h3>
|
||||
<p>Nuestros proyectos integrales aportan la solución idónea a cada uno de nuestros clientes, tanto desde la perpectiva funcional como estética.<br/><br/>
|
||||
</p>
|
||||
<form name="form1" class="cmxform">
|
||||
<fieldset>
|
||||
<legend></legend>
|
||||
<ol>
|
||||
<li><label for="nombre">Su nombre: </label> <input id="nombre" style="width: 360px;"/></li>
|
||||
<li><label for="email">Su email: </label> <input id="email" style="width: 360px;"/></li>
|
||||
<li><label for="consulta">Su consulta: </label> <textarea cols="43" rows="7" id="consulta"></textarea></li>
|
||||
<li><label for="submit"></label><input type="submit" name="Submit" value="Enviar"></li>
|
||||
</ol>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<div id="contacto_derecha">
|
||||
<p><br/>
|
||||
C/ Paseo de la Chopera, 2<br/>
|
||||
28100 - Alcobendas - Madrid<br/>
|
||||
Teléfono: 91 789 78 78<br/>
|
||||
Fax: 91 299 22 99<br/>E-Mail: info@grupoardeco.com<br/><br/>
|
||||
<a href="contacto.html" alt="Ver plano de situación">Ver plano de situación</a></p>
|
||||
</div>
|
||||
<div class="clear"> </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear"> </div>
|
||||
<div id="pie_layout">
|
||||
<div id="pie">
|
||||
<p><a href="">Aviso legal</a> | <a href="" title="">Política de privacidad</a><br/>Diseñado por <a href="http://www.rodax-software.com" title="Rodax Software S.L.">Rodax Software S.L.</a> - 2009</p>
|
||||
</div >
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
133
src/estilos.css
133
src/estilos.css
@ -6,8 +6,8 @@ html, body {
|
||||
margin:0;
|
||||
padding:0;
|
||||
font-family: Verdana,Arial,Helvetica,sans-serif;
|
||||
color:#808080;
|
||||
font-size: 80%;
|
||||
color:#666;
|
||||
font-size: 85%;
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
font-weight: normal;
|
||||
@ -15,10 +15,9 @@ html, body {
|
||||
}
|
||||
|
||||
body{
|
||||
background-color: #fff;
|
||||
background-image: url('images/fondo.gif');
|
||||
background-color: #efeded;
|
||||
background-image: url("images/fondo.gif");
|
||||
background-repeat: repeat-x;
|
||||
background-position: center center;
|
||||
text-align: center;
|
||||
min-width: 960px;
|
||||
min-height: 550px;
|
||||
@ -28,40 +27,43 @@ p, h1, h2, h3, h4 {
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
font-family: Helvetica,Verdana,Arial,Helvetica,sans-serif;
|
||||
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
font-weight: bold;
|
||||
font-weight: bold;
|
||||
color: #723900;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: normal;
|
||||
font-size:195%;
|
||||
font-size:280%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
font-size:180%;
|
||||
font-size: 240%;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size:120%;
|
||||
text-transform: lowercase;
|
||||
font-size: 150%;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
font-size: 110%;
|
||||
font-size: 180%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #E46825;
|
||||
color: #004080;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
a:hover, a:active {
|
||||
color: #666666;
|
||||
color: #400080;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@ -82,17 +84,17 @@ li {
|
||||
#vertical{
|
||||
float: left;
|
||||
height: 50%;
|
||||
margin-top: -270px;/* half vertical height*/
|
||||
margin-top: -570px;/* half vertical height*/
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#layout {
|
||||
width:960px;
|
||||
margin: 0;
|
||||
margin: 20px 0 0 0;
|
||||
padding: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
height: 545px;
|
||||
min-height: 545px;
|
||||
overflow: auto; /* allow content to scroll inside element */
|
||||
text-align:left;
|
||||
clear: both;
|
||||
@ -102,9 +104,8 @@ li {
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
width: 960px;
|
||||
height: 110px;
|
||||
height: 90px;
|
||||
text-align: left;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
#logotipo {
|
||||
@ -112,7 +113,7 @@ li {
|
||||
background-repeat: no-repeat;
|
||||
width: 380px;
|
||||
height: 75px;
|
||||
float: left;
|
||||
float: right;
|
||||
}
|
||||
#cabecera h1, #cabecera h2 {
|
||||
margin: 0;
|
||||
@ -120,41 +121,89 @@ li {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#banner {
|
||||
margin: 0 0 20px 0;
|
||||
padding: 0;
|
||||
width: 960px;
|
||||
height: 300px;
|
||||
background-color: #bcbcbc;
|
||||
}
|
||||
|
||||
#banner #foto {
|
||||
float: left;
|
||||
}
|
||||
|
||||
#banner #foto #texto_foto {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#banner #seleccion {
|
||||
color: #222;
|
||||
float: right;
|
||||
text-align: left;
|
||||
width: 210px;
|
||||
padding: 20px 100px 0 0;
|
||||
}
|
||||
|
||||
#principal {
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 960px;
|
||||
}
|
||||
#principal h3 {
|
||||
padding: 0 0 5px 0;
|
||||
margin-bottom: 20px;
|
||||
padding-left: 15px;
|
||||
border-left: 15px ridge #080;
|
||||
}
|
||||
|
||||
#principal p {
|
||||
padding: 0 30px 5px 30px;
|
||||
}
|
||||
|
||||
#principal ul {
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
||||
#inicio_izquierda {
|
||||
float: left;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 500px;
|
||||
border: 1px solid;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
#inicio_centro {
|
||||
float: left;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
#inicio_derecha {
|
||||
float: right;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 360px;
|
||||
border: 1px solid;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
#foto {
|
||||
padding: 6px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #aaa;
|
||||
|
||||
|
||||
#contacto_izquierda {
|
||||
float: left;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 640px;
|
||||
}
|
||||
|
||||
#contacto_derecha {
|
||||
float: right;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.clear {
|
||||
clear:both;
|
||||
}
|
||||
@ -162,7 +211,8 @@ li {
|
||||
#pie_layout {
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding: 10px 0 0 0;
|
||||
background-color: #723900;
|
||||
background-image:url(images/fondo-pie.gif);
|
||||
background-repeat:repeat-x;
|
||||
background-position: top;
|
||||
@ -177,31 +227,12 @@ li {
|
||||
width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 12px 0 0 0;
|
||||
color: #CABA9F;
|
||||
font-family: Verdana, Geneva, sans-serif;
|
||||
}
|
||||
|
||||
#pie_izquierda {
|
||||
text-align: left;
|
||||
margin: 0 0 0 15px;
|
||||
padding: 0;
|
||||
width: 460px;
|
||||
float:left;
|
||||
}
|
||||
|
||||
#pie_derecha {
|
||||
text-align: right;
|
||||
margin: 0 15px 0 0;
|
||||
padding: 60px 0 0 0;
|
||||
width: 460px;
|
||||
float:right;
|
||||
}
|
||||
|
||||
#pie a {
|
||||
color: #fff;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
|
||||
#pie h3 {
|
||||
text-transform:none;
|
||||
background: none;
|
||||
|
||||
38
src/forms.css
Normal file
38
src/forms.css
Normal file
@ -0,0 +1,38 @@
|
||||
/**********************************
|
||||
|
||||
Name: cmxform Styles
|
||||
Author: Nick Rigby
|
||||
|
||||
***********************************/
|
||||
|
||||
form.cmxform {
|
||||
margin: 0 0 0 50px;
|
||||
width: auto;
|
||||
font-size: 110%;
|
||||
color:#666;
|
||||
}
|
||||
|
||||
form.cmxform legend { }
|
||||
|
||||
form.cmxform label {
|
||||
margin-right: 20px;
|
||||
width: 85px;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
form.cmxform fieldset {
|
||||
border: none;
|
||||
}
|
||||
|
||||
form.cmxform fieldset fieldset { }
|
||||
|
||||
|
||||
form.cmxform fieldset li {
|
||||
padding: 5px 10px 7px;
|
||||
}
|
||||
|
||||
form.cmxform input {
|
||||
|
||||
}
|
||||
BIN
src/images/fondo-cabecera.gif
Normal file
BIN
src/images/fondo-cabecera.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/images/fondo-pie.gif
Normal file
BIN
src/images/fondo-pie.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 260 B |
Binary file not shown.
|
Before Width: | Height: | Size: 366 B After Width: | Height: | Size: 462 B |
105
src/index.html
105
src/index.html
@ -2,13 +2,50 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title>CYVACSA</title>
|
||||
<title>Grupo Ardeco - Decoración de interiores</title>
|
||||
<link rel="stylesheet" type="text/css" href="reset.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="estilos.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="menu.css"/>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="slideshow/css/slideshow.css"/>
|
||||
<script type="text/javascript" src="slideshow/js/mootools.js"></script>
|
||||
<script type="text/javascript" src="slideshow/js/slideshow.js"></script>
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
window.addEvent('domready', function(){
|
||||
var data = {
|
||||
'1.jpg': { caption: 'Hotel NH Argüelles. Madrid.' },
|
||||
'2.jpg': { caption: 'Hotel NH Argüelles. Madrid.' },
|
||||
'3.jpg': { caption: 'Hotel NH Argüelles. Madrid.' },
|
||||
'4.jpg': { caption: 'Hotel NH Embajada. Madrid' },
|
||||
'5.jpg': { caption: 'Hotel NH Embajada. Madrid' },
|
||||
'6.jpg': { caption: 'Hotel NH Embajada. Madrid' },
|
||||
'7.jpg': { caption: 'The view from Volcano Maderas.' },
|
||||
'8.jpg': { caption: 'Beer and ice cream.' },
|
||||
'9.jpg': { caption: 'Volcano Asención in Ometepe, Nicaragua.' },
|
||||
'10.jpg': { caption: 'A Ceibu tree.' },
|
||||
'11.jpg': { caption: 'The view from Volcano Maderas.' },
|
||||
'12.jpg': { caption: 'Beer and ice cream.' },
|
||||
'13.jpg': { caption: 'Beer and ice cream.' },
|
||||
'14.jpg': { caption: 'Beer and ice cream.' },
|
||||
'15.jpg': { caption: 'Beer and ice cream.' },
|
||||
'16.jpg': { caption: 'Beer and ice cream.' },
|
||||
'17.jpg': { caption: 'Beer and ice cream.' }
|
||||
};
|
||||
var myShow = new Slideshow('foto', data, {
|
||||
captions: true,
|
||||
href: 'servicios.html',
|
||||
height: 300,
|
||||
width: 600,
|
||||
hu: 'fotos/',
|
||||
delay: 5000,
|
||||
random: true});
|
||||
});
|
||||
//]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="vertical"></div>
|
||||
<!--<div id="vertical"></div>-->
|
||||
<div id="layout">
|
||||
<div id="cabecera">
|
||||
<div id="logotipo">
|
||||
@ -19,40 +56,62 @@
|
||||
<div id="menu">
|
||||
<ul>
|
||||
<li class="current">Inicio</li>
|
||||
<li><a href="servicios.html">Servicios</a></li>
|
||||
<li><a href="">Proyectos</a></li>
|
||||
<li><a href="contacto.html">Contacto</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="banner">
|
||||
<div id="foto" class="slideshow">
|
||||
<img src="fotos/1.jpg" alt="Volcano Asención in Ometepe, Nicaragua." />
|
||||
</div>
|
||||
<div id="seleccion">
|
||||
<h3>Galería</h3>
|
||||
<ul>
|
||||
<li>dsfdsfs</li>
|
||||
<li>dsfdsfs</li>
|
||||
<li>dsfdsfs</li>
|
||||
<li>dsfdsfs</li>
|
||||
</ul>
|
||||
<p>Nuestros proyectos integrales aportan la solución idónea a cada uno de nuestros clientes, tanto desde la perpectiva funcional como estética.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear"> </div>
|
||||
|
||||
<div id="principal">
|
||||
<div id="inicio_izquierda">
|
||||
<div id="foto">
|
||||
<img src="fotos/VIA 66-3.jpg" width="485px" height="283px"/>
|
||||
<p><strong>Hotel Vincci Via 66</strong><br/>Madrid</p>
|
||||
<p><a href="servicios.html">Ver más...</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="inicio_derecha">
|
||||
<h3>Proyectos singulares</h3>
|
||||
<p><img src="fotos/proyecto2.jpg" /><br/>
|
||||
Donec eleifend turpis at risus volutpat tempus. Vestibulum eget urna vitae metus venenatis porttitor eu sit amet nunc.
|
||||
<h3>Bienvenido a Grupo Ardeco</h3>
|
||||
<p>Nuestros proyectos integrales aportan la solución idónea a cada uno de nuestros clientes, tanto desde la perpectiva funcional como estética.<br/><br/>
|
||||
</p>
|
||||
<hr class="divisor"/>
|
||||
<h3>Áreas principales de actuación</h3>
|
||||
<ul><li>Líneas eléctricas</li><li>Parques eólicos y solares</li><li>Gaseoductos y oleoductos</li><li>Obras lineales</li><li>Carreteras y autopistas</li><li>Conducciones de agua y embalses</li></ul>
|
||||
</div>
|
||||
<div id="inicio_centro">
|
||||
<h3>Servicios</h3>
|
||||
<p>Cubrimos todas las áreas en la decoración de interiores: diseño, fabricación, montaje y decoración de todo tipo de superficies:
|
||||
<ul>
|
||||
<li>Instalaciones comerciales</li>
|
||||
<li>Instalaciones hoteleras</li>
|
||||
<li>Oficinas</li>
|
||||
<li>Ferias y exposiciones</li>
|
||||
</ul></p>
|
||||
</div>
|
||||
<div id="inicio_derecha">
|
||||
<h3>Contacto</h3>
|
||||
<p>
|
||||
C/ Paseo de la Chopera, 2<br/>
|
||||
28100 - Alcobendas - Madrid<br/>
|
||||
Teléfono: 91 789 78 78<br/>
|
||||
Fax: 91 299 22 99<br/>E-Mail: info@grupoardeco.com<br/><br/>
|
||||
<a href="contacto.html" alt="Ver plano de situación">Ver plano de situación</a></p>
|
||||
</div>
|
||||
<div class="clear"> </div>
|
||||
</div>
|
||||
</div>
|
||||
<!--<div class="clear"> </div>
|
||||
<div class="clear"> </div>
|
||||
<div id="pie_layout">
|
||||
<div id="pie">
|
||||
<p><a href="">Aviso legal</a> | <a href="" title="">Política de privacidad</a></p>
|
||||
<p>Diseñado por <a href="http://www.rodax-software.com" title="Rodax Software S.L.">Rodax Software S.L.</a> - 2009</p>
|
||||
</div >
|
||||
</div> -->
|
||||
<div id="pie">
|
||||
<p><a href="">Aviso legal</a> | <a href="" title="">Política de privacidad</a><br/>Diseñado por <a href="http://www.rodax-software.com" title="Rodax Software S.L.">Rodax Software S.L.</a> - 2009</p>
|
||||
</div >
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
35
src/menu.css
35
src/menu.css
@ -2,34 +2,40 @@
|
||||
|
||||
/* CSS Document */
|
||||
#menu {
|
||||
float: right;
|
||||
margin:0;
|
||||
padding:0;
|
||||
width:579px;
|
||||
color: #000;
|
||||
float: left;
|
||||
margin: 50px 0 0 0;
|
||||
padding: 0;
|
||||
width: auto;
|
||||
font-family: Tahoma, Geneva, sans-serif;
|
||||
font-size: 130%;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
#menu ul {
|
||||
list-style-type:none;
|
||||
margin:0;
|
||||
padding:0;
|
||||
|
||||
}
|
||||
|
||||
#menu ul li {
|
||||
float:left;
|
||||
margin:0;
|
||||
padding:0;
|
||||
width:90px;
|
||||
float: left;
|
||||
margin: 0 40px 0 0;
|
||||
padding: 0;
|
||||
width: auto;
|
||||
padding: 0 0 5px 0;
|
||||
}
|
||||
|
||||
#menu ul li a {
|
||||
display:block;
|
||||
height:42px;
|
||||
text-decoration:none;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
font-weight: normal;
|
||||
color: #555;
|
||||
padding: 0 0 5px 0;
|
||||
}
|
||||
|
||||
#menu ul li a:hover {
|
||||
|
||||
border-bottom: 5px solid #b2dbb2;
|
||||
}
|
||||
|
||||
#menu ul li.active a {
|
||||
@ -37,5 +43,6 @@
|
||||
}
|
||||
|
||||
.current{
|
||||
background-color: #aaa;
|
||||
color: #000;
|
||||
border-bottom: 5px solid #004b00;
|
||||
}
|
||||
|
||||
36
src/slideshow/README
Normal file
36
src/slideshow/README
Normal file
@ -0,0 +1,36 @@
|
||||
LICENSE
|
||||
|
||||
MIT-style license.
|
||||
|
||||
COPYRIGHT
|
||||
|
||||
Copyright (c) 2008 [Aeron Glemann](http://www.electricprism.com/aeron/).
|
||||
|
||||
SUMMARY
|
||||
|
||||
Slideshow is a javascript class for Mootools 1.2 to stream and animate the presentation of images on your website.
|
||||
|
||||
FILES
|
||||
|
||||
In this distribution, you will find the following files:
|
||||
|
||||
css/ - Folder containing stylesheet and CSS background images.
|
||||
images/ - Folder with example images.
|
||||
index.html - Example script usage.
|
||||
js/ - Folder with the Slideshow scripts and Mootools 1.2.1.
|
||||
|
||||
SUPPORT
|
||||
|
||||
http://code.google.com/p/slideshow - Official development website.
|
||||
http://www.electricprism.com/aeron/slideshow/ - Demos and examples.
|
||||
http://code.google.com/p/slideshow/wiki/FAQ - FAQ.
|
||||
http://code.google.com/p/slideshow/wiki/Slideshow - Manual.
|
||||
http://groups.google.com/group/mootools-slideshow - Google Group.
|
||||
|
||||
CHANGE LOG
|
||||
|
||||
slideshow.js (147) - IE fixed for both the base class and Fold slideshows.
|
||||
slideshow.js (131) - IE7 or newer now looks good! Added transitions on paused, titles options, more.
|
||||
slideshow.js (113) - Fixed conflict with Mootools 1.2.1 and destroy().
|
||||
slideshow.js (105) - Added fix for duplicate image filenames.
|
||||
slideshow.js (104) - Added onEnd event handler.
|
||||
BIN
src/slideshow/css/controller-first.gif
Normal file
BIN
src/slideshow/css/controller-first.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 400 B |
BIN
src/slideshow/css/controller-last.gif
Normal file
BIN
src/slideshow/css/controller-last.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 396 B |
BIN
src/slideshow/css/controller-next.gif
Normal file
BIN
src/slideshow/css/controller-next.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 425 B |
BIN
src/slideshow/css/controller-pause.gif
Normal file
BIN
src/slideshow/css/controller-pause.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 547 B |
BIN
src/slideshow/css/controller-prev.gif
Normal file
BIN
src/slideshow/css/controller-prev.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 424 B |
BIN
src/slideshow/css/controller.png
Normal file
BIN
src/slideshow/css/controller.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src/slideshow/css/loader-0.png
Normal file
BIN
src/slideshow/css/loader-0.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 754 B |
BIN
src/slideshow/css/loader-1.png
Normal file
BIN
src/slideshow/css/loader-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 750 B |
BIN
src/slideshow/css/loader-10.png
Normal file
BIN
src/slideshow/css/loader-10.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 733 B |
BIN
src/slideshow/css/loader-11.png
Normal file
BIN
src/slideshow/css/loader-11.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 737 B |
BIN
src/slideshow/css/loader-2.png
Normal file
BIN
src/slideshow/css/loader-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 739 B |
BIN
src/slideshow/css/loader-3.png
Normal file
BIN
src/slideshow/css/loader-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 733 B |
BIN
src/slideshow/css/loader-4.png
Normal file
BIN
src/slideshow/css/loader-4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 742 B |
BIN
src/slideshow/css/loader-5.png
Normal file
BIN
src/slideshow/css/loader-5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 725 B |
BIN
src/slideshow/css/loader-6.png
Normal file
BIN
src/slideshow/css/loader-6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 738 B |
BIN
src/slideshow/css/loader-7.png
Normal file
BIN
src/slideshow/css/loader-7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 724 B |
BIN
src/slideshow/css/loader-8.png
Normal file
BIN
src/slideshow/css/loader-8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 735 B |
BIN
src/slideshow/css/loader-9.png
Normal file
BIN
src/slideshow/css/loader-9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 736 B |
287
src/slideshow/css/slideshow.css
Normal file
287
src/slideshow/css/slideshow.css
Normal file
@ -0,0 +1,287 @@
|
||||
/**
|
||||
Stylesheet: Slideshow.css
|
||||
CSS for Slideshow.
|
||||
|
||||
License:
|
||||
MIT-style license.
|
||||
|
||||
Copyright:
|
||||
Copyright (c) 2008 [Aeron Glemann](http://www.electricprism.com/aeron/).
|
||||
|
||||
HTML:
|
||||
<div class="slideshow">
|
||||
<div class="slideshow-images" />
|
||||
<div class="slideshow-captions" />
|
||||
<div class="slideshow-controller" />
|
||||
<div class="slideshow-loader" />
|
||||
<div class="slideshow-thumbnails" />
|
||||
</div>
|
||||
|
||||
Notes:
|
||||
These next four rules are set by the Slideshow script.
|
||||
You can override any of them with the !important keyword but the slideshow probably will not work as intended.
|
||||
*/
|
||||
|
||||
.slideshow {
|
||||
display: block;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
.slideshow-images {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.slideshow-images img {
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
.slideshow-thumbnails {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/**
|
||||
HTML:
|
||||
<div class="slideshow-images">
|
||||
<img />
|
||||
<img />
|
||||
</div>
|
||||
|
||||
Notes:
|
||||
The images div is where the slides are shown.
|
||||
Customize the visible / prev / next classes to effect the slideshow transitions: fading, wiping, etc.
|
||||
*/
|
||||
|
||||
.slideshow-images {
|
||||
height: 300px;
|
||||
width: 600px;
|
||||
}
|
||||
.slideshow-images-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
.slideshow-images-prev {
|
||||
opacity: 0;
|
||||
}
|
||||
.slideshow-images-next {
|
||||
opacity: 0;
|
||||
}
|
||||
.slideshow-images img {
|
||||
float: left;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
Notes:
|
||||
These are examples of user-defined styles.
|
||||
Customize these classes to your usage of Slideshow.
|
||||
*/
|
||||
|
||||
.slideshow {
|
||||
height: 300px;
|
||||
margin: 0 auto;
|
||||
width: 600px;
|
||||
}
|
||||
.slideshow a img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
HTML:
|
||||
<div class="slideshow-captions">
|
||||
...
|
||||
</div>
|
||||
|
||||
Notes:
|
||||
Customize the hidden / visible classes to affect the captions animation.
|
||||
*/
|
||||
|
||||
.slideshow-captions {
|
||||
background: #000;
|
||||
bottom: 0;
|
||||
color: #fff;
|
||||
font: normal 12px/22px Arial, sans-serif;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
text-indent: 10px;
|
||||
width: 100%;
|
||||
z-index: 10000;
|
||||
}
|
||||
.slideshow-captions-hidden {
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
.slideshow-captions-visible {
|
||||
height: 22px;
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
/**
|
||||
HTML:
|
||||
<div class="slideshow-controller">
|
||||
<ul>
|
||||
<li class="first"><a /></li>
|
||||
<li class="prev"><a /></li>
|
||||
<li class="pause play"><a /></li>
|
||||
<li class="next"><a /></li>
|
||||
<li class="last"><a /></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
Notes:
|
||||
Customize the hidden / visible classes to affect the controller animation.
|
||||
*/
|
||||
|
||||
.slideshow-controller {
|
||||
background: url(controller.png) no-repeat;
|
||||
height: 42px;
|
||||
left: 50%;
|
||||
margin: -21px 0 0 -119px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 238px;
|
||||
z-index: 10000;
|
||||
}
|
||||
.slideshow-controller * {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.slideshow-controller-hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
.slideshow-controller-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
.slideshow-controller a {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
height: 18px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
}
|
||||
.slideshow-controller a.active {
|
||||
background-position: 0 18px;
|
||||
}
|
||||
.slideshow-controller li {
|
||||
list-style: none;
|
||||
}
|
||||
.slideshow-controller li.first a {
|
||||
background-image: url(controller-first.gif);
|
||||
left: 33px;
|
||||
width: 19px;
|
||||
}
|
||||
.slideshow-controller li.last a {
|
||||
background-image: url(controller-last.gif);
|
||||
left: 186px;
|
||||
width: 19px;
|
||||
}
|
||||
.slideshow-controller li.next a {
|
||||
background-image: url(controller-next.gif);
|
||||
left: 145px;
|
||||
width: 28px;
|
||||
}
|
||||
.slideshow-controller li.pause a {
|
||||
background-image: url(controller-pause.gif);
|
||||
left: 109px;
|
||||
width: 20px;
|
||||
}
|
||||
.slideshow-controller li.play a {
|
||||
background-position: 20px 0;
|
||||
}
|
||||
.slideshow-controller li.play a.active {
|
||||
background-position: 20px 18px;
|
||||
}
|
||||
.slideshow-controller li.prev a {
|
||||
background-image: url(controller-prev.gif);
|
||||
left: 65px;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
/**
|
||||
HTML:
|
||||
<div class="slideshow-loader" />
|
||||
|
||||
Notes:
|
||||
Customize the hidden / visible classes to affect the loader animation.
|
||||
*/
|
||||
|
||||
.slideshow-loader {
|
||||
height: 28px;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 28px;
|
||||
z-index: 10001;
|
||||
}
|
||||
.slideshow-loader-hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
.slideshow-loader-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
HTML:
|
||||
<div class="slideshow-thumbnails">
|
||||
<ul>
|
||||
<li><a class="slideshow-thumbnails-active" /></li>
|
||||
<li><a class="slideshow-thumbnails-inactive" /></li>
|
||||
...
|
||||
<li><a class="slideshow-thumbnails-inactive" /></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
Notes:
|
||||
Customize the active / inactive classes to affect the thumbnails animation.
|
||||
Use the !important keyword to override FX without affecting performance.
|
||||
*/
|
||||
|
||||
.slideshow-thumbnails {
|
||||
bottom: -65px;
|
||||
height: 65px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
.slideshow-thumbnails * {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.slideshow-thumbnails ul {
|
||||
height: 65px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 10000px;
|
||||
}
|
||||
.slideshow-thumbnails li {
|
||||
float: left;
|
||||
list-style: none;
|
||||
margin: 5px 5px 5px 0;
|
||||
position: relative;
|
||||
}
|
||||
.slideshow-thumbnails a {
|
||||
display: block;
|
||||
float: left;
|
||||
padding: 5px;
|
||||
position: relative;
|
||||
}
|
||||
.slideshow-thumbnails a:hover {
|
||||
background-color: #FF9 !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
.slideshow-thumbnails img {
|
||||
display: block;
|
||||
}
|
||||
.slideshow-thumbnails-active {
|
||||
background-color: #9FF;
|
||||
opacity: 1;
|
||||
}
|
||||
.slideshow-thumbnails-inactive {
|
||||
background-color: #FFF;
|
||||
opacity: .5;
|
||||
}
|
||||
BIN
src/slideshow/images/1.jpg
Normal file
BIN
src/slideshow/images/1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
BIN
src/slideshow/images/1t.jpg
Normal file
BIN
src/slideshow/images/1t.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
src/slideshow/images/2.jpg
Normal file
BIN
src/slideshow/images/2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
BIN
src/slideshow/images/2t.jpg
Normal file
BIN
src/slideshow/images/2t.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
src/slideshow/images/3.jpg
Normal file
BIN
src/slideshow/images/3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 116 KiB |
BIN
src/slideshow/images/3t.jpg
Normal file
BIN
src/slideshow/images/3t.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
src/slideshow/images/4.jpg
Normal file
BIN
src/slideshow/images/4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
BIN
src/slideshow/images/4t.jpg
Normal file
BIN
src/slideshow/images/4t.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
30
src/slideshow/index.html
Normal file
30
src/slideshow/index.html
Normal file
@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Slideshow 2!</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<meta name="author" content="Aeron Glemann (http://www.electricprism.com/aeron/)" />
|
||||
<link rel="stylesheet" type="text/css" href="css/slideshow.css" media="screen" />
|
||||
<script type="text/javascript" src="js/mootools.js"></script>
|
||||
<script type="text/javascript" src="js/slideshow.js"></script>
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
window.addEvent('domready', function(){
|
||||
var data = {
|
||||
'1.jpg': { caption: 'Volcano Asención in Ometepe, Nicaragua.' },
|
||||
'2.jpg': { caption: 'A Ceibu tree.' },
|
||||
'3.jpg': { caption: 'The view from Volcano Maderas.' },
|
||||
'4.jpg': { caption: 'Beer and ice cream.' }
|
||||
};
|
||||
var myShow = new Slideshow('show', data, {controller: true, height: 300, hu: 'images/', thumbnails: true, width: 400});
|
||||
});
|
||||
//]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="show" class="slideshow">
|
||||
<img src="images/1.jpg" alt="Volcano Asención in Ometepe, Nicaragua." />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
15
src/slideshow/js/mootools.js
Normal file
15
src/slideshow/js/mootools.js
Normal file
File diff suppressed because one or more lines are too long
59
src/slideshow/js/slideshow.flash.js
Normal file
59
src/slideshow/js/slideshow.flash.js
Normal file
@ -0,0 +1,59 @@
|
||||
/**
|
||||
Script: Slideshow.Flash.js
|
||||
Slideshow.Flash - Flash extension for Slideshow.
|
||||
|
||||
License:
|
||||
MIT-style license.
|
||||
|
||||
Copyright:
|
||||
Copyright (c) 2008 [Aeron Glemann](http://www.electricprism.com/aeron/).
|
||||
|
||||
Dependencies:
|
||||
Slideshow.
|
||||
*/
|
||||
|
||||
Slideshow.Flash = new Class({
|
||||
Extends: Slideshow,
|
||||
|
||||
options: {
|
||||
color: ['#FFF']
|
||||
},
|
||||
|
||||
/**
|
||||
Constructor: initialize
|
||||
Creates an instance of the Slideshow class.
|
||||
|
||||
Arguments:
|
||||
element - (element) The wrapper element.
|
||||
data - (array or object) The images and optional thumbnails, captions and links for the show.
|
||||
options - (object) The options below.
|
||||
|
||||
Syntax:
|
||||
var myShow = new Slideshow.Flash(element, data, options);
|
||||
*/
|
||||
|
||||
initialize: function(el, data, options){
|
||||
options.overlap = true;
|
||||
if (options.color)
|
||||
options.color = $splat(options.color);
|
||||
this.parent(el, data, options);
|
||||
},
|
||||
|
||||
/**
|
||||
Private method: show
|
||||
Does the slideshow effect.
|
||||
*/
|
||||
|
||||
_show: function(fast){
|
||||
if (!this.image.retrieve('tween'))
|
||||
$$(this.a, this.b).set('tween', {'duration': this.options.duration, 'link': 'cancel', 'onStart': this._start.bind(this), 'onComplete': this._complete.bind(this), 'property': 'opacity'});
|
||||
if (fast)
|
||||
this.image.get('tween').cancel().set(1);
|
||||
else {
|
||||
this.slideshow.retrieve('images').setStyle('background', this.options.color[this.slide % this.options.color.length]);
|
||||
var img = (this.counter % 2) ? this.a : this.b;
|
||||
img.get('tween').cancel().set(0);
|
||||
this.image.get('tween').set(0).start(1);
|
||||
}
|
||||
}
|
||||
});
|
||||
79
src/slideshow/js/slideshow.fold.js
Normal file
79
src/slideshow/js/slideshow.fold.js
Normal file
@ -0,0 +1,79 @@
|
||||
/**
|
||||
Script: Slideshow.Fold.js
|
||||
Slideshow.Fold - Flash extension for Slideshow.
|
||||
|
||||
License:
|
||||
MIT-style license.
|
||||
|
||||
Copyright:
|
||||
Copyright (c) 2008 [Aeron Glemann](http://www.electricprism.com/aeron/).
|
||||
|
||||
Dependencies:
|
||||
Slideshow.
|
||||
*/
|
||||
|
||||
Slideshow.Fold = new Class({
|
||||
Extends: Slideshow,
|
||||
|
||||
/**
|
||||
Constructor: initialize
|
||||
Creates an instance of the Slideshow class.
|
||||
|
||||
Arguments:
|
||||
element - (element) The wrapper element.
|
||||
data - (array or object) The images and optional thumbnails, captions and links for the show.
|
||||
options - (object) The options below.
|
||||
|
||||
Syntax:
|
||||
var myShow = new Slideshow.Fold(element, data, options);
|
||||
*/
|
||||
|
||||
initialize: function(el, data, options){
|
||||
this.parent(el, data, options);
|
||||
},
|
||||
|
||||
/**
|
||||
Private method: show
|
||||
Does the slideshow effect.
|
||||
*/
|
||||
|
||||
_show: function(fast){
|
||||
if (!this.image.retrieve('tween')){
|
||||
var options = (this.options.overlap) ? {'duration': this.options.duration} : {'duration': this.options.duration / 2};
|
||||
$$(this.a, this.b).set('tween', $merge(options, {'link': 'chain', 'onStart': this._start.bind(this), 'onComplete': this._complete.bind(this), 'property': 'clip', 'transition': this.options.transition}));
|
||||
}
|
||||
var rect = this._rect(this.image);
|
||||
var img = (this.counter % 2) ? this.a : this.b;
|
||||
if (fast){
|
||||
img.get('tween').cancel().set('rect(0, 0, 0, 0)');
|
||||
this.image.get('tween').cancel().set('rect(auto, auto, auto, auto)');
|
||||
}
|
||||
else {
|
||||
if (this.options.overlap){
|
||||
img.get('tween').set('rect(auto, auto, auto, auto)');
|
||||
var tween = this.image.get('tween').set(rect.top + ' ' + rect.left + ' ' + Math.ceil(rect.bottom / 2) + ' ' + rect.left).start(rect.top + ' ' + rect.right + ' ' + Math.ceil(rect.bottom / 2) + ' ' + rect.left).start(rect.top + ' ' + rect.right + ' ' + rect.bottom + ' ' + rect.left);
|
||||
}
|
||||
else {
|
||||
var fn = function(rect){
|
||||
this.image.get('tween').set(rect.top + ' ' + rect.left + ' ' + Math.ceil(rect.bottom / 2) + ' ' + rect.left).start(rect.top + ' ' + rect.right + ' ' + Math.ceil(rect.bottom / 2) + ' ' + rect.left).start(rect.top + ' ' + rect.right + ' ' + rect.bottom + ' ' + rect.left);
|
||||
}.pass(rect, this);
|
||||
var rect = this._rect(img);
|
||||
img.get('tween').set(rect.top + ' ' + rect.right + ' ' + rect.bottom + ' ' + rect.left).start(rect.top + ' ' + rect.right + ' ' + Math.ceil(rect.bottom / 2) + ' ' + rect.left).start(rect.top + ' ' + rect.left + ' ' + Math.ceil(rect.bottom / 2) + ' ' + rect.left).chain(fn);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
Private method: rect
|
||||
Calculates the clipping rect
|
||||
*/
|
||||
|
||||
_rect: function(img){
|
||||
var rect = img.getCoordinates(this.slideshow.retrieve('images'));
|
||||
rect.right = (rect.right > this.width) ? this.width - rect.left : rect.width;
|
||||
rect.bottom = (rect.bottom > this.height) ? this.height - rect.top : rect.height;
|
||||
rect.top = (rect.top < 0) ? Math.abs(rect.top) : 0;
|
||||
rect.left = (rect.left < 0) ? Math.abs(rect.left) : 0;
|
||||
return rect;
|
||||
}
|
||||
});
|
||||
820
src/slideshow/js/slideshow.js
Normal file
820
src/slideshow/js/slideshow.js
Normal file
@ -0,0 +1,820 @@
|
||||
/**
|
||||
Script: Slideshow.js
|
||||
Slideshow - A javascript class for Mootools to stream and animate the presentation of images on your website.
|
||||
|
||||
License:
|
||||
MIT-style license.
|
||||
|
||||
Copyright:
|
||||
Copyright (c) 2008 [Aeron Glemann](http://www.electricprism.com/aeron/).
|
||||
|
||||
Dependencies:
|
||||
Mootools 1.2 Core: Fx.Morph, Fx.Tween, Selectors, Element.Dimensions.
|
||||
Mootools 1.2 More: Assets.
|
||||
*/
|
||||
|
||||
Slideshow = new Class({
|
||||
Implements: [Chain, Events, Options],
|
||||
|
||||
options: {/*
|
||||
onComplete: $empty,
|
||||
onEnd: $empty,
|
||||
onStart: $empty,*/
|
||||
captions: false,
|
||||
center: true,
|
||||
classes: [],
|
||||
controller: false,
|
||||
delay: 2000,
|
||||
duration: 750,
|
||||
fast: false,
|
||||
height: false,
|
||||
href: '',
|
||||
hu: '',
|
||||
linked: false,
|
||||
loader: {'animate': ['css/loader-#.png', 12]},
|
||||
loop: true,
|
||||
match: /\?slide=(\d+)$/,
|
||||
overlap: true,
|
||||
paused: false,
|
||||
properties: ['href', 'rel', 'rev', 'title'],
|
||||
random: false,
|
||||
replace: [/(\.[^\.]+)$/, 't$1'],
|
||||
resize: 'width',
|
||||
slide: 0,
|
||||
thumbnails: false,
|
||||
titles: true,
|
||||
transition: function(p){return -(Math.cos(Math.PI * p) - 1) / 2;},
|
||||
width: false
|
||||
},
|
||||
|
||||
/**
|
||||
Constructor: initialize
|
||||
Creates an instance of the Slideshow class.
|
||||
|
||||
Arguments:
|
||||
element - (element) The wrapper element.
|
||||
data - (array or object) The images and optional thumbnails, captions and links for the show.
|
||||
options - (object) The options below.
|
||||
|
||||
Syntax:
|
||||
var myShow = new Slideshow(element, data, options);
|
||||
*/
|
||||
|
||||
initialize: function(el, data, options){
|
||||
this.setOptions(options);
|
||||
this.slideshow = $(el);
|
||||
if (!this.slideshow)
|
||||
return;
|
||||
this.slideshow.set('styles', {'display': 'block', 'position': 'relative', 'z-index': 0});
|
||||
var match = window.location.href.match(this.options.match);
|
||||
this.slide = (this.options.match && match) ? match[1].toInt() : this.options.slide;
|
||||
this.counter = this.delay = this.transition = 0;
|
||||
this.direction = 'left';
|
||||
this.paused = false;
|
||||
if (!this.options.overlap)
|
||||
this.options.duration *= 2;
|
||||
var anchor = this.slideshow.getElement('a') || new Element('a');
|
||||
if (!this.options.href)
|
||||
this.options.href = anchor.get('href') || '';
|
||||
if (this.options.hu.length && !this.options.hu.test(/\/$/))
|
||||
this.options.hu += '/';
|
||||
if (this.options.fast === true)
|
||||
this.options.fast = 2;
|
||||
|
||||
// styles
|
||||
|
||||
var keys = ['slideshow', 'first', 'prev', 'play', 'pause', 'next', 'last', 'images', 'captions', 'controller', 'thumbnails', 'hidden', 'visible', 'inactive', 'active', 'loader'];
|
||||
var values = keys.map(function(key, i){
|
||||
return this.options.classes[i] || key;
|
||||
}, this);
|
||||
this.classes = values.associate(keys);
|
||||
this.classes.get = function(){
|
||||
var str = '.' + this.slideshow;
|
||||
for (var i = 0, l = arguments.length; i < l; i++)
|
||||
str += ('-' + this[arguments[i]]);
|
||||
return str;
|
||||
}.bind(this.classes);
|
||||
|
||||
// data
|
||||
|
||||
if (!data){
|
||||
this.options.hu = '';
|
||||
data = {};
|
||||
var thumbnails = this.slideshow.getElements(this.classes.get('thumbnails') + ' img');
|
||||
this.slideshow.getElements(this.classes.get('images') + ' img').each(function(img, i){
|
||||
var src = img.get('src');
|
||||
var caption = $pick(img.get('alt'), img.get('title'), '');
|
||||
var parent = img.getParent();
|
||||
var properties = (parent.get('tag') == 'a') ? parent.getProperties : {};
|
||||
var href = img.getParent().get('href') || '';
|
||||
var thumbnail = (thumbnails[i]) ? thumbnails[i].get('src') : '';
|
||||
data[src] = {'caption': caption, 'href': href, 'thumbnail': thumbnail};
|
||||
});
|
||||
}
|
||||
var loaded = this.load(data);
|
||||
if (!loaded)
|
||||
return;
|
||||
|
||||
// events
|
||||
|
||||
this.events = $H({'keydown': [], 'keyup': [], 'mousemove': []});
|
||||
var keyup = function(e){
|
||||
switch(e.key){
|
||||
case 'left':
|
||||
this.prev(e.shift); break;
|
||||
case 'right':
|
||||
this.next(e.shift); break;
|
||||
case 'p':
|
||||
this.pause(); break;
|
||||
}
|
||||
}.bind(this);
|
||||
this.events.keyup.push(keyup);
|
||||
document.addEvent('keyup', keyup);
|
||||
|
||||
// required elements
|
||||
|
||||
var el = this.slideshow.getElement(this.classes.get('images'));
|
||||
var images = (el) ? el.empty() : new Element('div', {'class': this.classes.get('images').substr(1)}).inject(this.slideshow);
|
||||
var div = images.getSize();
|
||||
this.height = this.options.height || div.y;
|
||||
this.width = this.options.width || div.x;
|
||||
images.set({'styles': {'display': 'block', 'height': this.height, 'overflow': 'hidden', 'position': 'relative', 'width': this.width}});
|
||||
this.slideshow.store('images', images);
|
||||
this.a = this.image = this.slideshow.getElement('img') || new Element('img');
|
||||
if (Browser.Engine.trident && Browser.Engine.version > 4)
|
||||
this.a.style.msInterpolationMode = 'bicubic';
|
||||
this.a.set('styles', {'display': 'none', 'position': 'absolute', 'zIndex': 1});
|
||||
this.b = this.a.clone();
|
||||
[this.a, this.b].each(function(img){
|
||||
anchor.clone().cloneEvents(anchor).grab(img).inject(images);
|
||||
});
|
||||
|
||||
// optional elements
|
||||
|
||||
if (this.options.captions)
|
||||
this._captions();
|
||||
if (this.options.controller)
|
||||
this._controller();
|
||||
if (this.options.loader)
|
||||
this._loader();
|
||||
if (this.options.thumbnails)
|
||||
this._thumbnails();
|
||||
|
||||
// begin show
|
||||
|
||||
this._preload();
|
||||
},
|
||||
|
||||
/**
|
||||
Public method: go
|
||||
Jump directly to a slide in the show.
|
||||
|
||||
Arguments:
|
||||
n - (integer) The index number of the image to jump to, 0 being the first image in the show.
|
||||
|
||||
Syntax:
|
||||
myShow.go(n);
|
||||
*/
|
||||
|
||||
go: function(n, direction){
|
||||
if ((this.slide - 1 + this.data.images.length) % this.data.images.length == n || $time() < this.transition)
|
||||
return;
|
||||
$clear(this.timer);
|
||||
this.delay = 0;
|
||||
this.direction = (direction) ? direction : ((n < this.slide) ? 'right' : 'left');
|
||||
this.slide = n;
|
||||
if (this.preloader)
|
||||
this.preloader = this.preloader.destroy();
|
||||
this._preload(this.options.fast == 2 || (this.options.fast == 1 && this.paused));
|
||||
},
|
||||
|
||||
/**
|
||||
Public method: first
|
||||
Goes to the first image in the show.
|
||||
|
||||
Syntax:
|
||||
myShow.first();
|
||||
*/
|
||||
|
||||
first: function(){
|
||||
this.prev(true);
|
||||
},
|
||||
|
||||
/**
|
||||
Public method: prev
|
||||
Goes to the previous image in the show.
|
||||
|
||||
Syntax:
|
||||
myShow.prev();
|
||||
*/
|
||||
|
||||
prev: function(first){
|
||||
var n = 0;
|
||||
if (!first){
|
||||
if (this.options.random){
|
||||
|
||||
// if it's a random show get the previous slide from the showed array
|
||||
|
||||
if (this.showed.i < 2)
|
||||
return;
|
||||
this.showed.i -= 2;
|
||||
n = this.showed.array[this.showed.i];
|
||||
}
|
||||
else
|
||||
n = (this.slide - 2 + this.data.images.length) % this.data.images.length;
|
||||
}
|
||||
this.go(n, 'right');
|
||||
},
|
||||
|
||||
/**
|
||||
Public method: pause
|
||||
Toggles play / pause state of the show.
|
||||
|
||||
Arguments:
|
||||
p - (undefined, 1 or 0) Call pause with no arguments to toggle the pause state. Call pause(1) to force pause, or pause(0) to force play.
|
||||
|
||||
Syntax:
|
||||
myShow.pause(p);
|
||||
*/
|
||||
|
||||
pause: function(p){
|
||||
if ($chk(p))
|
||||
this.paused = (p) ? false : true;
|
||||
if (this.paused){
|
||||
this.paused = false;
|
||||
this.delay = this.transition = 0;
|
||||
this.timer = this._preload.delay(100, this);
|
||||
[this.a, this.b].each(function(img){
|
||||
['morph', 'tween'].each(function(p){
|
||||
if (this.retrieve(p)) this.get(p).resume();
|
||||
}, img);
|
||||
});
|
||||
if (this.options.controller)
|
||||
this.slideshow.getElement('.' + this.classes.pause).removeClass(this.classes.play);
|
||||
}
|
||||
else {
|
||||
this.paused = true;
|
||||
this.delay = Number.MAX_VALUE;
|
||||
this.transition = 0;
|
||||
$clear(this.timer);
|
||||
[this.a, this.b].each(function(img){
|
||||
['morph', 'tween'].each(function(p){
|
||||
if (this.retrieve(p)) this.get(p).pause();
|
||||
}, img);
|
||||
});
|
||||
if (this.options.controller)
|
||||
this.slideshow.getElement('.' + this.classes.pause).addClass(this.classes.play);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
Public method: next
|
||||
Goes to the next image in the show.
|
||||
|
||||
Syntax:
|
||||
myShow.next();
|
||||
*/
|
||||
|
||||
next: function(last){
|
||||
var n = (last) ? this.data.images.length - 1 : this.slide;
|
||||
this.go(n, 'left');
|
||||
},
|
||||
|
||||
/**
|
||||
Public method: last
|
||||
Goes to the last image in the show.
|
||||
|
||||
Syntax:
|
||||
myShow.last();
|
||||
*/
|
||||
|
||||
last: function(){
|
||||
this.next(true);
|
||||
},
|
||||
|
||||
/**
|
||||
Public method: load
|
||||
Loads a new data set into the show: will stop the current show, rewind and rebuild thumbnails if applicable.
|
||||
|
||||
Arguments:
|
||||
data - (array or object) The images and optional thumbnails, captions and links for the show.
|
||||
|
||||
Syntax:
|
||||
myShow.load(data);
|
||||
*/
|
||||
|
||||
load: function(data){
|
||||
this.firstrun = true;
|
||||
this.showed = {'array': [], 'i': 0};
|
||||
if ($type(data) == 'array'){
|
||||
this.options.captions = false;
|
||||
data = new Array(data.length).associate(data.map(function(image, i){ return image + '?' + i }));
|
||||
}
|
||||
this.data = {'images': [], 'captions': [], 'hrefs': [], 'thumbnails': []};
|
||||
for (var image in data){
|
||||
var obj = data[image] || {};
|
||||
var caption = (obj.caption) ? obj.caption.trim() : '';
|
||||
var href = (obj.href) ? obj.href.trim() : ((this.options.linked) ? this.options.hu + image : this.options.href);
|
||||
var thumbnail = (obj.thumbnail) ? obj.thumbnail.trim() : image.replace(this.options.replace[0], this.options.replace[1]);
|
||||
this.data.images.push(image);
|
||||
this.data.captions.push(caption);
|
||||
this.data.hrefs.push(href);
|
||||
this.data.thumbnails.push(thumbnail);
|
||||
}
|
||||
if (this.options.random)
|
||||
this.slide = $random(0, this.data.images.length - 1);
|
||||
|
||||
// only run when data is loaded dynamically into an existing slideshow instance
|
||||
|
||||
if (this.options.thumbnails && this.slideshow.retrieve('thumbnails'))
|
||||
this._thumbnails();
|
||||
if (this.slideshow.retrieve('images')){
|
||||
[this.a, this.b].each(function(img){
|
||||
['morph', 'tween'].each(function(p){
|
||||
if (this.retrieve(p)) this.get(p).cancel();
|
||||
}, img);
|
||||
});
|
||||
this.slide = this.transition = 0;
|
||||
this.go(0);
|
||||
}
|
||||
return this.data.images.length;
|
||||
},
|
||||
|
||||
/**
|
||||
Public method: destroy
|
||||
Destroys a Slideshow instance.
|
||||
|
||||
Arguments:
|
||||
p - (string) The images and optional thumbnails, captions and links for the show.
|
||||
|
||||
Syntax:
|
||||
myShow.destroy(p);
|
||||
*/
|
||||
|
||||
destroy: function(p){
|
||||
this.events.each(function(array, e){
|
||||
array.each(function(fn){ document.removeEvent(e, fn); });
|
||||
});
|
||||
this.pause(1);
|
||||
if (this.options.loader)
|
||||
$clear(this.slideshow.retrieve('loader').retrieve('timer'));
|
||||
if (this.options.thumbnails)
|
||||
$clear(this.slideshow.retrieve('thumbnails').retrieve('timer'));
|
||||
this.slideshow.uid = Native.UID++;
|
||||
if (p)
|
||||
this.slideshow[p]();
|
||||
},
|
||||
|
||||
/**
|
||||
Private method: preload
|
||||
Preloads the next slide in the show, once loaded triggers the show, updates captions, thumbnails, etc.
|
||||
*/
|
||||
|
||||
_preload: function(fast){
|
||||
if (!this.preloader)
|
||||
this.preloader = new Asset.image(this.options.hu + this.data.images[this.slide], {'onload': function(){
|
||||
this.store('loaded', true);
|
||||
}});
|
||||
if (this.preloader.retrieve('loaded') && $time() > this.delay && $time() > this.transition){
|
||||
if (this.stopped){
|
||||
if (this.options.captions)
|
||||
this.slideshow.retrieve('captions').get('morph').cancel().start(this.classes.get('captions', 'hidden'));
|
||||
this.pause(1);
|
||||
if (this.end)
|
||||
this.fireEvent('end');
|
||||
this.stopped = this.end = false;
|
||||
return;
|
||||
}
|
||||
this.image = (this.counter % 2) ? this.b : this.a;
|
||||
this.image.set('styles', {'display': 'block', 'height': 'auto', 'visibility': 'hidden', 'width': 'auto', 'zIndex': this.counter});
|
||||
['src', 'height', 'width'].each(function(prop){
|
||||
this.image.set(prop, this.preloader.get(prop));
|
||||
}, this);
|
||||
this._resize(this.image);
|
||||
this._center(this.image);
|
||||
var anchor = this.image.getParent();
|
||||
if (this.data.hrefs[this.slide])
|
||||
anchor.set('href', this.data.hrefs[this.slide]);
|
||||
else
|
||||
anchor.erase('href');
|
||||
var text = (this.data.captions[this.slide])
|
||||
? this.data.captions[this.slide].replace(/<.+?>/gm, '').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, "'")
|
||||
: '';
|
||||
this.image.set('alt', text);
|
||||
if (this.options.titles)
|
||||
anchor.set('title', text);
|
||||
if (this.options.loader)
|
||||
this.slideshow.retrieve('loader').fireEvent('hide');
|
||||
if (this.options.captions)
|
||||
this.slideshow.retrieve('captions').fireEvent('update', fast);
|
||||
if (this.options.thumbnails)
|
||||
this.slideshow.retrieve('thumbnails').fireEvent('update', fast);
|
||||
this._show(fast);
|
||||
this._loaded();
|
||||
}
|
||||
else {
|
||||
if ($time() > this.delay && this.options.loader)
|
||||
this.slideshow.retrieve('loader').fireEvent('show');
|
||||
this.timer = (this.paused && this.preloader.retrieve('loaded')) ? null : this._preload.delay(100, this, fast);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
Private method: show
|
||||
Does the slideshow effect.
|
||||
*/
|
||||
|
||||
_show: function(fast){
|
||||
if (!this.image.retrieve('morph')){
|
||||
var options = (this.options.overlap) ? {'duration': this.options.duration, 'link': 'cancel'} : {'duration': this.options.duration / 2, 'link': 'chain'};
|
||||
$$(this.a, this.b).set('morph', $merge(options, {'onStart': this._start.bind(this), 'onComplete': this._complete.bind(this), 'transition': this.options.transition}));
|
||||
}
|
||||
var hidden = this.classes.get('images', ((this.direction == 'left') ? 'next' : 'prev'));
|
||||
var visible = this.classes.get('images', 'visible');
|
||||
var img = (this.counter % 2) ? this.a : this.b;
|
||||
if (fast){
|
||||
img.get('morph').cancel().set(hidden);
|
||||
this.image.get('morph').cancel().set(visible);
|
||||
}
|
||||
else {
|
||||
if (this.options.overlap){
|
||||
img.get('morph').set(visible);
|
||||
this.image.get('morph').set(hidden).start(visible);
|
||||
}
|
||||
else {
|
||||
var fn = function(hidden, visible){
|
||||
this.image.get('morph').set(hidden).start(visible);
|
||||
}.pass([hidden, visible], this);
|
||||
hidden = this.classes.get('images', ((this.direction == 'left') ? 'prev' : 'next'));
|
||||
img.get('morph').set(visible).start(hidden).chain(fn);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
Private method: loaded
|
||||
Run after the current image has been loaded, sets up the next image to be shown.
|
||||
*/
|
||||
|
||||
_loaded: function(){
|
||||
this.counter++;
|
||||
this.delay = (this.paused) ? Number.MAX_VALUE : $time() + this.options.duration + this.options.delay;
|
||||
this.direction = 'left';
|
||||
this.transition = (this.options.fast == 2 || (this.options.fast == 1 && this.paused)) ? 0 : $time() + this.options.duration;
|
||||
if (this.slide + 1 == this.data.images.length && !this.options.loop && !this.options.random)
|
||||
this.stopped = this.end = true;
|
||||
if (this.options.random){
|
||||
this.showed.i++;
|
||||
if (this.showed.i >= this.showed.array.length){
|
||||
var n = this.slide;
|
||||
if (this.showed.array.getLast() != n) this.showed.array.push(n);
|
||||
while (this.slide == n)
|
||||
this.slide = $random(0, this.data.images.length - 1);
|
||||
}
|
||||
else
|
||||
this.slide = this.showed.array[this.showed.i];
|
||||
}
|
||||
else
|
||||
this.slide = (this.slide + 1) % this.data.images.length;
|
||||
if (this.image.getStyle('visibility') != 'visible')
|
||||
(function(){ this.image.setStyle('visibility', 'visible'); }).delay(1, this);
|
||||
if (this.preloader)
|
||||
this.preloader = this.preloader.destroy();
|
||||
this._preload();
|
||||
},
|
||||
|
||||
/**
|
||||
Private method: center
|
||||
Center an image.
|
||||
*/
|
||||
|
||||
_center: function(img){
|
||||
if (this.options.center){
|
||||
var size = img.getSize();
|
||||
img.set('styles', {'left': (size.x - this.width) / -2, 'top': (size.y - this.height) / -2});
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
Private method: resize
|
||||
Resizes an image.
|
||||
*/
|
||||
|
||||
_resize: function(img){
|
||||
if (this.options.resize){
|
||||
var h = this.preloader.get('height'), w = this.preloader.get('width');
|
||||
var dh = this.height / h, dw = this.width / w, d;
|
||||
if (this.options.resize == 'length')
|
||||
d = (dh > dw) ? dw : dh;
|
||||
else
|
||||
d = (dh > dw) ? dh : dw;
|
||||
img.set('styles', {height: Math.ceil(h * d), width: Math.ceil(w * d)});
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
Private method: start
|
||||
Callback on start of slide change.
|
||||
*/
|
||||
|
||||
_start: function(){
|
||||
this.fireEvent('start');
|
||||
},
|
||||
|
||||
/**
|
||||
Private method: complete
|
||||
Callback on start of slide change.
|
||||
*/
|
||||
|
||||
_complete: function(){
|
||||
if (this.firstrun && this.options.paused){
|
||||
this.firstrun = false;
|
||||
this.pause(1);
|
||||
}
|
||||
this.fireEvent('complete');
|
||||
},
|
||||
|
||||
/**
|
||||
Private method: captions
|
||||
Builds the optional caption element, adds interactivity.
|
||||
This method can safely be removed if the captions option is not enabled.
|
||||
*/
|
||||
|
||||
_captions: function(){
|
||||
if (this.options.captions === true)
|
||||
this.options.captions = {};
|
||||
var el = this.slideshow.getElement(this.classes.get('captions'));
|
||||
var captions = (el) ? el.empty() : new Element('div', {'class': this.classes.get('captions').substr(1)}).inject(this.slideshow);
|
||||
captions.set({
|
||||
'events': {
|
||||
'update': function(fast){
|
||||
var captions = this.slideshow.retrieve('captions');
|
||||
var empty = (this.data.captions[this.slide] === '');
|
||||
if (fast){
|
||||
var p = (empty) ? 'hidden' : 'visible';
|
||||
captions.set('html', this.data.captions[this.slide]).get('morph').cancel().set(this.classes.get('captions', p));
|
||||
}
|
||||
else {
|
||||
var fn = (empty) ? $empty : function(n){
|
||||
this.slideshow.retrieve('captions').set('html', this.data.captions[n]).morph(this.classes.get('captions', 'visible'))
|
||||
}.pass(this.slide, this);
|
||||
captions.get('morph').cancel().start(this.classes.get('captions', 'hidden')).chain(fn);
|
||||
}
|
||||
}.bind(this)
|
||||
},
|
||||
'morph': $merge(this.options.captions, {'link': 'chain'})
|
||||
});
|
||||
this.slideshow.store('captions', captions);
|
||||
},
|
||||
|
||||
/**
|
||||
Private method: controller
|
||||
Builds the optional controller element, adds interactivity.
|
||||
This method can safely be removed if the controller option is not enabled.
|
||||
*/
|
||||
|
||||
_controller: function(){
|
||||
if (this.options.controller === true)
|
||||
this.options.controller = {};
|
||||
var el = this.slideshow.getElement(this.classes.get('controller'));
|
||||
var controller = (el) ? el.empty() : new Element('div', {'class': this.classes.get('controller').substr(1)}).inject(this.slideshow);
|
||||
var ul = new Element('ul').inject(controller);
|
||||
$H({'first': 'Shift + Leftwards Arrow', 'prev': 'Leftwards Arrow', 'pause': 'P', 'next': 'Rightwards Arrow', 'last': 'Shift + Rightwards Arrow'}).each(function(accesskey, action){
|
||||
var li = new Element('li', {
|
||||
'class': (action == 'pause' && this.options.paused) ? this.classes.play + ' ' + this.classes[action] : this.classes[action]
|
||||
}).inject(ul);
|
||||
var a = this.slideshow.retrieve(action, new Element('a', {
|
||||
'title': ((action == 'pause') ? this.classes.play.capitalize() + ' / ' : '') + this.classes[action].capitalize() + ' [' + accesskey + ']'
|
||||
}).inject(li));
|
||||
a.set('events', {
|
||||
'click': function(action){this[action]();}.pass(action, this),
|
||||
'mouseenter': function(active){this.addClass(active);}.pass(this.classes.active, a),
|
||||
'mouseleave': function(active){this.removeClass(active);}.pass(this.classes.active, a)
|
||||
});
|
||||
}, this);
|
||||
controller.set({
|
||||
'events': {
|
||||
'hide': function(hidden){
|
||||
if (!this.retrieve('hidden'))
|
||||
this.store('hidden', true).morph(hidden);
|
||||
}.pass(this.classes.get('controller', 'hidden'), controller),
|
||||
'show': function(visible){
|
||||
if (this.retrieve('hidden'))
|
||||
this.store('hidden', false).morph(visible);
|
||||
}.pass(this.classes.get('controller', 'visible'), controller)
|
||||
},
|
||||
'morph': $merge(this.options.controller, {'link': 'cancel'})
|
||||
}).store('hidden', false);
|
||||
var keydown = function(e){
|
||||
if (['left', 'right', 'p'].contains(e.key)){
|
||||
var controller = this.slideshow.retrieve('controller');
|
||||
if (controller.retrieve('hidden'))
|
||||
controller.get('morph').set(this.classes.get('controller', 'visible'));
|
||||
switch(e.key){
|
||||
case 'left':
|
||||
this.slideshow.retrieve((e.shift) ? 'first' : 'prev').fireEvent('mouseenter'); break;
|
||||
case 'right':
|
||||
this.slideshow.retrieve((e.shift) ? 'last' : 'next').fireEvent('mouseenter'); break;
|
||||
default:
|
||||
this.slideshow.retrieve('pause').fireEvent('mouseenter'); break;
|
||||
}
|
||||
}
|
||||
}.bind(this);
|
||||
this.events.keydown.push(keydown);
|
||||
var keyup = function(e){
|
||||
if (['left', 'right', 'p'].contains(e.key)){
|
||||
var controller = this.slideshow.retrieve('controller');
|
||||
if (controller.retrieve('hidden'))
|
||||
controller.store('hidden', false).fireEvent('hide');
|
||||
switch(e.key){
|
||||
case 'left':
|
||||
this.slideshow.retrieve((e.shift) ? 'first' : 'prev').fireEvent('mouseleave'); break;
|
||||
case 'right':
|
||||
this.slideshow.retrieve((e.shift) ? 'last' : 'next').fireEvent('mouseleave'); break;
|
||||
default:
|
||||
this.slideshow.retrieve('pause').fireEvent('mouseleave'); break;
|
||||
}
|
||||
}
|
||||
}.bind(this);
|
||||
this.events.keyup.push(keyup);
|
||||
var mousemove = function(e){
|
||||
var images = this.slideshow.retrieve('images').getCoordinates();
|
||||
if (e.page.x > images.left && e.page.x < images.right && e.page.y > images.top && e.page.y < images.bottom)
|
||||
this.slideshow.retrieve('controller').fireEvent('show');
|
||||
else
|
||||
this.slideshow.retrieve('controller').fireEvent('hide');
|
||||
}.bind(this);
|
||||
this.events.mousemove.push(mousemove);
|
||||
document.addEvents({'keydown': keydown, 'keyup': keyup, 'mousemove': mousemove});
|
||||
this.slideshow.retrieve('controller', controller).fireEvent('hide');
|
||||
},
|
||||
|
||||
/**
|
||||
Private method: loader
|
||||
Builds the optional loader element, adds interactivity.
|
||||
This method can safely be removed if the loader option is not enabled.
|
||||
*/
|
||||
|
||||
_loader: function(){
|
||||
if (this.options.loader === true)
|
||||
this.options.loader = {};
|
||||
var loader = new Element('div', {
|
||||
'class': this.classes.get('loader').substr(1),
|
||||
'morph': $merge(this.options.loader, {'link': 'cancel'})
|
||||
}).store('hidden', false).store('i', 1).inject(this.slideshow.retrieve('images'));
|
||||
if (this.options.loader.animate){
|
||||
for (var i = 0; i < this.options.loader.animate[1]; i++)
|
||||
img = new Asset.image(this.options.loader.animate[0].replace(/#/, i));
|
||||
if (Browser.Engine.trident4 && this.options.loader.animate[0].contains('png'))
|
||||
loader.setStyle('backgroundImage', 'none');
|
||||
}
|
||||
loader.set('events', {
|
||||
'animate': function(){
|
||||
var loader = this.slideshow.retrieve('loader');
|
||||
var i = (loader.retrieve('i').toInt() + 1) % this.options.loader.animate[1];
|
||||
loader.store('i', i);
|
||||
var img = this.options.loader.animate[0].replace(/#/, i);
|
||||
if (Browser.Engine.trident4 && this.options.loader.animate[0].contains('png'))
|
||||
loader.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + img + '", sizingMethod="scale")';
|
||||
else
|
||||
loader.setStyle('backgroundImage', 'url(' + img + ')');
|
||||
}.bind(this),
|
||||
'hide': function(){
|
||||
var loader = this.slideshow.retrieve('loader');
|
||||
if (!loader.retrieve('hidden')){
|
||||
loader.store('hidden', true).morph(this.classes.get('loader', 'hidden'));
|
||||
if (this.options.loader.animate)
|
||||
$clear(loader.retrieve('timer'));
|
||||
}
|
||||
}.bind(this),
|
||||
'show': function(){
|
||||
var loader = this.slideshow.retrieve('loader');
|
||||
if (loader.retrieve('hidden')){
|
||||
loader.store('hidden', false).morph(this.classes.get('loader', 'visible'));
|
||||
if (this.options.loader.animate)
|
||||
loader.store('timer', function(){this.fireEvent('animate');}.periodical(50, loader));
|
||||
}
|
||||
}.bind(this)
|
||||
});
|
||||
this.slideshow.retrieve('loader', loader).fireEvent('hide');
|
||||
},
|
||||
|
||||
/**
|
||||
Private method: thumbnails
|
||||
Builds the optional thumbnails element, adds interactivity.
|
||||
This method can safely be removed if the thumbnails option is not enabled.
|
||||
*/
|
||||
|
||||
_thumbnails: function(){
|
||||
if (this.options.thumbnails === true)
|
||||
this.options.thumbnails = {};
|
||||
var el = this.slideshow.getElement(this.classes.get('thumbnails'));
|
||||
var thumbnails = (el) ? el.empty() : new Element('div', {'class': this.classes.get('thumbnails').substr(1)}).inject(this.slideshow);
|
||||
thumbnails.setStyle('overflow', 'hidden');
|
||||
var ul = new Element('ul', {'tween': {'link': 'cancel'}}).inject(thumbnails);
|
||||
this.data.thumbnails.each(function(thumbnail, i){
|
||||
var li = new Element('li').inject(ul);
|
||||
var a = new Element('a', {
|
||||
'events': {
|
||||
'click': function(i){
|
||||
this.go(i);
|
||||
return false;
|
||||
}.pass(i, this),
|
||||
'loaded': function(){
|
||||
this.data.thumbnails.pop();
|
||||
if (!this.data.thumbnails.length){
|
||||
var div = thumbnails.getCoordinates();
|
||||
var props = thumbnails.retrieve('props');
|
||||
var limit = 0, pos = props[1], size = props[2];
|
||||
thumbnails.getElements('li').each(function(li){
|
||||
var li = li.getCoordinates();
|
||||
if (li[pos] > limit) limit = li[pos];
|
||||
}, this);
|
||||
thumbnails.store('limit', div[size] + div[props[0]] - limit);
|
||||
}
|
||||
}.bind(this)
|
||||
},
|
||||
'href': this.options.hu + this.data.images[i],
|
||||
'morph': $merge(this.options.thumbnails, {'link': 'cancel'})
|
||||
}).inject(li);
|
||||
if (this.data.captions[i] && this.options.titles)
|
||||
a.set('title', this.data.captions[i].replace(/<.+?>/gm, '').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, "'"));
|
||||
var img = new Asset.image(this.options.hu + thumbnail, {
|
||||
'onload': function(){this.fireEvent('loaded');}.bind(a)
|
||||
}).inject(a);
|
||||
}, this);
|
||||
thumbnails.set('events', {
|
||||
'scroll': function(n, fast){
|
||||
var div = this.getCoordinates();
|
||||
var ul = this.getElement('ul').getPosition();
|
||||
var props = this.retrieve('props');
|
||||
var axis = props[3], delta, pos = props[0], size = props[2], value;
|
||||
var tween = this.getElement('ul').get('tween', {'property': pos});
|
||||
if ($chk(n)){
|
||||
var li = this.getElements('li')[n].getCoordinates();
|
||||
delta = div[pos] + (div[size] / 2) - (li[size] / 2) - li[pos]
|
||||
value = (ul[axis] - div[pos] + delta).limit(this.retrieve('limit'), 0);
|
||||
if (fast)
|
||||
tween.set(value);
|
||||
else
|
||||
tween.start(value);
|
||||
}
|
||||
else{
|
||||
var area = div[props[2]] / 3, page = this.retrieve('page'), velocity = -0.2;
|
||||
if (page[axis] < (div[pos] + area))
|
||||
delta = (page[axis] - div[pos] - area) * velocity;
|
||||
else if (page[axis] > (div[pos] + div[size] - area))
|
||||
delta = (page[axis] - div[pos] - div[size] + area) * velocity;
|
||||
if (delta){
|
||||
value = (ul[axis] - div[pos] + delta).limit(this.retrieve('limit'), 0);
|
||||
tween.set(value);
|
||||
}
|
||||
}
|
||||
}.bind(thumbnails),
|
||||
'update': function(fast){
|
||||
var thumbnails = this.slideshow.retrieve('thumbnails');
|
||||
thumbnails.getElements('a').each(function(a, i){
|
||||
if (i == this.slide){
|
||||
if (!a.retrieve('active', false)){
|
||||
a.store('active', true);
|
||||
var active = this.classes.get('thumbnails', 'active');
|
||||
if (fast) a.get('morph').set(active);
|
||||
else a.morph(active);
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (a.retrieve('active', true)){
|
||||
a.store('active', false);
|
||||
var inactive = this.classes.get('thumbnails', 'inactive');
|
||||
if (fast) a.get('morph').set(inactive);
|
||||
else a.morph(inactive);
|
||||
}
|
||||
}
|
||||
}, this);
|
||||
if (!thumbnails.retrieve('mouseover'))
|
||||
thumbnails.fireEvent('scroll', [this.slide, fast]);
|
||||
}.bind(this)
|
||||
})
|
||||
var div = thumbnails.getCoordinates();
|
||||
thumbnails.store('props', (div.height > div.width) ? ['top', 'bottom', 'height', 'y'] : ['left', 'right', 'width', 'x']);
|
||||
var mousemove = function(e){
|
||||
var div = this.getCoordinates();
|
||||
if (e.page.x > div.left && e.page.x < div.right && e.page.y > div.top && e.page.y < div.bottom){
|
||||
this.store('page', e.page);
|
||||
if (!this.retrieve('mouseover')){
|
||||
this.store('mouseover', true);
|
||||
this.store('timer', function(){this.fireEvent('scroll');}.periodical(50, this));
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (this.retrieve('mouseover')){
|
||||
this.store('mouseover', false);
|
||||
$clear(this.retrieve('timer'));
|
||||
}
|
||||
}
|
||||
}.bind(thumbnails);
|
||||
this.events.mousemove.push(mousemove);
|
||||
document.addEvent('mousemove', mousemove);
|
||||
this.slideshow.store('thumbnails', thumbnails);
|
||||
}
|
||||
});
|
||||
96
src/slideshow/js/slideshow.kenburns.js
Normal file
96
src/slideshow/js/slideshow.kenburns.js
Normal file
@ -0,0 +1,96 @@
|
||||
/**
|
||||
Script: Slideshow.KenBurns.js
|
||||
Slideshow.KenBurns - KenBurns extension for Slideshow, includes zooming and panning effects.
|
||||
|
||||
License:
|
||||
MIT-style license.
|
||||
|
||||
Copyright:
|
||||
Copyright (c) 2008 [Aeron Glemann](http://www.electricprism.com/aeron/).
|
||||
|
||||
Dependencies:
|
||||
Slideshow.
|
||||
*/
|
||||
|
||||
Slideshow.KenBurns = new Class({
|
||||
Extends: Slideshow,
|
||||
|
||||
options: {
|
||||
pan: [100, 100],
|
||||
zoom: [50, 50]
|
||||
},
|
||||
|
||||
/**
|
||||
Constructor: initialize
|
||||
Creates an instance of the Slideshow class.
|
||||
|
||||
Arguments:
|
||||
element - (element) The wrapper element.
|
||||
data - (array or object) The images and optional thumbnails, captions and links for the show.
|
||||
options - (object) The options below.
|
||||
|
||||
Syntax:
|
||||
var myShow = new Slideshow.KenBurns(element, data, options);
|
||||
*/
|
||||
|
||||
initialize: function(el, data, options){
|
||||
options.overlap = true;
|
||||
options.resize = true;
|
||||
['pan', 'zoom'].each(function(p){
|
||||
if ($chk(this[p])){
|
||||
if ($type(this[p]) != 'array') this[p] = [this[p], this[p]];
|
||||
this[p].map(function(n){return (n.toInt() || 0).limit(0, 100);});
|
||||
}
|
||||
}, options);
|
||||
this.parent(el, data, options);
|
||||
},
|
||||
|
||||
/**
|
||||
Private method: show
|
||||
Does the slideshow effect.
|
||||
*/
|
||||
|
||||
_show: function(fast){
|
||||
if (!this.image.retrieve('morph')){
|
||||
['a', 'b'].each(function(image){
|
||||
this[image].set('tween', {
|
||||
'duration': this.options.duration, 'link': 'cancel', 'onStart': this._start.bind(this), 'onComplete': this._complete.bind(this), 'property': 'opacity'}
|
||||
).get('morph', {
|
||||
'duration': (this.options.delay + this.options.duration * 2), 'link': 'cancel', 'transition': $arguments(0)}
|
||||
);
|
||||
}, this);
|
||||
}
|
||||
this.image.set('styles', {'bottom': 'auto', 'left': 'auto', 'right': 'auto', 'top': 'auto'});
|
||||
var props = ['top left', 'top right', 'bottom left', 'bottom right'][this.counter % 4].split(' ');
|
||||
props.each(function(prop){this.image.setStyle(prop, 0);}, this);
|
||||
dh = this.height / this.preloader.height;
|
||||
dw = this.width / this.preloader.width;
|
||||
delta = (dw > dh) ? dw : dh;
|
||||
var values = {};
|
||||
var zoom = ($random.run(this.options.zoom) / 100.0) + 1;
|
||||
var pan = Math.abs(($random.run(this.options.pan) / 100.0) - 1);
|
||||
['height', 'width'].each(function(prop, i){
|
||||
var e = Math.ceil(this.preloader[prop] * delta);
|
||||
var s = (e * zoom).toInt();
|
||||
values[prop] = [s, e];
|
||||
if (dw > dh || i){
|
||||
e = (this[prop] - this.image[prop]);
|
||||
s = (e * pan).toInt();
|
||||
values[props[i]] = [s, e];
|
||||
}
|
||||
}, this);
|
||||
var paused = (this.firstrun && this.options.paused);
|
||||
if (fast || paused){
|
||||
this._center(this.image);
|
||||
this.image.get('morph').cancel();
|
||||
if (paused)
|
||||
this.image.get('tween').cancel().set(0).start(1);
|
||||
else
|
||||
this.image.get('tween').cancel().set(1);
|
||||
}
|
||||
else{
|
||||
this.image.get('morph').start(values);
|
||||
this.image.get('tween').set(0).start(1);
|
||||
}
|
||||
}
|
||||
});
|
||||
63
src/slideshow/js/slideshow.push.js
Normal file
63
src/slideshow/js/slideshow.push.js
Normal file
@ -0,0 +1,63 @@
|
||||
/**
|
||||
Script: Slideshow.Push.js
|
||||
Slideshow.Push - Push extension for Slideshow.
|
||||
|
||||
License:
|
||||
MIT-style license.
|
||||
|
||||
Copyright:
|
||||
Copyright (c) 2008 [Aeron Glemann](http://www.electricprism.com/aeron/).
|
||||
|
||||
Dependencies:
|
||||
Slideshow.
|
||||
Mootools 1.2 More: Fx.Elements.
|
||||
*/
|
||||
|
||||
Slideshow.Push = new Class({
|
||||
Extends: Slideshow,
|
||||
|
||||
/**
|
||||
Constructor: initialize
|
||||
Creates an instance of the Slideshow class.
|
||||
|
||||
Arguments:
|
||||
element - (element) The wrapper element.
|
||||
data - (array or object) The images and optional thumbnails, captions and links for the show.
|
||||
options - (object) The options below.
|
||||
|
||||
Syntax:
|
||||
var myShow = new Slideshow.Push(element, data, options);
|
||||
*/
|
||||
|
||||
initialize: function(el, data, options){
|
||||
options.overlap = true;
|
||||
this.parent(el, data, options);
|
||||
},
|
||||
|
||||
/**
|
||||
Private method: show
|
||||
Does the slideshow effect.
|
||||
*/
|
||||
|
||||
_show: function(fast){
|
||||
var images = [this.image, ((this.counter % 2) ? this.a : this.b)];
|
||||
if (!this.image.retrieve('fx'))
|
||||
this.image.store('fx', new Fx.Elements(images, {'duration': this.options.duration, 'link': 'cancel', 'onStart': this._start.bind(this), 'onComplete': this._complete.bind(this), 'transition': this.options.transition }));
|
||||
this.image.set('styles', {'left': 'auto', 'right': 'auto' }).setStyle(this.direction, this.width);
|
||||
var values = {'0': {}, '1': {} };
|
||||
values['0'][this.direction] = [this.width, 0];
|
||||
values['1'][this.direction] = [0, -this.width];
|
||||
if (images[1].getStyle(this.direction) == 'auto'){
|
||||
var width = this.width - images[1].width;
|
||||
images[1].set('styles', {'left': 'auto', 'right': 'auto' }).setStyle(this.direction, width);
|
||||
values['1'][this.direction] = [width, -this.width];
|
||||
}
|
||||
if (fast){
|
||||
for (var prop in values)
|
||||
values[prop][this.direction] = values[prop][this.direction][1];
|
||||
this.image.retrieve('fx').cancel().set(values);
|
||||
}
|
||||
else
|
||||
this.image.retrieve('fx').start(values);
|
||||
}
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user