Mercurial > sat_legacy_website
changeset 54:d54f2f09a73a
fixes displaying two carousels on the same page
| author | souliane <souliane@mailoo.org> |
|---|---|
| date | Tue, 05 May 2015 11:03:18 +0200 |
| parents | 84c2e20d3de1 |
| children | a1e457ac6871 |
| files | static/css/sat_website.css static/js/sat_website.js templates/sat_website/base.html templates/sat_website/gallery.html templates/sat_website/screenshots.html |
| diffstat | 5 files changed, 41 insertions(+), 34 deletions(-) [+] |
line wrap: on
line diff
--- a/static/css/sat_website.css Tue May 05 09:47:55 2015 +0200 +++ b/static/css/sat_website.css Tue May 05 11:03:18 2015 +0200 @@ -48,11 +48,13 @@ .carousel-caption { padding: 10px; - bottom: -55px; + bottom: -75px; color: black; font-style: italic; font-size: 14px; text-shadow: none; + left: 0px; + width: 100%; } .carousel-indicators { @@ -141,23 +143,23 @@ border-bottom-style: none; } -#carousel-screenshots img, #carousel-screenshots video { +.my-carousel img, .my-carousel video { cursor: pointer; height: 200px; width: auto; display: table-cell; } -#modal-screenshots .modal-dialog { +#my-modal .modal-dialog { max-width: 90%; width: auto; } -#carousel-screenshots-modal .carousel-inner { - padding-bottom: 80px; +.my-carousel-modal .carousel-inner { + padding-bottom: 100px; } -#carousel-screenshots-modal img, #carousel-screenshots-modal video { +.my-carousel-modal img, .my-carousel-modal video { margin: auto; }
--- a/static/js/sat_website.js Tue May 05 09:47:55 2015 +0200 +++ b/static/js/sat_website.js Tue May 05 11:03:18 2015 +0200 @@ -14,20 +14,4 @@ } }); - // open the big gallery when a thumbnail is clicked - $('#carousel-screenshots .thumbnail').click(function() { - $('#modal-screenshots').modal('show'); - index = parseInt($(this).attr('index')); - $('#carousel-screenshots-modal').carousel(index); - // start playing the big video - if ($(this)[0].tagName == 'VIDEO') { - $('#carousel-screenshots-modal img, #carousel-screenshots-modal video')[index].play(); - } - }); - - // thumbail's video starts playing when clicked, pause it - $('#carousel-screenshots video.thumbnail').each(function(index) { - $(this).on('play', function(e) { $(this)[0].pause(); }); - }); - });
--- a/templates/sat_website/base.html Tue May 05 09:47:55 2015 +0200 +++ b/templates/sat_website/base.html Tue May 05 11:03:18 2015 +0200 @@ -56,8 +56,8 @@ </div> </nav> + <script src="{% static "js/jquery.min.js" %}"></script> {% block content %}{% endblock %} - <script src="{% static "js/jquery.min.js" %}"></script> <script src="{% static "bootstrap/js/bootstrap.min.js" %}"></script> <script src="{% static "js/sat_website.js" %}"></script> </body>
--- a/templates/sat_website/gallery.html Tue May 05 09:47:55 2015 +0200 +++ b/templates/sat_website/gallery.html Tue May 05 11:03:18 2015 +0200 @@ -22,11 +22,11 @@ {% load staticfiles %} {% load utils %} -<div id="carousel-screenshots" class="carousel slide" data-ride="carousel" data-interval="0"> +<div id="carousel-{{ name }}" class="carousel slide my-carousel" data-ride="carousel" data-interval="0"> {% if screenshots|length > 9 %} <ol class="carousel-indicators"> {% for row in screenshots|buffer:9 %} - <li data-target="#carousel-screenshots" data-slide-to="{{ forloop.counter0 }}"{% if not forloop.counter0 %} class="active"{% endif %}></li> + <li data-target="#carousel-{{ name }}" data-slide-to="{{ forloop.counter0 }}"{% if not forloop.counter0 %} class="active"{% endif %}></li> {% endfor %} </ol> {% endif %} @@ -47,11 +47,11 @@ </div> {% endfor %} {% if screenshots|length > 9 %} - <a class="left carousel-control" href="#carousel-screenshots" role="button" data-slide="prev"> + <a class="left carousel-control" href="#carousel-{{ name }}" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> - <a class="right carousel-control" href="#carousel-screenshots" role="button" data-slide="next"> + <a class="right carousel-control" href="#carousel-{{ name }}" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> @@ -59,18 +59,18 @@ </div> </div> -<div class="modal" id="modal-screenshots" role="dialog"> +<div class="modal my-modal" id="modal-{{ name }}" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button class="close" type="button" data-dismiss="modal">×</button> </div> <div class="modal-body"> - <div id="carousel-screenshots-modal" class="carousel slide" data-ride="carousel" data-interval="0"> + <div id="carousel-{{ name }}-modal" class="carousel slide my-carousel-modal" data-ride="carousel" data-interval="0"> {% if screenshots|length > 1 %} <ol class="carousel-indicators"> {% for screenshot in screenshots %} - <li data-target="#carousel-screenshots-modal" data-slide-to="{{ forloop.counter0 }}"{% if not forloop.counter0 %} class="active"{% endif %}></li> + <li data-target="#carousel-{{ name }}-modal" data-slide-to="{{ forloop.counter0 }}"{% if not forloop.counter0 %} class="active"{% endif %}></li> {% endfor %} </ol> {% endif %} @@ -92,11 +92,11 @@ {% endfor %} </div> {% if screenshots|length > 1 %} - <a class="left carousel-control" href="#carousel-screenshots-modal" data-slide="prev"> + <a class="left carousel-control" href="#carousel-{{ name }}-modal" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> - <a class="right carousel-control" href="#carousel-screenshots-modal" data-slide="next"> + <a class="right carousel-control" href="#carousel-{{ name }}-modal" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> @@ -106,3 +106,24 @@ </div> </div> </div> + +<script> +$(document).ready(function() { + // open the big gallery when a thumbnail is clicked + $('#carousel-{{ name }} .thumbnail').click(function() { + $('#modal-{{ name }}').modal('show'); + index = parseInt($(this).attr('index')); + $('#carousel-{{ name }}-modal').carousel(index); + // start playing the big video + if ($(this)[0].tagName == 'VIDEO') { + $('#carousel-{{ name }}-modal img, #carousel-{{ name }}-modal video')[index].play(); + } + }); + + // thumbail's video starts playing when clicked, pause it + $('#carousel-{{ name }} video.thumbnail').each(function(index) { + $(this).on('play', function(e) { $(this)[0].pause(); }); + }); + +}); +</script> \ No newline at end of file
--- a/templates/sat_website/screenshots.html Tue May 05 09:47:55 2015 +0200 +++ b/templates/sat_website/screenshots.html Tue May 05 11:03:18 2015 +0200 @@ -30,7 +30,7 @@ </h5> <div class="info"> {% trans "These media concern the basic utilisation SàT through graphical frontends like Libervia." %} - {% include "sat_website/gallery.html" with screenshots=screenshots %} + {% include "sat_website/gallery.html" with screenshots=screenshots name="media" %} </div> </div> @@ -40,7 +40,7 @@ </h5> <div class="info"> {% trans "These media concern the advanced utilisation and frontends of SàT, including administration tasks and experimental features." %} - {% include "sat_website/gallery.html" with screenshots=screenshots_tech %} + {% include "sat_website/gallery.html" with screenshots=screenshots_tech name="media_tech" %} </div> </div>