Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 723d9de2d6
Fetching contributors…

Cannot retrieve contributors at this time

file 117 lines (113 sloc) 2.925 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.3.1/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="media/js/mootools-more-1.3.1.1.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
var images = {
"ponies/0b1e74a8a6ca9d291d669692d09a0580.gif": {
"emotion": "",
"caption": "and I got my eye on you!",
"pinkie": true,
"gilda": true
},
"ponies/0b1e4010317b435e02ba1e81bdc877f3.gif": {
"emotion": "happy",
"apple bloom": true
},
"ponies/0bd7d3252ff852163b9da9cf3c9e0976.jpg": {
"emotion": "fear",
"caption": "Haters gonna... exterminate!",
"dr. whoof": true
},
"ponies/0c74e5751f39f67e0151821e7f4d88f2.png": {
"emotion": "determination",
"fluttershy": true
}
};

$('filter-emotion').addEvent('click', function() {
var value = this.value;
if (value == 'any') {
$$('#images img').show();
} else {
$$('#images img').each(function(image) {
if (images[image.get('src')]["emotion"] == value) {
image.show();
} else {
image.hide();
}
});
}
});

$('filter-caption').addEvent('click', function() {
var value = this.value;
if (value == 'any') {
$$('#images img').show();
} else {
value = value == 'yes';
$$('#images img').each(function(image) {
if (Boolean(images[image.get('src')]["caption"]) == value) {
image.show();
} else {
image.hide();
}
});
}
});

$('filter-character').addEvent('click', function() {
var value = this.value;
if (value == 'any') {
$$('#images img').show();
} else {
$$('#images img').each(function(image) {
if (images[image.get('src')][value]) {
image.show();
} else {
image.hide();
}
});
}
});

Object.each(images, function(item, key) {
var a = new Element('a');
a.set('href', key);
var img = new Element('img');
img.set('src', key);
a.grab(img);
$('images').grab(a);
});
});
</script>
<style type="text/css">
img {
height: 150px;
margin: 3px 5px;
}
</style>
</head>
<body>
<div id="filters">
<select id="filter-emotion">
<option value="any">any</option>
<option value="determination">determination</option>
<option value="fear">fear</option>
<option value="happy">happy</option>
</select>
<select id="filter-caption">
<option value="any">any</option>
<option value="yes">yes</option>
<option value="no">no</option>
</select>
<select id="filter-character">
<option value="any">any</option>
<option value="apple bloom">apple bloom</option>
<option value="dr. whoof">dr. whoof</option>
<option value="fluttershy">fluttershy</option>
<option value="gilda">gilda</option>
<option value="pinkie">pinkie</option>
</select>
</div>
<div id="images">
</div>
</body>
</html>
Something went wrong with that request. Please try again.