109 lines
2.9 KiB
HTML
109 lines
2.9 KiB
HTML
|
|
{% extends "base.html" %}
|
|
{% block styles %}
|
|
{{super()}}
|
|
|
|
<style>
|
|
.selected img {
|
|
opacity: 0.5;
|
|
}
|
|
</style>
|
|
|
|
{% endblock %}
|
|
{% block content %}
|
|
|
|
<div class="container">
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 hidden-xs hidden-sm">
|
|
<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 i in range(images) %}
|
|
<div class="item {% if i==0 %}active{% endif %}" data-slide-number="{{i}}">
|
|
<a href="{{url_for('cat_photo', category=category, num=i) }}">
|
|
<img src=" {{ url_for('slides', category=category, num=i) }}" class="img-responsive">
|
|
</a>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel-footer" id="slider-thumbs">
|
|
<ul class="list-inline">
|
|
{% for i in range(images) %}
|
|
<li>
|
|
<a id="carousel-selector-{{i}}" class="thumbnail {% if i==0 %}selected{% endif %}" style="width: 100px; height=100px;">
|
|
<img src="{{ url_for('thumbnails', category=category, num=i) }}" width=100 height=100>
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="panel panel-default">
|
|
<!-- <div class="panel-heading"> -->
|
|
<!-- <div class="panel-title"> <h2>{{ category }}</h2> </div> -->
|
|
<!-- </div> -->
|
|
<div class="panel-body">
|
|
{{ presentation | markdown }}
|
|
</div>
|
|
<div class="panel-footer">
|
|
<a href="mailto:order@designbyloven.se" class="btn btn-default"><span class="glyphicon glyphicon-envelope"></span> Beställ</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 visible-xs visible-sm">
|
|
<div class="well">
|
|
<ul class="list-inline">
|
|
{% for i in range(images) %}
|
|
<li>
|
|
<a class="thumbnail" style="width:100px; height=100px;" href="{{ url_for('cat_photo', category=category, num=i) }}">
|
|
<img src="{{ url_for('thumbnails', category=category, num=i) }}" width=100 height=100>
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</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 %}
|