90 lines
2.6 KiB
Plaintext
90 lines
2.6 KiB
Plaintext
|
<div class="i-space index-space-1">
|
||
|
|
<ul
|
||
|
|
class="i-sapce__building-wrap list-unstyled cycle-slideshow"
|
||
|
|
data-list="buildings"
|
||
|
|
data-level="0"
|
||
|
|
data-cycle-slide=".i-space__building"
|
||
|
|
>
|
||
|
|
<li class="i-space__building">
|
||
|
|
<span class="i-space__img-wrap">
|
||
|
|
<img src="{{building-image}}" alt="{{alt-title}}" class="i-space__building-img img-responsive">
|
||
|
|
</span>
|
||
|
|
<span class="i-space__building-title">{{building-title}}</span>
|
||
|
|
<ol class="i-space__floors list-unstyled" data-list="floors" data-level="1">
|
||
|
|
<li class="i-space__floor-item">
|
||
|
|
<a class="i-space__floor-link" href="{{link_to_show}}">
|
||
|
|
<span class="i-space__floor-name">{{floor-title}}</span>
|
||
|
|
<img src="{{floor-image}}" alt="" class="i-space__floor-img" alt="{{alt-title}}">
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ol>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="background-div">
|
||
|
|
<ul data-list="buildings" data-level="0">
|
||
|
|
<li class="background-image" style="background-image: url({{building-image}});"></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
(function(){
|
||
|
|
var body = document.body;
|
||
|
|
var $img = $('.i-space__img-wrap');
|
||
|
|
var $this = null;
|
||
|
|
var activeCls = 'active';
|
||
|
|
var floorActiveCls = 'floors--active';
|
||
|
|
var windowWidth = $(window).width();
|
||
|
|
var breakpointExtraSmall = 480;
|
||
|
|
|
||
|
|
$img.on('click', function(e) {
|
||
|
|
e.stopPropagation();
|
||
|
|
$this = $(this);
|
||
|
|
var floors = $(this).parents(".i-space__building").find("ol li");
|
||
|
|
if (floors.length == 1){
|
||
|
|
window.location.href = floors.first().find("a").attr("href");
|
||
|
|
} else {
|
||
|
|
|
||
|
|
if (windowWidth < breakpointExtraSmall) {
|
||
|
|
$('.i-space__floors')
|
||
|
|
.removeClass(activeCls);
|
||
|
|
|
||
|
|
if (!$this.hasClass(activeCls)) {
|
||
|
|
$this
|
||
|
|
.addClass(activeCls)
|
||
|
|
.siblings('.i-space__floors')
|
||
|
|
.addClass(activeCls);
|
||
|
|
} else {
|
||
|
|
$this
|
||
|
|
.removeClass(activeCls)
|
||
|
|
.siblings('.i-space__floors')
|
||
|
|
.removeClass(activeCls);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
$('.i-space__floors')
|
||
|
|
.removeClass(activeCls);
|
||
|
|
|
||
|
|
if (!$this.hasClass(activeCls)) {
|
||
|
|
$this
|
||
|
|
.addClass(activeCls)
|
||
|
|
.siblings('.i-space__floors')
|
||
|
|
.addClass(activeCls);
|
||
|
|
} else {
|
||
|
|
$this
|
||
|
|
.removeClass(activeCls)
|
||
|
|
.siblings('.i-space__floors')
|
||
|
|
.removeClass(activeCls);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$(document).on('click', function() {
|
||
|
|
$('.i-space__img-wrap, .i-space__floors').removeClass(activeCls);
|
||
|
|
});
|
||
|
|
|
||
|
|
}());
|
||
|
|
</script>
|