gergelypolonkai-web-jekyll/symbolon/index.html

162 lines
4.5 KiB
HTML
Raw Normal View History

---
---
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Symbolon</title>
<style>
div#holder {
overflow: auto;
height: 320px;
}
div.card {
float: left;
margin-right: 1em;
}
p {
text-align: center;
border-bottom: 1px solid black;
}
img {
border: 0 none;
}
</style>
<link rel="stylesheet" href="js/fancybox/source/jquery.fancybox.css" type="text/css">
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/fancybox/source/jquery.fancybox.pack.js"></script>
</head>
<body>
<select>
<option value="">Mind / All</option>
<option value="aries">Kos / Aries</option>
<option value="taurus">Bika / Taurus</option>
<option value="gemini">Ikrek / Gemini</option>
<option value="cancer">Rák / Cancer</option>
<option value="leo">Oroszlán / Leo</option>
<option value="virgo">Szűz / Virgo</option>
<option value="libra">Mérleg / Libra</option>
<option value="scorpio">Skorpió / Scorpio</option>
<option value="sagittarius">Nyilas / Sagittarius</option>
<option value="capricorn">Bak / Capricorn</option>
<option value="aquarius">Vízöntő / Aquarius</option>
<option value="pisces">Halak / Pisces</option>
</select>
<select>
<option value="">Mind / All</option>
<option value="aries">Kos / Aries</option>
<option value="taurus">Bika / Taurus</option>
<option value="gemini">Ikrek / Gemini</option>
<option value="cancer">Rák / Cancer</option>
<option value="leo">Oroszlán / Leo</option>
<option value="virgo">Szűz / Virgo</option>
<option value="libra">Mérleg / Libra</option>
<option value="scorpio">Skorpió / Scorpio</option>
<option value="sagittarius">Nyilas / Sagittarius</option>
<option value="capricorn">Bak / Capricorn</option>
<option value="aquarius">Vízöntő / Aquarius</option>
<option value="pisces">Halak / Pisces</option>
</select>
<button id="draw">Húzz egyet / Draw one</button>
<hr>
<div id="holder">
{% assign list = site.data.symbolon | sort:'number'%}
{% for s in list %}
{% assign image = '0' | append: s.number %}
{% assign len = image | size %}
{% if len == 3 %}
{% assign image = '' | append: s.number %}
{% endif %}
<div class="card{% for sign in s.signs %} {{sign}}{% endfor %}">
<a id="card_{{image}}" class="fancybox" rel="group" href="images/{{image}}.jpg">
<img src="images/{{image}}.jpg" alt="{{s.name}}">
</a>
<p class="cim">{{s.number}}. {{s.name}}</p>
</div>
{% endfor %}
</div>
<script>
$('select').change(function () {
var classes = new Array();
var single_card = false;
$('select').each(function (i, e) {
sign = $(e).val();
if (sign != '') {
classes.push($(e).val());
}
});
if (classes.length == 2 && (classes[0] == classes[1])) {
single_card = true;
}
classes = classes.filter(function (e, i, arr) {
return arr.lastIndexOf(e) === i;
});
selector = '';
$.map(classes, function (e) {
selector += '.' + e;
});
if (single_card) {
selector = '.' + classes[0] + '[class="card ' + classes[0] + '"]';
}
console.log(selector);
$('div.card').show();
if (selector != '') {
$('div.card').not(selector).hide();
}
});
function resize_holder() {
var winheight = $(window).height();
var holdertop = $('#holder').position().top;
$('#holder').height(winheight - holdertop - 10);
}
$(document).ready(function () {
resize_holder();
$('.fancybox').fancybox({
beforeShow: function() {
var alt = this.element.find('img').attr('alt');
this.inner.find('img').attr('alt', alt);
this.title = alt;
}
});
});
$(window).resize(function () {
resize_holder();
});
$('#draw').click(function () {
count = $('div.card').length;
draw_num = Math.floor(Math.random() * count) + 1;
num_str = (draw_num < 10) ? '0' + draw_num : draw_num;
draw_id = '#card_' + num_str;
console.log(draw_id);
$(draw_id).click();
});
</script>
</body>
</html>