121 lines
3.8 KiB
HTML
121 lines
3.8 KiB
HTML
{% extends "base.html" %}
|
|
{% block content %}
|
|
|
|
<div class="container">
|
|
|
|
<div class="row"> <!-- Content row -->
|
|
<div class="col-md-6 hidden-xs hidden-sm"> <!-- Slideshow -->
|
|
<div class="panel panel-default">
|
|
<div class="panel-body">
|
|
|
|
<div id="myCarousel" class="carousel slide" data-ride="carousel">
|
|
<div class="carousel-inner" role="listbox">
|
|
{% for p in page.all_photos %}
|
|
<div class="item {% if loop.index==1 %}active{% endif %}" data-slide-number="{{ loop.index-1 }}">
|
|
{% if page.endpoint %}
|
|
<a href="{{ p.url }}" title="{{ p.alt }}">
|
|
{% else %}
|
|
<a href="{{ p.page }}" title="{{ p.alt }}">
|
|
{% endif %}
|
|
<img src=" {{ p.slide }}" class="img-responsive" alt="{{ p.alt }}">
|
|
</a>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if page.endpoint %}
|
|
<div class="panel-footer" id="slider-thumbs">
|
|
<ul class="list-inline">
|
|
{% for p in page.all_photos %}
|
|
<li>
|
|
<a id="carousel-selector-{{ loop.index-1 }}" class="thumbnail {% if loop.index==1 %}selected{% endif %}" style="width: 100px; height=100px;">
|
|
<img src="{{ p.thumbnail }}" width=100 height=100 alt="{{ p.alt }}">
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div> <!-- Slideshow -->
|
|
|
|
<div class="col-md-6 col-sm-12"> <!-- Content -->
|
|
<div class="panel panel-default">
|
|
<div class="panel-body">
|
|
<div class="panel-title"> <h2>{{ page.title }}</h2> </div>
|
|
{{ page.description | markdown }}
|
|
</div>
|
|
<div class="panel-footer">
|
|
{% if page.endpoint %}
|
|
<a href="mailto:order@designbyloven.se" class="btn btn-default"><span class="glyphicon glyphicon-envelope"></span> Beställ</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div> <!-- Content -->
|
|
</div> <!-- Content row -->
|
|
|
|
{% if page.endpoint %}
|
|
<div class="row"> <!-- Slideshow for small screens -->
|
|
<div class="col-md-6 visible-xs visible-sm">
|
|
<div class="well">
|
|
<ul class="list-inline">
|
|
{% for p in page.photos %}
|
|
<li>
|
|
<a class="thumbnail" style="width:100px; height=100px;" href="{{ p.url }}">
|
|
<img src="{{ p.thumbnail }}" width=100 height=100 alt="{{ p.alt }}">
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div> <!-- Slideshow for small screens -->
|
|
{% else %}
|
|
<div class="row"> <!-- Subsection list !-->
|
|
{% for c in page.children %}
|
|
<div class="col-xs-6 col-md-3">
|
|
<div class="thumbnail">
|
|
<div class="caption" style="padding: 0;">
|
|
<div class="text-center"><a href="{{ c.permalink }}"><h3>{{ c.title }}</h3></a></div>
|
|
</div>
|
|
<a href="{{ c.permalink }}"><img src="{{ c.thumbnail.thumbnail }}" class="img-responsive"></a>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div> <!-- Subsection list -->
|
|
{% endif %}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
{{super()}}
|
|
<script>
|
|
$('#myCarousel').carousel({
|
|
interval: 5000
|
|
});
|
|
|
|
$('[id^=carousel-selector-]').click(function() {
|
|
var id_selector = $(this).attr("id");
|
|
var id = id_selector.substr(id_selector.length -1);
|
|
id = parseInt(id);
|
|
$('#myCarousel').carousel(id);
|
|
$('[id^=carousel-selector-]').removeClass('selected');
|
|
$(this).addClass('selected');
|
|
});
|
|
|
|
$('#myCarousel').on('slid.bs.carousel', function (e) {
|
|
var id = $('.item.active').data('slide-number');
|
|
id = parseInt(id);
|
|
$('[id^=carousel-selector-]').removeClass('selected');
|
|
$('[id=carousel-selector-'+id+']').addClass('selected');
|
|
});
|
|
</script>
|
|
{% endblock %}
|