|
|
|
@ -2,160 +2,174 @@ |
|
|
|
|
--- |
|
|
|
|
<!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"> |
|
|
|
|
<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" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> |
|
|
|
|
|
|
|
|
|
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.min.js"></script> |
|
|
|
|
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> |
|
|
|
|
</head> |
|
|
|
|
<body> |
|
|
|
|
<div class="container"> |
|
|
|
|
<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 type="button" class="btn" data-toggle="modal" data-target="#draw-one-modal" id="draw">Húzz egyet!</button> |
|
|
|
|
|
|
|
|
|
<hr> |
|
|
|
|
|
|
|
|
|
<div id="holder"> |
|
|
|
|
{% assign list = site.data.symbolon | sort:'number'%} |
|
|
|
|
{% for s in list %} |
|
|
|
|
{% assign image = '0' | append: s.number %} |
|
|
|
|
{% comment %} |
|
|
|
|
Using image|slice:-2,2 would be much easier here. However, it seems the |
|
|
|
|
slice filer is not working for some time now… |
|
|
|
|
{% endcomment %} |
|
|
|
|
{% 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> |
|
|
|
|
<div class="card{% for sign in s.signs %} {{sign}}{% endfor %}"> |
|
|
|
|
<a id="card_{{image}}" 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; |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
$('select').each(function (i, e) { |
|
|
|
|
sign = $(e).val(); |
|
|
|
|
<div class="modal fade" id="draw-one-modal" tabindex="-1" role="dialog" aria-labelledby="draw-one-title"> |
|
|
|
|
<div class="modal-dialog" role="document"> |
|
|
|
|
<div class="modal-content"> |
|
|
|
|
<div class="modal-header"> |
|
|
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|
|
|
|
<h4 class="modal-title" id="draw-one-title">Draw One</h4> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="modal-body" id="draw-one-body"> |
|
|
|
|
Body! |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="modal-footer"> |
|
|
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
$('select').change(function () { |
|
|
|
|
var classes = new Array(); |
|
|
|
|
var single_card = false; |
|
|
|
|
|
|
|
|
|
if (sign != '') { |
|
|
|
|
classes.push($(e).val()); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
$('select').each(function (i, e) { |
|
|
|
|
sign = $(e).val(); |
|
|
|
|
|
|
|
|
|
if (classes.length == 2 && (classes[0] == classes[1])) { |
|
|
|
|
single_card = true; |
|
|
|
|
} |
|
|
|
|
if (sign != '') { |
|
|
|
|
classes.push($(e).val()); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
classes = classes.filter(function (e, i, arr) { |
|
|
|
|
return arr.lastIndexOf(e) === i; |
|
|
|
|
}); |
|
|
|
|
if (classes.length == 2 && (classes[0] == classes[1])) { |
|
|
|
|
single_card = true; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
selector = ''; |
|
|
|
|
classes = classes.filter(function (e, i, arr) { |
|
|
|
|
return arr.lastIndexOf(e) === i; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
$.map(classes, function (e) { |
|
|
|
|
selector += '.' + e; |
|
|
|
|
}); |
|
|
|
|
selector = ''; |
|
|
|
|
|
|
|
|
|
if (single_card) { |
|
|
|
|
selector = '.' + classes[0] + '[class="card ' + classes[0] + '"]'; |
|
|
|
|
} |
|
|
|
|
$.map(classes, function (e) { |
|
|
|
|
selector += '.' + e; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
console.log(selector); |
|
|
|
|
if (single_card) { |
|
|
|
|
selector = '.' + classes[0] + '[class="card ' + classes[0] + '"]'; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
$('div.card').show(); |
|
|
|
|
if (selector != '') { |
|
|
|
|
$('div.card').not(selector).hide(); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
$('div.card').show(); |
|
|
|
|
|
|
|
|
|
function resize_holder() { |
|
|
|
|
var winheight = $(window).height(); |
|
|
|
|
var holdertop = $('#holder').position().top; |
|
|
|
|
$('#holder').height(winheight - holdertop - 10); |
|
|
|
|
} |
|
|
|
|
if (selector != '') { |
|
|
|
|
$('div.card').not(selector).hide(); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
$(document).ready(function () { |
|
|
|
|
resize_holder(); |
|
|
|
|
function resize_holder() { |
|
|
|
|
var winheight = $(window).height(); |
|
|
|
|
var holdertop = $('#holder').position().top; |
|
|
|
|
|
|
|
|
|
$('.fancybox').fancybox({ |
|
|
|
|
beforeShow: function() { |
|
|
|
|
var alt = this.element.find('img').attr('alt'); |
|
|
|
|
this.inner.find('img').attr('alt', alt); |
|
|
|
|
this.title = alt; |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
$('#holder').height(winheight - holdertop - 10); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
$(window).resize(function () { |
|
|
|
|
resize_holder(); |
|
|
|
|
}); |
|
|
|
|
$(document).ready(function () { |
|
|
|
|
resize_holder(); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
$('#draw').click(function () { |
|
|
|
|
count = $('div.card').length; |
|
|
|
|
$(window).resize(function () { |
|
|
|
|
resize_holder(); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
draw_num = Math.floor(Math.random() * count) + 1; |
|
|
|
|
num_str = (draw_num < 10) ? '0' + draw_num : draw_num; |
|
|
|
|
draw_id = '#card_' + num_str; |
|
|
|
|
$('#draw-one-modal').on('show.bs.modal', function(e) { |
|
|
|
|
count = $('div.card').length; |
|
|
|
|
|
|
|
|
|
console.log(draw_id); |
|
|
|
|
draw_num = Math.floor(Math.random() * count) + 1; |
|
|
|
|
num_str = (draw_num < 10) ? '0' + draw_num : draw_num; |
|
|
|
|
|
|
|
|
|
$(draw_id).click(); |
|
|
|
|
}); |
|
|
|
|
</script> |
|
|
|
|
</body> |
|
|
|
|
$('#draw-one-body').html(''); |
|
|
|
|
}); |
|
|
|
|
</script> |
|
|
|
|
</body> |
|
|
|
|
</html> |
|
|
|
|