mirror of
https://github.com/medialab-prado/poblados-colonizacion-colonias-penitenciarias.git
synced 2024-12-27 04:51:22 +01:00
sliders
This commit is contained in:
abe-
parent
41de5f1d41
commit
1fa5e96cc3
66 changed files with 12 additions and 6888 deletions
4
docs/_includes/_barcenas.html
Normal file
4
docs/_includes/_barcenas.html
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
<div class="video-container">
|
||||||
|
<iframe src="../sliders/bardenas.html" height="1024" width="382" allowfullscreen="" frameborder="0">
|
||||||
|
</iframe>
|
||||||
|
</div>
|
||||||
4
docs/_includes/_sotogordo.html
Normal file
4
docs/_includes/_sotogordo.html
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
<div class="video-container">
|
||||||
|
<iframe src="../sliders/sotogordo.html" height="1024" width="382" allowfullscreen="" frameborder="0">
|
||||||
|
</iframe>
|
||||||
|
</div>
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 454 B |
|
|
@ -1,13 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>
|
|
||||||
<script src="grafica-0.1.0-mod.js"></script>
|
|
||||||
<script src="expropiacion.js"></script>
|
|
||||||
<link rel="stylesheet" type="text/css" href="style.css">
|
|
||||||
<style> body {padding: 0; margin: 0;} </style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,64 +0,0 @@
|
||||||
var exceso, reserva, exceptuadas;
|
|
||||||
var nombres;
|
|
||||||
var plot;
|
|
||||||
|
|
||||||
function setup() {
|
|
||||||
createCanvas(800,519);
|
|
||||||
nombres = new Array("Norte","Duero","Ebro","Pirineo","Jucar","Tajo","Guadiana","Guadalquivir","Sur", "Segura", "Islas");
|
|
||||||
exceso = new Array(15267,35628,136465,3466,19615,64179,81809,148193,13326,35075,3235);
|
|
||||||
reserva = new Array(12251,62730,131128,24433,54545,68854,82052,140453,20980,131042,5985);
|
|
||||||
exceptuadas = new Array(7094,31194,128457,3289,15734,39460,21419,68830,23782,68386,15675);
|
|
||||||
|
|
||||||
var pointSizes = [];
|
|
||||||
var points = [];
|
|
||||||
|
|
||||||
for (var n = 0; n < nombres.length; n++) {
|
|
||||||
points[n] = new GPoint(exceso[n], exceptuadas[n], nombres[n]);
|
|
||||||
pointSizes[n] = map(reserva[n],5000,141000,5,100);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Creamos el plot
|
|
||||||
plot = new GPlot(this);
|
|
||||||
plot.setDim(width-230, height-100);
|
|
||||||
plot.setTitleText("Tierras en exceso, reserva y exceptuadas por cuenca hidrografica segun PGC");
|
|
||||||
plot.getXAxis().setAxisLabelText("Tierras en exceso (Has)");
|
|
||||||
plot.getYAxis().setAxisLabelText("Tierras exceptuadas (Has)");
|
|
||||||
plot.setPoints(points);
|
|
||||||
plot.setPointSizes(pointSizes);
|
|
||||||
plot.setPointColor(color(255,0,0,50));
|
|
||||||
plot.setLineColor(color(0));
|
|
||||||
plot.setLabelBgColor(color(255,0));
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function draw() {
|
|
||||||
background(255);
|
|
||||||
|
|
||||||
// Draw the plot
|
|
||||||
plot.beginDraw();
|
|
||||||
plot.drawBox();
|
|
||||||
plot.drawXAxis();
|
|
||||||
plot.drawYAxis();
|
|
||||||
plot.drawTitle();
|
|
||||||
plot.drawGridLines(GPlot.BOTH);
|
|
||||||
plot.drawPoints();
|
|
||||||
plot.drawLabels();
|
|
||||||
plot.drawAllLabels();
|
|
||||||
plot.endDraw();
|
|
||||||
|
|
||||||
textFont("Helvetica");
|
|
||||||
textSize(11);
|
|
||||||
fill(0);
|
|
||||||
textAlign(LEFT);
|
|
||||||
text("Tierras en reserva (Has)", 660, 330);
|
|
||||||
textAlign(CENTER);
|
|
||||||
stroke(100);
|
|
||||||
noFill();
|
|
||||||
ellipse(720, 390, 100, 100);
|
|
||||||
fill(0);
|
|
||||||
text("140000", 720, 390);
|
|
||||||
noFill();
|
|
||||||
ellipse(720, 455, 10, 10);
|
|
||||||
fill(0);
|
|
||||||
text("14000", 720, 475);
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load diff
File diff suppressed because one or more lines are too long
5
docs/_includes/graficos/grafica-0.1.0.min.js
vendored
5
docs/_includes/graficos/grafica-0.1.0.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,12 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>
|
|
||||||
<script src="hidraulicas.js"></script>
|
|
||||||
<link rel="stylesheet" type="text/css" href="style.css">
|
|
||||||
<style> body {padding: 0; margin: 0;} </style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,112 +0,0 @@
|
||||||
var cuencas, cmap;
|
|
||||||
var nombres,colores,x,y;
|
|
||||||
var canales, acequias;
|
|
||||||
var totCanales = 0,totAcequias = 0;
|
|
||||||
var cuenta = 0, last;
|
|
||||||
|
|
||||||
function setup() {
|
|
||||||
createCanvas(800,519);
|
|
||||||
cuencas = loadImage("data/cuencas.png");
|
|
||||||
cmap = loadImage("data/cmap-cuencas.png");
|
|
||||||
nombres = new Array("Norte","Duero","Ebro","Pirineo","Jucar","Tajo","Guadiana","Guadalquivir","Sur", "Segura", "Baleares y Canarias");
|
|
||||||
colores = new Array("#f00","#0f0","#00f","#ff0","#0ff","#a00","#0a0","#00a","#aa0","#0aa", "#aaa");
|
|
||||||
canales = new Array(157.3,1422.1,810, 132.5,525.7,764.9,360.5,1111.7,266.7,85.7,-1);
|
|
||||||
acequias= new Array(448.1,2215.3,1872.7,258.7,2378,1356.7,1210.5,1215.7,191.7,2004.1,-1);
|
|
||||||
x = new Array(158,243, 449, 597, 432, 308, 236, 263, 362,412, 601);
|
|
||||||
y = new Array(77,158,140, 139,278, 253, 327, 393, 441,368, 322);
|
|
||||||
|
|
||||||
for (var n = 0; n < nombres.length; n++) {
|
|
||||||
if (canales[n] != -1) totCanales = totCanales + canales[n];
|
|
||||||
if (acequias[n] != -1) totAcequias = totAcequias + acequias[n];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function draw() {
|
|
||||||
background(200,225,225);
|
|
||||||
image(cuencas,0,0);
|
|
||||||
|
|
||||||
var mc = cmap.get(mouseX,mouseY);
|
|
||||||
var over = [];
|
|
||||||
for (var n = 0; n < colores.length; n++) {
|
|
||||||
over[n] = compara(mc,color(colores[n]));
|
|
||||||
}
|
|
||||||
|
|
||||||
for (var n = 0; n < colores.length; n++) {
|
|
||||||
if (over[n]) {
|
|
||||||
fill(0);
|
|
||||||
textStyle(NORMAL);
|
|
||||||
if (canales[n] != -1) {
|
|
||||||
text("Canales: " + canales[n] + " Km", x[n], y[n]+5);
|
|
||||||
text("Acequias: " + acequias[n] + " Km", x[n], y[n]+20);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
textSize(10);
|
|
||||||
text("(Sin datos)", x[n], y[n]+5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// nombres
|
|
||||||
textStyle(BOLD);
|
|
||||||
textSize(14);
|
|
||||||
for (var n = 0; n < nombres.length; n++) {
|
|
||||||
var nbr = String.toUpperCase(nombres[n]);
|
|
||||||
fill(255);
|
|
||||||
noStroke();
|
|
||||||
fill(0);
|
|
||||||
text(nbr, x[n], y[n]-10);
|
|
||||||
}
|
|
||||||
|
|
||||||
cuenta = cuenta + 0.5;
|
|
||||||
|
|
||||||
// Canales
|
|
||||||
for (var n = 0; n < nombres.length; n++) {
|
|
||||||
if (!over[n]) {
|
|
||||||
if (canales[n] == -1) {
|
|
||||||
textSize(10);
|
|
||||||
fill(0);
|
|
||||||
text("(Sin datos)", x[n], y[n]+5);
|
|
||||||
}
|
|
||||||
var pct = map(canales[n]/totCanales,0,1,0,50);
|
|
||||||
for (var i = 0; i < min(cuenta,pct); i++) {
|
|
||||||
var xi = x[n] + 10*i;
|
|
||||||
stroke(0);
|
|
||||||
line(xi+3, y[n]-4,xi+10+3,y[n]-4);
|
|
||||||
noStroke();
|
|
||||||
fill(0);
|
|
||||||
quad(xi+10+4,y[n]-4,xi+10+4,y[n]-4+7, xi+10,y[n]+7, xi+10,y[n]);
|
|
||||||
fill(0,255,255);
|
|
||||||
quad(xi+3, y[n]-3,xi+10+3,y[n]-3,xi+10,y[n],xi, y[n]);
|
|
||||||
noStroke();
|
|
||||||
fill(0);
|
|
||||||
rect(xi, y[n],10,7)
|
|
||||||
fill(255);
|
|
||||||
arc(xi+5,y[n]+7,7,8,PI,TWO_PI);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Acequias
|
|
||||||
for (var n = 0; n < nombres.length; n++) {
|
|
||||||
if (!over[n]) {
|
|
||||||
pct = map(acequias[n]/totAcequias,0,1,0,50);
|
|
||||||
for (var i = 0; i < min(cuenta,pct); i++) {
|
|
||||||
var xi = x[n] + 10*i;
|
|
||||||
stroke(0);
|
|
||||||
line(xi, y[n]+15,xi+10,y[n]+15);
|
|
||||||
line(xi+3, y[n]+15-3,xi+10+3,y[n]+15-3);
|
|
||||||
noStroke();
|
|
||||||
fill(0);
|
|
||||||
quad(xi+10+4,y[n]+15-3, xi+10+4,y[n]+15+4-3-1, xi+10, y[n]+15+4, xi+10, y[n]+15);
|
|
||||||
fill(0,255,255);
|
|
||||||
quad(xi+3, y[n]+15-2,xi+10+3,y[n]+15-2, xi+10,y[n]+15,xi, y[n]+15);
|
|
||||||
fill(0);
|
|
||||||
rect(xi, y[n]+15, 10, 4);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function compara(c1, c2) {
|
|
||||||
return red(c1) == red(c2) && green(c1) == green(c2) && blue(c1) == blue(c2);
|
|
||||||
}
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>
|
|
||||||
<script src="mecanizacion.js"></script>
|
|
||||||
<link rel="stylesheet" type="text/css" href="style.css">
|
|
||||||
<style> body {padding: 0; margin: 0;} </style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,101 +0,0 @@
|
||||||
var cuencas, cmap;
|
|
||||||
var nombres,colores,x,y;
|
|
||||||
var tractores, cosechadoras;
|
|
||||||
var totTractores = 0,totCosechadoras = 0;
|
|
||||||
var cuenta = 0, last;
|
|
||||||
var imgTractor,imgCosechadora;
|
|
||||||
|
|
||||||
function setup() {
|
|
||||||
createCanvas(800,519);
|
|
||||||
cuencas = loadImage("data/cuencas.png");
|
|
||||||
cmap = loadImage("data/cmap-cuencas.png");
|
|
||||||
imgTractor = loadImage("data/tractor_792349_cc_p.png");
|
|
||||||
imgCosechadora = loadImage("data/harvester_1046427_cc_p.png");
|
|
||||||
nombres = new Array("Norte","Duero","Ebro","Pirineo","Jucar","Tajo","Guadiana","Guadalquivir","Sur", "Segura", "Baleares y Canarias");
|
|
||||||
colores = new Array("#f00","#0f0","#00f","#ff0","#0ff","#a00","#0a0","#00a","#aa0","#0aa", "#aaa");
|
|
||||||
tractores = new Array(31.5,32.8,81.4,-1,128.5,37.6,59.1,30.6,11.2,34.6,-1);
|
|
||||||
cosechadoras= new Array(0,1.2,2.8,-1,5,0.6,0.9,2.6,0.2,0.5,-1);
|
|
||||||
|
|
||||||
x = new Array(128,233, 409, 597, 392, 248, 206, 217, 362,402, 651);
|
|
||||||
y = new Array(77,128,110, 139,248, 243, 307, 390, 431,368, 322);
|
|
||||||
|
|
||||||
for (var n = 0; n < nombres.length; n++) {
|
|
||||||
if (tractores[n] != -1) totTractores = totTractores + tractores[n];
|
|
||||||
if (cosechadoras[n] != -1) totCosechadoras = totCosechadoras + cosechadoras[n];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function draw() {
|
|
||||||
background(200,225,225);
|
|
||||||
image(cuencas,0,0);
|
|
||||||
|
|
||||||
|
|
||||||
var mc = cmap.get(mouseX,mouseY);
|
|
||||||
var over = [];
|
|
||||||
for (var n = 0; n < colores.length; n++) {
|
|
||||||
over[n] = compara(mc,color(colores[n]));
|
|
||||||
}
|
|
||||||
|
|
||||||
for (var n = 0; n < colores.length; n++) {
|
|
||||||
if (over[n]) {
|
|
||||||
fill(0);
|
|
||||||
textStyle(NORMAL);
|
|
||||||
if (tractores[n] != -1) {
|
|
||||||
text("Tractores: " + tractores[n], x[n], y[n]+10);
|
|
||||||
text("Cosechadoras: " + cosechadoras[n], x[n], y[n]+25);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
textSize(10);
|
|
||||||
text("(Sin datos)", x[n], y[n]+5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
cuenta = cuenta + 0.5;
|
|
||||||
|
|
||||||
// Cosechadoras
|
|
||||||
var mpct = [];
|
|
||||||
for (var n = 0; n < nombres.length; n++) {
|
|
||||||
if (!over[n]) {
|
|
||||||
pct = map(cosechadoras[n]/totCosechadoras,0,1,0,40);
|
|
||||||
mpct[n] = floor(pct)+1;
|
|
||||||
for (var i = 0; i < min(cuenta,pct); i++) {
|
|
||||||
var xi = x[n] + 20*(i%4);
|
|
||||||
var yi = y[n] + floor(i/4)*20;
|
|
||||||
image(imgCosechadora,xi,yi,20,20);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Tractores
|
|
||||||
for (var n = 0; n < nombres.length; n++) {
|
|
||||||
if (!over[n]) {
|
|
||||||
if (tractores[n] == -1) {
|
|
||||||
textSize(10);
|
|
||||||
textStyle(NORMAL);
|
|
||||||
fill(0);
|
|
||||||
text("(Sin datos)", x[n], y[n]+5);
|
|
||||||
}
|
|
||||||
var pct = map(tractores[n]/totTractores,0,1,0,40);
|
|
||||||
for (var i = 0; i < min(cuenta,pct); i++) {
|
|
||||||
var xi = x[n] + 20*(i%4) + min(4,mpct[n])*20;
|
|
||||||
var yi = y[n] + floor(i/4)*20;
|
|
||||||
image(imgTractor,xi,yi,18,18);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// nombres
|
|
||||||
textStyle(BOLD);
|
|
||||||
textSize(14);
|
|
||||||
for (var n = 0; n < nombres.length; n++) {
|
|
||||||
var nbr = nombres[n];
|
|
||||||
fill(0);
|
|
||||||
text(nbr, x[n], y[n]-7);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function compara(c1, c2) {
|
|
||||||
return red(c1) == red(c2) && green(c1) == green(c2) && blue(c1) == blue(c2);
|
|
||||||
}
|
|
||||||
|
|
@ -1,94 +0,0 @@
|
||||||
var cuencas, cmap;
|
|
||||||
var ids,nombres,colores,x,y;
|
|
||||||
var capas,imgs;
|
|
||||||
var dim;
|
|
||||||
|
|
||||||
function preload() {
|
|
||||||
ids = new Array("norte","duero","ebro","pirineo","jucar","tajo","guadiana","guadalquivir","sur","segura","baleares");
|
|
||||||
imgs = new Array();
|
|
||||||
for (var n = 0; n < ids.length; n++) {
|
|
||||||
imgs[n] = loadImage("data/"+ids[n]+".png");
|
|
||||||
}
|
|
||||||
cuencas = loadImage("data/cuencas.png");
|
|
||||||
cmap = loadImage("data/cmap-cuencas.png");
|
|
||||||
}
|
|
||||||
|
|
||||||
function setup() {
|
|
||||||
createCanvas(800,519);
|
|
||||||
nombres = new Array("Norte","Duero","Ebro","Pirineo","Jucar","Tajo","Guadiana","Guadalquivir","Sur", "Segura", "Baleares y Canarias");
|
|
||||||
colores = new Array("#f00","#0f0","#00f","#ff0","#0ff","#a00","#0a0","#00a","#aa0","#0aa", "#aaa");
|
|
||||||
x = new Array(158,243, 449, 597, 432, 308, 236, 263, 362,432, 651);
|
|
||||||
y = new Array(77,158,140, 139,278, 253, 327, 393, 441,368, 322);
|
|
||||||
dim = new Array(11,8.4,11,-1,6,7.5,8.6,5.3,5.9,6.6,-1);
|
|
||||||
capas = new Array();
|
|
||||||
for (var n = 0; n < ids.length; n++) {
|
|
||||||
capas[n] = createImage(width,height);
|
|
||||||
capas[n].loadPixels();
|
|
||||||
|
|
||||||
if (dim[n] != -1) {
|
|
||||||
var paso = map(dim[n],0, 15, 2, 20);
|
|
||||||
|
|
||||||
colorMode(HSB,360,255,255);
|
|
||||||
var h = random(70,130);
|
|
||||||
var numi = floor(width/paso)+1;
|
|
||||||
var numj = floor(height/paso)+1;
|
|
||||||
var c = [];
|
|
||||||
for (var i = 0; i < numi; i++) {
|
|
||||||
c[i] = [];
|
|
||||||
for (var j = 0; j < numj; j++) {
|
|
||||||
var s = random(100,200);
|
|
||||||
c[i][j] = color(h, s, random(150,200) );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
colorMode(RGB,255,255,255);
|
|
||||||
for (var i = 0; i < width; i++) {
|
|
||||||
var pasoi = floor(i/paso);
|
|
||||||
for (var j = 0; j < height; j++) {
|
|
||||||
var pasoj = floor(j/paso);
|
|
||||||
capas[n].set(i,j,c[pasoi][pasoj]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
capas[n].updatePixels();
|
|
||||||
capas[n].mask(imgs[n]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function draw() {
|
|
||||||
background(200,225,225);
|
|
||||||
|
|
||||||
// capas
|
|
||||||
for (var n = 0; n < ids.length; n++) {
|
|
||||||
tint(200,180,130);
|
|
||||||
image(imgs[n],0,0);
|
|
||||||
tint(255,min(frameCount*40,255));
|
|
||||||
if (dim[n] != -1) image(capas[n],0,0);
|
|
||||||
else text("(Sin datos)", x[n], y[n]+5);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Mas datos
|
|
||||||
var mc = cmap.get(mouseX,mouseY);
|
|
||||||
for (var n = 0; n < colores.length; n++) {
|
|
||||||
if (compara(mc,color(colores[n]))) {
|
|
||||||
noTint();
|
|
||||||
image(imgs[n],0,0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// nombres
|
|
||||||
textSize(14);
|
|
||||||
for (var n = 0; n < nombres.length; n++) {
|
|
||||||
var nbr = nombres[n];
|
|
||||||
fill(255);
|
|
||||||
noStroke();
|
|
||||||
fill(0);
|
|
||||||
text(nbr, x[n], y[n]-10);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function compara(c1, c2) {
|
|
||||||
return red(c1) == red(c2) && green(c1) == green(c2) && blue(c1) == blue(c2);
|
|
||||||
}
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>
|
|
||||||
<script src="parcelas.js"></script>
|
|
||||||
<link rel="stylesheet" type="text/css" href="style.css">
|
|
||||||
<style> body {padding: 0; margin: 0;} </style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,78 +0,0 @@
|
||||||
var cuencas, cmap;
|
|
||||||
var ids,nombres,colores,x,y;
|
|
||||||
var capas,capaspg,imgs;
|
|
||||||
var dim, dimr;
|
|
||||||
|
|
||||||
function preload() {
|
|
||||||
ids = new Array("norte","duero","ebro","pirineo","jucar","tajo","guadiana","guadalquivir","sur","segura","baleares");
|
|
||||||
dimr = new Array(11,8.4,11,-1,6,7.5,8.6,5.3,5.9,6.6,-1);
|
|
||||||
dim = new Array(12,10,14.2,8,7.6,8,7.6,10,4.7,10,11);
|
|
||||||
imgs = new Array();
|
|
||||||
capas = new Array();
|
|
||||||
capaspg = new Array();
|
|
||||||
for (var n = 0; n < ids.length; n++) {
|
|
||||||
imgs[n] = loadImage("data/"+ids[n]+".png");
|
|
||||||
capaspg[n] = loadImage("data/capa-PGC-"+n+".png");
|
|
||||||
if (dim[n] != -1) {
|
|
||||||
capas[n] = loadImage("data/capa-"+n+".png");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
cuencas = loadImage("data/cuencas.png");
|
|
||||||
cmap = loadImage("data/cmap-cuencas.png");
|
|
||||||
}
|
|
||||||
|
|
||||||
function setup() {
|
|
||||||
createCanvas(800,519);
|
|
||||||
nombres = new Array("Norte","Duero","Ebro","Pirineo","Jucar","Tajo","Guadiana","Guadalquivir","Sur", "Segura", "Baleares y Canarias");
|
|
||||||
colores = new Array("#f00","#0f0","#00f","#ff0","#0ff","#a00","#0a0","#00a","#aa0","#0aa", "#aaa");
|
|
||||||
x = new Array(158,243, 429, 597, 432, 268, 226, 253, 362,432, 611);
|
|
||||||
y = new Array(77,158,140, 139,278, 263, 327, 393, 441, 368, 322);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function draw() {
|
|
||||||
background(200,225,225);
|
|
||||||
|
|
||||||
// capas
|
|
||||||
for (var n = 0; n < ids.length; n++) {
|
|
||||||
if (dimr[n] != -1) image(capas[n],0,0);
|
|
||||||
else {
|
|
||||||
image(imgs[n],0,0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Parcelas segun PGC
|
|
||||||
var mc = cmap.get(mouseX,mouseY);
|
|
||||||
for (var n = 0; n < colores.length; n++) {
|
|
||||||
if (compara(mc,color(colores[n]))) {
|
|
||||||
tint(255,100);
|
|
||||||
image(capaspg[n],0,0);
|
|
||||||
noTint();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// nombres
|
|
||||||
textSize(14);
|
|
||||||
for (var n = 0; n < nombres.length; n++) {
|
|
||||||
var nbr = String.toUpperCase(nombres[n]);
|
|
||||||
if (dimr[n] != -1 || !compara(mc,color(colores[n]))) fill(0);
|
|
||||||
else fill(0);
|
|
||||||
textStyle(BOLD);
|
|
||||||
text(nbr, x[n], y[n]-10);
|
|
||||||
textStyle(NORMAL);
|
|
||||||
if (compara(mc,color(colores[n]))) {
|
|
||||||
text("Plan inicial: " + dim[n]+" Has", x[n], y[n]+5);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
if (dimr[n] != -1) text("Parcela media: " + dimr[n]+" Has", x[n], y[n]+5);
|
|
||||||
else text("(Sin datos)", x[n], y[n]+5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function compara(c1, c2) {
|
|
||||||
return red(c1) == red(c2) && green(c1) == green(c2) && blue(c1) == blue(c2);
|
|
||||||
}
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
<script src="js/jquery.min.js"></script>
|
|
||||||
<script src="js/jquery.event.move.js"></script>
|
|
||||||
<script src="js/jquery.twentytwenty.js"></script>
|
|
||||||
<link rel="stylesheet" href="css/twentytwenty.css" type="text/css" media="screen" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="container1" class="twentytwenty-container">
|
|
||||||
<img src="images/bardenas-caudillo-1956.jpeg">
|
|
||||||
<img src="images/bardenas-caudillo-2014.jpeg">
|
|
||||||
</div>
|
|
||||||
<script>
|
|
||||||
$(window).on("load",function(){
|
|
||||||
$("#container1").twentytwenty();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
4
docs/_includes/sliders/jquery-3.2.1.min.js
vendored
4
docs/_includes/sliders/jquery-3.2.1.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,15 +0,0 @@
|
||||||
<script src="js/jquery.min.js"></script>
|
|
||||||
<script src="js/jquery.event.move.js"></script>
|
|
||||||
<script src="js/jquery.twentytwenty.js"></script>
|
|
||||||
<link rel="stylesheet" href="css/twentytwenty.css" type="text/css" media="screen" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="container1" class="twentytwenty-container">
|
|
||||||
<img src="images/sotogordo-1945-recorte.jpeg">
|
|
||||||
<img src="images/sotogordo-2016-recorte.jpeg">
|
|
||||||
</div>
|
|
||||||
<script>
|
|
||||||
$(window).on("load",function(){
|
|
||||||
$("#container1").twentytwenty();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 128 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 161 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 163 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 186 KiB |
|
|
@ -1,584 +0,0 @@
|
||||||
// DOM.event.move
|
|
||||||
//
|
|
||||||
// 2.0.0
|
|
||||||
//
|
|
||||||
// Stephen Band
|
|
||||||
//
|
|
||||||
// Triggers 'movestart', 'move' and 'moveend' events after
|
|
||||||
// mousemoves following a mousedown cross a distance threshold,
|
|
||||||
// similar to the native 'dragstart', 'drag' and 'dragend' events.
|
|
||||||
// Move events are throttled to animation frames. Move event objects
|
|
||||||
// have the properties:
|
|
||||||
//
|
|
||||||
// pageX:
|
|
||||||
// pageY: Page coordinates of pointer.
|
|
||||||
// startX:
|
|
||||||
// startY: Page coordinates of pointer at movestart.
|
|
||||||
// distX:
|
|
||||||
// distY: Distance the pointer has moved since movestart.
|
|
||||||
// deltaX:
|
|
||||||
// deltaY: Distance the finger has moved since last event.
|
|
||||||
// velocityX:
|
|
||||||
// velocityY: Average velocity over last few events.
|
|
||||||
|
|
||||||
|
|
||||||
(function(fn) {
|
|
||||||
if (typeof define === 'function' && define.amd) {
|
|
||||||
define([], fn);
|
|
||||||
} else if ((typeof module !== "undefined" && module !== null) && module.exports) {
|
|
||||||
module.exports = fn;
|
|
||||||
} else {
|
|
||||||
fn();
|
|
||||||
}
|
|
||||||
})(function(){
|
|
||||||
var assign = Object.assign || window.jQuery && jQuery.extend;
|
|
||||||
|
|
||||||
// Number of pixels a pressed pointer travels before movestart
|
|
||||||
// event is fired.
|
|
||||||
var threshold = 8;
|
|
||||||
|
|
||||||
// Shim for requestAnimationFrame, falling back to timer. See:
|
|
||||||
// see http://paulirish.com/2011/requestanimationframe-for-smart-animating/
|
|
||||||
var requestFrame = (function(){
|
|
||||||
return (
|
|
||||||
window.requestAnimationFrame ||
|
|
||||||
window.webkitRequestAnimationFrame ||
|
|
||||||
window.mozRequestAnimationFrame ||
|
|
||||||
window.oRequestAnimationFrame ||
|
|
||||||
window.msRequestAnimationFrame ||
|
|
||||||
function(fn, element){
|
|
||||||
return window.setTimeout(function(){
|
|
||||||
fn();
|
|
||||||
}, 25);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
})();
|
|
||||||
|
|
||||||
var ignoreTags = {
|
|
||||||
textarea: true,
|
|
||||||
input: true,
|
|
||||||
select: true,
|
|
||||||
button: true
|
|
||||||
};
|
|
||||||
|
|
||||||
var mouseevents = {
|
|
||||||
move: 'mousemove',
|
|
||||||
cancel: 'mouseup dragstart',
|
|
||||||
end: 'mouseup'
|
|
||||||
};
|
|
||||||
|
|
||||||
var touchevents = {
|
|
||||||
move: 'touchmove',
|
|
||||||
cancel: 'touchend',
|
|
||||||
end: 'touchend'
|
|
||||||
};
|
|
||||||
|
|
||||||
var rspaces = /\s+/;
|
|
||||||
|
|
||||||
|
|
||||||
// DOM Events
|
|
||||||
|
|
||||||
var eventOptions = { bubbles: true, cancelable: true };
|
|
||||||
|
|
||||||
var eventsSymbol = Symbol('events');
|
|
||||||
|
|
||||||
function createEvent(type) {
|
|
||||||
return new CustomEvent(type, eventOptions);
|
|
||||||
}
|
|
||||||
|
|
||||||
function getEvents(node) {
|
|
||||||
return node[eventsSymbol] || (node[eventsSymbol] = {});
|
|
||||||
}
|
|
||||||
|
|
||||||
function on(node, types, fn, data, selector) {
|
|
||||||
types = types.split(rspaces);
|
|
||||||
|
|
||||||
var events = getEvents(node);
|
|
||||||
var i = types.length;
|
|
||||||
var handlers, type;
|
|
||||||
|
|
||||||
function handler(e) { fn(e, data); }
|
|
||||||
|
|
||||||
while (i--) {
|
|
||||||
type = types[i];
|
|
||||||
handlers = events[type] || (events[type] = []);
|
|
||||||
handlers.push([fn, handler]);
|
|
||||||
node.addEventListener(type, handler);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function off(node, types, fn, selector) {
|
|
||||||
types = types.split(rspaces);
|
|
||||||
|
|
||||||
var events = getEvents(node);
|
|
||||||
var i = types.length;
|
|
||||||
var type, handlers, k;
|
|
||||||
|
|
||||||
if (!events) { return; }
|
|
||||||
|
|
||||||
while (i--) {
|
|
||||||
type = types[i];
|
|
||||||
handlers = events[type];
|
|
||||||
if (!handlers) { continue; }
|
|
||||||
k = handlers.length;
|
|
||||||
while (k--) {
|
|
||||||
if (handlers[k][0] === fn) {
|
|
||||||
node.removeEventListener(type, handlers[k][1]);
|
|
||||||
handlers.splice(k, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function trigger(node, type, properties) {
|
|
||||||
// Don't cache events. It prevents you from triggering an event of a
|
|
||||||
// given type from inside the handler of another event of that type.
|
|
||||||
var event = createEvent(type);
|
|
||||||
if (properties) { assign(event, properties); }
|
|
||||||
node.dispatchEvent(event);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Constructors
|
|
||||||
|
|
||||||
function Timer(fn){
|
|
||||||
var callback = fn,
|
|
||||||
active = false,
|
|
||||||
running = false;
|
|
||||||
|
|
||||||
function trigger(time) {
|
|
||||||
if (active){
|
|
||||||
callback();
|
|
||||||
requestFrame(trigger);
|
|
||||||
running = true;
|
|
||||||
active = false;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
running = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.kick = function(fn) {
|
|
||||||
active = true;
|
|
||||||
if (!running) { trigger(); }
|
|
||||||
};
|
|
||||||
|
|
||||||
this.end = function(fn) {
|
|
||||||
var cb = callback;
|
|
||||||
|
|
||||||
if (!fn) { return; }
|
|
||||||
|
|
||||||
// If the timer is not running, simply call the end callback.
|
|
||||||
if (!running) {
|
|
||||||
fn();
|
|
||||||
}
|
|
||||||
// If the timer is running, and has been kicked lately, then
|
|
||||||
// queue up the current callback and the end callback, otherwise
|
|
||||||
// just the end callback.
|
|
||||||
else {
|
|
||||||
callback = active ?
|
|
||||||
function(){ cb(); fn(); } :
|
|
||||||
fn ;
|
|
||||||
|
|
||||||
active = true;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Functions
|
|
||||||
|
|
||||||
function noop() {}
|
|
||||||
|
|
||||||
function preventDefault(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
}
|
|
||||||
|
|
||||||
function isIgnoreTag(e) {
|
|
||||||
return !!ignoreTags[e.target.tagName.toLowerCase()];
|
|
||||||
}
|
|
||||||
|
|
||||||
function isPrimaryButton(e) {
|
|
||||||
// Ignore mousedowns on any button other than the left (or primary)
|
|
||||||
// mouse button, or when a modifier key is pressed.
|
|
||||||
return (e.which === 1 && !e.ctrlKey && !e.altKey);
|
|
||||||
}
|
|
||||||
|
|
||||||
function identifiedTouch(touchList, id) {
|
|
||||||
var i, l;
|
|
||||||
|
|
||||||
if (touchList.identifiedTouch) {
|
|
||||||
return touchList.identifiedTouch(id);
|
|
||||||
}
|
|
||||||
|
|
||||||
// touchList.identifiedTouch() does not exist in
|
|
||||||
// webkit yet… we must do the search ourselves...
|
|
||||||
|
|
||||||
i = -1;
|
|
||||||
l = touchList.length;
|
|
||||||
|
|
||||||
while (++i < l) {
|
|
||||||
if (touchList[i].identifier === id) {
|
|
||||||
return touchList[i];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function changedTouch(e, data) {
|
|
||||||
var touch = identifiedTouch(e.changedTouches, data.identifier);
|
|
||||||
|
|
||||||
// This isn't the touch you're looking for.
|
|
||||||
if (!touch) { return; }
|
|
||||||
|
|
||||||
// Chrome Android (at least) includes touches that have not
|
|
||||||
// changed in e.changedTouches. That's a bit annoying. Check
|
|
||||||
// that this touch has changed.
|
|
||||||
if (touch.pageX === data.pageX && touch.pageY === data.pageY) { return; }
|
|
||||||
|
|
||||||
return touch;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Handlers that decide when the first movestart is triggered
|
|
||||||
|
|
||||||
function mousedown(e){
|
|
||||||
// Ignore non-primary buttons
|
|
||||||
if (!isPrimaryButton(e)) { return; }
|
|
||||||
|
|
||||||
// Ignore form and interactive elements
|
|
||||||
if (isIgnoreTag(e)) { return; }
|
|
||||||
|
|
||||||
on(document, mouseevents.move, mousemove, e);
|
|
||||||
on(document, mouseevents.cancel, mouseend, e);
|
|
||||||
}
|
|
||||||
|
|
||||||
function mousemove(e, data){
|
|
||||||
checkThreshold(e, data, e, removeMouse);
|
|
||||||
}
|
|
||||||
|
|
||||||
function mouseend(e, data) {
|
|
||||||
removeMouse();
|
|
||||||
}
|
|
||||||
|
|
||||||
function removeMouse() {
|
|
||||||
off(document, mouseevents.move, mousemove);
|
|
||||||
off(document, mouseevents.cancel, mouseend);
|
|
||||||
}
|
|
||||||
|
|
||||||
function touchstart(e) {
|
|
||||||
// Don't get in the way of interaction with form elements
|
|
||||||
if (ignoreTags[e.target.tagName.toLowerCase()]) { return; }
|
|
||||||
|
|
||||||
var touch = e.changedTouches[0];
|
|
||||||
|
|
||||||
// iOS live updates the touch objects whereas Android gives us copies.
|
|
||||||
// That means we can't trust the touchstart object to stay the same,
|
|
||||||
// so we must copy the data. This object acts as a template for
|
|
||||||
// movestart, move and moveend event objects.
|
|
||||||
var data = {
|
|
||||||
target: touch.target,
|
|
||||||
pageX: touch.pageX,
|
|
||||||
pageY: touch.pageY,
|
|
||||||
identifier: touch.identifier,
|
|
||||||
|
|
||||||
// The only way to make handlers individually unbindable is by
|
|
||||||
// making them unique.
|
|
||||||
touchmove: function(e, data) { touchmove(e, data); },
|
|
||||||
touchend: function(e, data) { touchend(e, data); }
|
|
||||||
};
|
|
||||||
|
|
||||||
on(document, touchevents.move, data.touchmove, data);
|
|
||||||
on(document, touchevents.cancel, data.touchend, data);
|
|
||||||
}
|
|
||||||
|
|
||||||
function touchmove(e, data) {
|
|
||||||
var touch = changedTouch(e, data);
|
|
||||||
if (!touch) { return; }
|
|
||||||
checkThreshold(e, data, touch, removeTouch);
|
|
||||||
}
|
|
||||||
|
|
||||||
function touchend(e, data) {
|
|
||||||
var touch = identifiedTouch(e.changedTouches, data.identifier);
|
|
||||||
if (!touch) { return; }
|
|
||||||
removeTouch(data);
|
|
||||||
}
|
|
||||||
|
|
||||||
function removeTouch(data) {
|
|
||||||
off(document, touchevents.move, data.touchmove);
|
|
||||||
off(document, touchevents.cancel, data.touchend);
|
|
||||||
}
|
|
||||||
|
|
||||||
function checkThreshold(e, data, touch, fn) {
|
|
||||||
var distX = touch.pageX - data.pageX;
|
|
||||||
var distY = touch.pageY - data.pageY;
|
|
||||||
|
|
||||||
// Do nothing if the threshold has not been crossed.
|
|
||||||
if ((distX * distX) + (distY * distY) < (threshold * threshold)) { return; }
|
|
||||||
|
|
||||||
triggerStart(e, data, touch, distX, distY, fn);
|
|
||||||
}
|
|
||||||
|
|
||||||
function triggerStart(e, data, touch, distX, distY, fn) {
|
|
||||||
var touches = e.targetTouches;
|
|
||||||
var time = e.timeStamp - data.timeStamp;
|
|
||||||
|
|
||||||
// Create a movestart object with some special properties that
|
|
||||||
// are passed only to the movestart handlers.
|
|
||||||
var template = {
|
|
||||||
altKey: e.altKey,
|
|
||||||
ctrlKey: e.ctrlKey,
|
|
||||||
shiftKey: e.shiftKey,
|
|
||||||
startX: data.pageX,
|
|
||||||
startY: data.pageY,
|
|
||||||
distX: distX,
|
|
||||||
distY: distY,
|
|
||||||
deltaX: distX,
|
|
||||||
deltaY: distY,
|
|
||||||
pageX: touch.pageX,
|
|
||||||
pageY: touch.pageY,
|
|
||||||
velocityX: distX / time,
|
|
||||||
velocityY: distY / time,
|
|
||||||
identifier: data.identifier,
|
|
||||||
targetTouches: touches,
|
|
||||||
finger: touches ? touches.length : 1,
|
|
||||||
enableMove: function() {
|
|
||||||
this.moveEnabled = true;
|
|
||||||
this.enableMove = noop;
|
|
||||||
e.preventDefault();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Trigger the movestart event.
|
|
||||||
trigger(data.target, 'movestart', template);
|
|
||||||
|
|
||||||
// Unbind handlers that tracked the touch or mouse up till now.
|
|
||||||
fn(data);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Handlers that control what happens following a movestart
|
|
||||||
|
|
||||||
function activeMousemove(e, data) {
|
|
||||||
var timer = data.timer;
|
|
||||||
|
|
||||||
data.touch = e;
|
|
||||||
data.timeStamp = e.timeStamp;
|
|
||||||
timer.kick();
|
|
||||||
}
|
|
||||||
|
|
||||||
function activeMouseend(e, data) {
|
|
||||||
var target = data.target;
|
|
||||||
var event = data.event;
|
|
||||||
var timer = data.timer;
|
|
||||||
|
|
||||||
removeActiveMouse();
|
|
||||||
|
|
||||||
endEvent(target, event, timer, function() {
|
|
||||||
// Unbind the click suppressor, waiting until after mouseup
|
|
||||||
// has been handled.
|
|
||||||
setTimeout(function(){
|
|
||||||
off(target, 'click', preventDefault);
|
|
||||||
}, 0);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function removeActiveMouse() {
|
|
||||||
off(document, mouseevents.move, activeMousemove);
|
|
||||||
off(document, mouseevents.end, activeMouseend);
|
|
||||||
}
|
|
||||||
|
|
||||||
function activeTouchmove(e, data) {
|
|
||||||
var event = data.event;
|
|
||||||
var timer = data.timer;
|
|
||||||
var touch = changedTouch(e, event);
|
|
||||||
|
|
||||||
if (!touch) { return; }
|
|
||||||
|
|
||||||
// Stop the interface from gesturing
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
event.targetTouches = e.targetTouches;
|
|
||||||
data.touch = touch;
|
|
||||||
data.timeStamp = e.timeStamp;
|
|
||||||
|
|
||||||
timer.kick();
|
|
||||||
}
|
|
||||||
|
|
||||||
function activeTouchend(e, data) {
|
|
||||||
var target = data.target;
|
|
||||||
var event = data.event;
|
|
||||||
var timer = data.timer;
|
|
||||||
var touch = identifiedTouch(e.changedTouches, event.identifier);
|
|
||||||
|
|
||||||
// This isn't the touch you're looking for.
|
|
||||||
if (!touch) { return; }
|
|
||||||
|
|
||||||
removeActiveTouch(data);
|
|
||||||
endEvent(target, event, timer);
|
|
||||||
}
|
|
||||||
|
|
||||||
function removeActiveTouch(data) {
|
|
||||||
off(document, touchevents.move, data.activeTouchmove);
|
|
||||||
off(document, touchevents.end, data.activeTouchend);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Logic for triggering move and moveend events
|
|
||||||
|
|
||||||
function updateEvent(event, touch, timeStamp) {
|
|
||||||
var time = timeStamp - event.timeStamp;
|
|
||||||
|
|
||||||
event.distX = touch.pageX - event.startX;
|
|
||||||
event.distY = touch.pageY - event.startY;
|
|
||||||
event.deltaX = touch.pageX - event.pageX;
|
|
||||||
event.deltaY = touch.pageY - event.pageY;
|
|
||||||
|
|
||||||
// Average the velocity of the last few events using a decay
|
|
||||||
// curve to even out spurious jumps in values.
|
|
||||||
event.velocityX = 0.3 * event.velocityX + 0.7 * event.deltaX / time;
|
|
||||||
event.velocityY = 0.3 * event.velocityY + 0.7 * event.deltaY / time;
|
|
||||||
event.pageX = touch.pageX;
|
|
||||||
event.pageY = touch.pageY;
|
|
||||||
}
|
|
||||||
|
|
||||||
function endEvent(target, event, timer, fn) {
|
|
||||||
timer.end(function(){
|
|
||||||
trigger(target, 'moveend', event);
|
|
||||||
return fn && fn();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Set up the DOM
|
|
||||||
|
|
||||||
function movestart(e) {
|
|
||||||
if (e.defaultPrevented) { return; }
|
|
||||||
if (!e.moveEnabled) { return; }
|
|
||||||
|
|
||||||
var event = {
|
|
||||||
startX: e.startX,
|
|
||||||
startY: e.startY,
|
|
||||||
pageX: e.pageX,
|
|
||||||
pageY: e.pageY,
|
|
||||||
distX: e.distX,
|
|
||||||
distY: e.distY,
|
|
||||||
deltaX: e.deltaX,
|
|
||||||
deltaY: e.deltaY,
|
|
||||||
velocityX: e.velocityX,
|
|
||||||
velocityY: e.velocityY,
|
|
||||||
identifier: e.identifier,
|
|
||||||
targetTouches: e.targetTouches,
|
|
||||||
finger: e.finger
|
|
||||||
};
|
|
||||||
|
|
||||||
var data = {
|
|
||||||
target: e.target,
|
|
||||||
event: event,
|
|
||||||
timer: new Timer(update),
|
|
||||||
touch: undefined,
|
|
||||||
timeStamp: e.timeStamp
|
|
||||||
};
|
|
||||||
|
|
||||||
function update(time) {
|
|
||||||
updateEvent(event, data.touch, data.timeStamp);
|
|
||||||
trigger(data.target, 'move', event);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.identifier === undefined) {
|
|
||||||
// We're dealing with a mouse event.
|
|
||||||
// Stop clicks from propagating during a move
|
|
||||||
on(e.target, 'click', preventDefault);
|
|
||||||
on(document, mouseevents.move, activeMousemove, data);
|
|
||||||
on(document, mouseevents.end, activeMouseend, data);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
// In order to unbind correct handlers they have to be unique
|
|
||||||
data.activeTouchmove = function(e, data) { activeTouchmove(e, data); };
|
|
||||||
data.activeTouchend = function(e, data) { activeTouchend(e, data); };
|
|
||||||
|
|
||||||
// We're dealing with a touch.
|
|
||||||
on(document, touchevents.move, data.activeTouchmove, data);
|
|
||||||
on(document, touchevents.end, data.activeTouchend, data);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
on(document, 'mousedown', mousedown);
|
|
||||||
on(document, 'touchstart', touchstart);
|
|
||||||
on(document, 'movestart', movestart);
|
|
||||||
|
|
||||||
|
|
||||||
// jQuery special events
|
|
||||||
//
|
|
||||||
// jQuery event objects are copies of DOM event objects. They need
|
|
||||||
// a little help copying the move properties across.
|
|
||||||
|
|
||||||
if (!window.jQuery) { return; }
|
|
||||||
|
|
||||||
var properties = ("startX startY pageX pageY distX distY deltaX deltaY velocityX velocityY").split(' ');
|
|
||||||
|
|
||||||
function enableMove1(e) { e.enableMove(); }
|
|
||||||
function enableMove2(e) { e.enableMove(); }
|
|
||||||
function enableMove3(e) { e.enableMove(); }
|
|
||||||
|
|
||||||
function add(handleObj) {
|
|
||||||
var handler = handleObj.handler;
|
|
||||||
|
|
||||||
handleObj.handler = function(e) {
|
|
||||||
// Copy move properties across from originalEvent
|
|
||||||
var i = properties.length;
|
|
||||||
var property;
|
|
||||||
|
|
||||||
while(i--) {
|
|
||||||
property = properties[i];
|
|
||||||
e[property] = e.originalEvent[property];
|
|
||||||
}
|
|
||||||
|
|
||||||
handler.apply(this, arguments);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
jQuery.event.special.movestart = {
|
|
||||||
setup: function() {
|
|
||||||
// Movestart must be enabled to allow other move events
|
|
||||||
on(this, 'movestart', enableMove1);
|
|
||||||
|
|
||||||
// Do listen to DOM events
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
|
|
||||||
teardown: function() {
|
|
||||||
off(this, 'movestart', enableMove1);
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
|
|
||||||
add: add
|
|
||||||
};
|
|
||||||
|
|
||||||
jQuery.event.special.move = {
|
|
||||||
setup: function() {
|
|
||||||
on(this, 'movestart', enableMove2);
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
|
|
||||||
teardown: function() {
|
|
||||||
off(this, 'movestart', enableMove2);
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
|
|
||||||
add: add
|
|
||||||
};
|
|
||||||
|
|
||||||
jQuery.event.special.moveend = {
|
|
||||||
setup: function() {
|
|
||||||
on(this, 'movestart', enableMove3);
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
|
|
||||||
teardown: function() {
|
|
||||||
off(this, 'movestart', enableMove3);
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
|
|
||||||
add: add
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
@ -1,109 +0,0 @@
|
||||||
(function($){
|
|
||||||
|
|
||||||
$.fn.twentytwenty = function(options) {
|
|
||||||
var options = $.extend({default_offset_pct: 0.5, orientation: 'horizontal', before_label: 'Before', after_label: 'After', no_overlay: false}, options);
|
|
||||||
return this.each(function() {
|
|
||||||
|
|
||||||
var sliderPct = options.default_offset_pct;
|
|
||||||
var container = $(this);
|
|
||||||
var sliderOrientation = options.orientation;
|
|
||||||
var beforeDirection = (sliderOrientation === 'vertical') ? 'down' : 'left';
|
|
||||||
var afterDirection = (sliderOrientation === 'vertical') ? 'up' : 'right';
|
|
||||||
|
|
||||||
|
|
||||||
container.wrap("<div class='twentytwenty-wrapper twentytwenty-" + sliderOrientation + "'></div>");
|
|
||||||
if(!options.no_overlay) {
|
|
||||||
container.append("<div class='twentytwenty-overlay'></div>");
|
|
||||||
}
|
|
||||||
var beforeImg = container.find("img:first");
|
|
||||||
var afterImg = container.find("img:last");
|
|
||||||
container.append("<div class='twentytwenty-handle'></div>");
|
|
||||||
var slider = container.find(".twentytwenty-handle");
|
|
||||||
slider.append("<span class='twentytwenty-" + beforeDirection + "-arrow'></span>");
|
|
||||||
slider.append("<span class='twentytwenty-" + afterDirection + "-arrow'></span>");
|
|
||||||
container.addClass("twentytwenty-container");
|
|
||||||
beforeImg.addClass("twentytwenty-before");
|
|
||||||
afterImg.addClass("twentytwenty-after");
|
|
||||||
|
|
||||||
var overlay = container.find(".twentytwenty-overlay");
|
|
||||||
overlay.append("<div class='twentytwenty-before-label' data-content='"+options.before_label+"'></div>");
|
|
||||||
overlay.append("<div class='twentytwenty-after-label' data-content='"+options.after_label+"'></div>");
|
|
||||||
|
|
||||||
var calcOffset = function(dimensionPct) {
|
|
||||||
var w = beforeImg.width();
|
|
||||||
var h = beforeImg.height();
|
|
||||||
return {
|
|
||||||
w: w+"px",
|
|
||||||
h: h+"px",
|
|
||||||
cw: (dimensionPct*w)+"px",
|
|
||||||
ch: (dimensionPct*h)+"px"
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
var adjustContainer = function(offset) {
|
|
||||||
if (sliderOrientation === 'vertical') {
|
|
||||||
beforeImg.css("clip", "rect(0,"+offset.w+","+offset.ch+",0)");
|
|
||||||
afterImg.css("clip", "rect("+offset.ch+","+offset.w+","+offset.h+",0)");
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
beforeImg.css("clip", "rect(0,"+offset.cw+","+offset.h+",0)");
|
|
||||||
afterImg.css("clip", "rect(0,"+offset.w+","+offset.h+","+offset.cw+")");
|
|
||||||
}
|
|
||||||
container.css("height", offset.h);
|
|
||||||
};
|
|
||||||
|
|
||||||
var adjustSlider = function(pct) {
|
|
||||||
var offset = calcOffset(pct);
|
|
||||||
slider.css((sliderOrientation==="vertical") ? "top" : "left", (sliderOrientation==="vertical") ? offset.ch : offset.cw);
|
|
||||||
adjustContainer(offset);
|
|
||||||
};
|
|
||||||
|
|
||||||
$(window).on("resize.twentytwenty", function(e) {
|
|
||||||
adjustSlider(sliderPct);
|
|
||||||
});
|
|
||||||
|
|
||||||
var offsetX = 0;
|
|
||||||
var offsetY = 0;
|
|
||||||
var imgWidth = 0;
|
|
||||||
var imgHeight = 0;
|
|
||||||
|
|
||||||
slider.on("movestart", function(e) {
|
|
||||||
if (((e.distX > e.distY && e.distX < -e.distY) || (e.distX < e.distY && e.distX > -e.distY)) && sliderOrientation !== 'vertical') {
|
|
||||||
e.preventDefault();
|
|
||||||
}
|
|
||||||
else if (((e.distX < e.distY && e.distX < -e.distY) || (e.distX > e.distY && e.distX > -e.distY)) && sliderOrientation === 'vertical') {
|
|
||||||
e.preventDefault();
|
|
||||||
}
|
|
||||||
container.addClass("active");
|
|
||||||
offsetX = container.offset().left;
|
|
||||||
offsetY = container.offset().top;
|
|
||||||
imgWidth = beforeImg.width();
|
|
||||||
imgHeight = beforeImg.height();
|
|
||||||
});
|
|
||||||
|
|
||||||
slider.on("moveend", function(e) {
|
|
||||||
container.removeClass("active");
|
|
||||||
});
|
|
||||||
|
|
||||||
slider.on("move", function(e) {
|
|
||||||
if (container.hasClass("active")) {
|
|
||||||
sliderPct = (sliderOrientation === 'vertical') ? (e.pageY-offsetY)/imgHeight : (e.pageX-offsetX)/imgWidth;
|
|
||||||
if (sliderPct < 0) {
|
|
||||||
sliderPct = 0;
|
|
||||||
}
|
|
||||||
if (sliderPct > 1) {
|
|
||||||
sliderPct = 1;
|
|
||||||
}
|
|
||||||
adjustSlider(sliderPct);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
container.find("img").on("mousedown", function(event) {
|
|
||||||
event.preventDefault();
|
|
||||||
});
|
|
||||||
|
|
||||||
$(window).trigger("resize.twentytwenty");
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
})(jQuery);
|
|
||||||
|
|
@ -3,5 +3,5 @@ layout: page
|
||||||
title: Los tres principales modelos de colonización
|
title: Los tres principales modelos de colonización
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include sliders/bardenas.html %}
|
{% include _bardenas.html %}
|
||||||
{% include sliders/sotogordo.html %}
|
{% include _sotogordo.html %}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<script src="jquery-3.2.1.min.js"></script>
|
<script src="jquery.min.js"></script>
|
||||||
<script src="jquery.event.move.js"></script>
|
<script src="jquery.event.move.js"></script>
|
||||||
<script src="jquery.twentytwenty.js"></script>
|
<script src="jquery.twentytwenty.js"></script>
|
||||||
<link rel="stylesheet" href="twentytwenty.css" type="text/css" media="screen" />
|
<link rel="stylesheet" href="twentytwenty.css" type="text/css" media="screen" />
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<script src="jquery-3.2.1.min.js"></script>
|
<script src="jquery.min.js"></script>
|
||||||
<script src="jquery.event.move.js"></script>
|
<script src="jquery.event.move.js"></script>
|
||||||
<script src="jquery.twentytwenty.js"></script>
|
<script src="jquery.twentytwenty.js"></script>
|
||||||
<link rel="stylesheet" href="twentytwenty.css" type="text/css" media="screen" />
|
<link rel="stylesheet" href="twentytwenty.css" type="text/css" media="screen" />
|
||||||
|
|
|
||||||
|
|
@ -1,205 +0,0 @@
|
||||||
.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after, .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
|
|
||||||
content: " ";
|
|
||||||
display: block;
|
|
||||||
background: white;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 30;
|
|
||||||
-webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
|
|
||||||
-moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
|
|
||||||
box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); }
|
|
||||||
|
|
||||||
.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after {
|
|
||||||
width: 3px;
|
|
||||||
height: 9999px;
|
|
||||||
left: 50%;
|
|
||||||
margin-left: -1.5px; }
|
|
||||||
|
|
||||||
.twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
|
|
||||||
width: 9999px;
|
|
||||||
height: 3px;
|
|
||||||
top: 50%;
|
|
||||||
margin-top: -1.5px; }
|
|
||||||
|
|
||||||
.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%; }
|
|
||||||
|
|
||||||
.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
|
|
||||||
-webkit-transition-duration: 0.5s;
|
|
||||||
-moz-transition-duration: 0.5s;
|
|
||||||
transition-duration: 0.5s; }
|
|
||||||
|
|
||||||
.twentytwenty-before-label, .twentytwenty-after-label {
|
|
||||||
-webkit-transition-property: opacity;
|
|
||||||
-moz-transition-property: opacity;
|
|
||||||
transition-property: opacity; }
|
|
||||||
|
|
||||||
.twentytwenty-before-label:before, .twentytwenty-after-label:before {
|
|
||||||
color: white;
|
|
||||||
font-size: 13px;
|
|
||||||
letter-spacing: 0.1em; }
|
|
||||||
|
|
||||||
.twentytwenty-before-label:before, .twentytwenty-after-label:before {
|
|
||||||
position: absolute;
|
|
||||||
background: rgba(255, 255, 255, 0.2);
|
|
||||||
line-height: 38px;
|
|
||||||
padding: 0 20px;
|
|
||||||
-webkit-border-radius: 2px;
|
|
||||||
-moz-border-radius: 2px;
|
|
||||||
border-radius: 2px; }
|
|
||||||
|
|
||||||
.twentytwenty-horizontal .twentytwenty-before-label:before, .twentytwenty-horizontal .twentytwenty-after-label:before {
|
|
||||||
top: 50%;
|
|
||||||
margin-top: -19px; }
|
|
||||||
|
|
||||||
.twentytwenty-vertical .twentytwenty-before-label:before, .twentytwenty-vertical .twentytwenty-after-label:before {
|
|
||||||
left: 50%;
|
|
||||||
margin-left: -45px;
|
|
||||||
text-align: center;
|
|
||||||
width: 90px; }
|
|
||||||
|
|
||||||
.twentytwenty-left-arrow, .twentytwenty-right-arrow, .twentytwenty-up-arrow, .twentytwenty-down-arrow {
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border: 6px inset transparent;
|
|
||||||
position: absolute; }
|
|
||||||
|
|
||||||
.twentytwenty-left-arrow, .twentytwenty-right-arrow {
|
|
||||||
top: 50%;
|
|
||||||
margin-top: -6px; }
|
|
||||||
|
|
||||||
.twentytwenty-up-arrow, .twentytwenty-down-arrow {
|
|
||||||
left: 50%;
|
|
||||||
margin-left: -6px; }
|
|
||||||
|
|
||||||
.twentytwenty-container {
|
|
||||||
-webkit-box-sizing: content-box;
|
|
||||||
-moz-box-sizing: content-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
z-index: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none; }
|
|
||||||
.twentytwenty-container img {
|
|
||||||
max-width: 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
display: block; }
|
|
||||||
.twentytwenty-container.active .twentytwenty-overlay, .twentytwenty-container.active :hover.twentytwenty-overlay {
|
|
||||||
background: rgba(0, 0, 0, 0); }
|
|
||||||
.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label,
|
|
||||||
.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label, .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-before-label,
|
|
||||||
.twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-after-label {
|
|
||||||
opacity: 0; }
|
|
||||||
.twentytwenty-container * {
|
|
||||||
-webkit-box-sizing: content-box;
|
|
||||||
-moz-box-sizing: content-box;
|
|
||||||
box-sizing: content-box; }
|
|
||||||
|
|
||||||
.twentytwenty-before-label {
|
|
||||||
opacity: 0; }
|
|
||||||
.twentytwenty-before-label:before {
|
|
||||||
content: attr(data-content); }
|
|
||||||
|
|
||||||
.twentytwenty-after-label {
|
|
||||||
opacity: 0; }
|
|
||||||
.twentytwenty-after-label:before {
|
|
||||||
content: attr(data-content); }
|
|
||||||
|
|
||||||
.twentytwenty-horizontal .twentytwenty-before-label:before {
|
|
||||||
left: 10px; }
|
|
||||||
|
|
||||||
.twentytwenty-horizontal .twentytwenty-after-label:before {
|
|
||||||
right: 10px; }
|
|
||||||
|
|
||||||
.twentytwenty-vertical .twentytwenty-before-label:before {
|
|
||||||
top: 10px; }
|
|
||||||
|
|
||||||
.twentytwenty-vertical .twentytwenty-after-label:before {
|
|
||||||
bottom: 10px; }
|
|
||||||
|
|
||||||
.twentytwenty-overlay {
|
|
||||||
-webkit-transition-property: background;
|
|
||||||
-moz-transition-property: background;
|
|
||||||
transition-property: background;
|
|
||||||
background: rgba(0, 0, 0, 0);
|
|
||||||
z-index: 25; }
|
|
||||||
.twentytwenty-overlay:hover {
|
|
||||||
background: rgba(0, 0, 0, 0.5); }
|
|
||||||
.twentytwenty-overlay:hover .twentytwenty-after-label {
|
|
||||||
opacity: 1; }
|
|
||||||
.twentytwenty-overlay:hover .twentytwenty-before-label {
|
|
||||||
opacity: 1; }
|
|
||||||
|
|
||||||
.twentytwenty-before {
|
|
||||||
z-index: 20; }
|
|
||||||
|
|
||||||
.twentytwenty-after {
|
|
||||||
z-index: 10; }
|
|
||||||
|
|
||||||
.twentytwenty-handle {
|
|
||||||
height: 38px;
|
|
||||||
width: 38px;
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
margin-left: -22px;
|
|
||||||
margin-top: -22px;
|
|
||||||
border: 3px solid white;
|
|
||||||
-webkit-border-radius: 1000px;
|
|
||||||
-moz-border-radius: 1000px;
|
|
||||||
border-radius: 1000px;
|
|
||||||
-webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
|
|
||||||
-moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
|
|
||||||
box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
|
|
||||||
z-index: 40;
|
|
||||||
cursor: pointer; }
|
|
||||||
|
|
||||||
.twentytwenty-horizontal .twentytwenty-handle:before {
|
|
||||||
bottom: 50%;
|
|
||||||
margin-bottom: 22px;
|
|
||||||
-webkit-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
|
|
||||||
-moz-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
|
|
||||||
box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
|
|
||||||
.twentytwenty-horizontal .twentytwenty-handle:after {
|
|
||||||
top: 50%;
|
|
||||||
margin-top: 22px;
|
|
||||||
-webkit-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
|
|
||||||
-moz-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
|
|
||||||
box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
|
|
||||||
|
|
||||||
.twentytwenty-vertical .twentytwenty-handle:before {
|
|
||||||
left: 50%;
|
|
||||||
margin-left: 22px;
|
|
||||||
-webkit-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
|
|
||||||
-moz-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
|
|
||||||
box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
|
|
||||||
.twentytwenty-vertical .twentytwenty-handle:after {
|
|
||||||
right: 50%;
|
|
||||||
margin-right: 22px;
|
|
||||||
-webkit-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
|
|
||||||
-moz-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
|
|
||||||
box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
|
|
||||||
|
|
||||||
.twentytwenty-left-arrow {
|
|
||||||
border-right: 6px solid white;
|
|
||||||
left: 50%;
|
|
||||||
margin-left: -17px; }
|
|
||||||
|
|
||||||
.twentytwenty-right-arrow {
|
|
||||||
border-left: 6px solid white;
|
|
||||||
right: 50%;
|
|
||||||
margin-right: -17px; }
|
|
||||||
|
|
||||||
.twentytwenty-up-arrow {
|
|
||||||
border-bottom: 6px solid white;
|
|
||||||
top: 50%;
|
|
||||||
margin-top: -17px; }
|
|
||||||
|
|
||||||
.twentytwenty-down-arrow {
|
|
||||||
border-top: 6px solid white;
|
|
||||||
bottom: 50%;
|
|
||||||
margin-bottom: -17px; }
|
|
||||||
Loading…
Reference in a new issue