Publicerad - Version 1.0

templates/category.html

@@ -0,0 +1,108 @@
+
+{% 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>&nbsp;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 %}