Mercurial > sat_legacy_website

comparison templates/sat_website/gallery.html @ 54:d54f2f09a73a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
fixes displaying two carousels on the same page
author souliane <souliane@mailoo.org>
date Tue, 05 May 2015 11:03:18 +0200
parents a18800261cf6
children 746e53efc188
comparison
equal deleted inserted replaced
53:84c2e20d3de1 54:d54f2f09a73a
20 20
21 {% load i18n %} 21 {% load i18n %}
22 {% load staticfiles %} 22 {% load staticfiles %}
23 {% load utils %} 23 {% load utils %}
24 24
25 <div id="carousel-screenshots" class="carousel slide" data-ride="carousel" data-interval="0"> 25 <div id="carousel-{{ name }}" class="carousel slide my-carousel" data-ride="carousel" data-interval="0">
26 {% if screenshots|length > 9 %} 26 {% if screenshots|length > 9 %}
27 <ol class="carousel-indicators"> 27 <ol class="carousel-indicators">
28 {% for row in screenshots|buffer:9 %} 28 {% for row in screenshots|buffer:9 %}
29 <li data-target="#carousel-screenshots" data-slide-to="{{ forloop.counter0 }}"{% if not forloop.counter0 %} class="active"{% endif %}></li> 29 <li data-target="#carousel-{{ name }}" data-slide-to="{{ forloop.counter0 }}"{% if not forloop.counter0 %} class="active"{% endif %}></li>
30 {% endfor %} 30 {% endfor %}
31 </ol> 31 </ol>
32 {% endif %} 32 {% endif %}
33 <div class="carousel-inner" role="listbox"> 33 <div class="carousel-inner" role="listbox">
34 {% for row in screenshots|buffer:9 %} 34 {% for row in screenshots|buffer:9 %}
45 </div> 45 </div>
46 {% endfor %} 46 {% endfor %}
47 </div> 47 </div>
48 {% endfor %} 48 {% endfor %}
49 {% if screenshots|length > 9 %} 49 {% if screenshots|length > 9 %}
50 <a class="left carousel-control" href="#carousel-screenshots" role="button" data-slide="prev"> 50 <a class="left carousel-control" href="#carousel-{{ name }}" role="button" data-slide="prev">
51 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 51 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
52 <span class="sr-only">Previous</span> 52 <span class="sr-only">Previous</span>
53 </a> 53 </a>
54 <a class="right carousel-control" href="#carousel-screenshots" role="button" data-slide="next"> 54 <a class="right carousel-control" href="#carousel-{{ name }}" role="button" data-slide="next">
55 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 55 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
56 <span class="sr-only">Next</span> 56 <span class="sr-only">Next</span>
57 </a> 57 </a>
58 {% endif %} 58 {% endif %}
59 </div> 59 </div>
60 </div> 60 </div>
61 61
62 <div class="modal" id="modal-screenshots" role="dialog"> 62 <div class="modal my-modal" id="modal-{{ name }}" role="dialog">
63 <div class="modal-dialog"> 63 <div class="modal-dialog">
64 <div class="modal-content"> 64 <div class="modal-content">
65 <div class="modal-header"> 65 <div class="modal-header">
66 <button class="close" type="button" data-dismiss="modal">×</button> 66 <button class="close" type="button" data-dismiss="modal">×</button>
67 </div> 67 </div>
68 <div class="modal-body"> 68 <div class="modal-body">
69 <div id="carousel-screenshots-modal" class="carousel slide" data-ride="carousel" data-interval="0"> 69 <div id="carousel-{{ name }}-modal" class="carousel slide my-carousel-modal" data-ride="carousel" data-interval="0">
70 {% if screenshots|length > 1 %} 70 {% if screenshots|length > 1 %}
71 <ol class="carousel-indicators"> 71 <ol class="carousel-indicators">
72 {% for screenshot in screenshots %} 72 {% for screenshot in screenshots %}
73 <li data-target="#carousel-screenshots-modal" data-slide-to="{{ forloop.counter0 }}"{% if not forloop.counter0 %} class="active"{% endif %}></li> 73 <li data-target="#carousel-{{ name }}-modal" data-slide-to="{{ forloop.counter0 }}"{% if not forloop.counter0 %} class="active"{% endif %}></li>
74 {% endfor %} 74 {% endfor %}
75 </ol> 75 </ol>
76 {% endif %} 76 {% endif %}
77 <div class="carousel-inner" role="listbox"> 77 <div class="carousel-inner" role="listbox">
78 {% for screenshot in screenshots %} 78 {% for screenshot in screenshots %}
90 </div> 90 </div>
91 </div> 91 </div>
92 {% endfor %} 92 {% endfor %}
93 </div> 93 </div>
94 {% if screenshots|length > 1 %} 94 {% if screenshots|length > 1 %}
95 <a class="left carousel-control" href="#carousel-screenshots-modal" data-slide="prev"> 95 <a class="left carousel-control" href="#carousel-{{ name }}-modal" data-slide="prev">
96 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 96 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
97 <span class="sr-only">Previous</span> 97 <span class="sr-only">Previous</span>
98 </a> 98 </a>
99 <a class="right carousel-control" href="#carousel-screenshots-modal" data-slide="next"> 99 <a class="right carousel-control" href="#carousel-{{ name }}-modal" data-slide="next">
100 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 100 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
101 <span class="sr-only">Next</span> 101 <span class="sr-only">Next</span>
102 </a> 102 </a>
103 {% endif %} 103 {% endif %}
104 </div> 104 </div>
105 </div> 105 </div>
106 </div> 106 </div>
107 </div> 107 </div>
108 </div> 108 </div>
109
110 <script>
111 $(document).ready(function() {
112 // open the big gallery when a thumbnail is clicked
113 $('#carousel-{{ name }} .thumbnail').click(function() {
114 $('#modal-{{ name }}').modal('show');
115 index = parseInt($(this).attr('index'));
116 $('#carousel-{{ name }}-modal').carousel(index);
117 // start playing the big video
118 if ($(this)[0].tagName == 'VIDEO') {
119 $('#carousel-{{ name }}-modal img, #carousel-{{ name }}-modal video')[index].play();
120 }
121 });
122
123 // thumbail's video starts playing when clicked, pause it
124 $('#carousel-{{ name }} video.thumbnail').each(function(index) {
125 $(this).on('play', function(e) { $(this)[0].pause(); });
126 });
127
128 });
129 </script>