Branch: refs/heads/master Author: Enrico Tröger enrico.troeger@uvena.de Committer: Enrico Tröger enrico.troeger@uvena.de Date: Sun, 19 May 2019 21:37:00 UTC Commit: f0d83081d29eac8cd617e9d366554fbb58418811 https://github.com/geany/www.geany.org/commit/f0d83081d29eac8cd617e9d366554f...
Log Message: ----------- Add a carousel to the screenshots page
Modified Paths: -------------- geany/templates/pages/documentation/screenshots.html
Modified: geany/templates/pages/documentation/screenshots.html 114 lines changed, 114 insertions(+), 0 deletions(-) =================================================================== @@ -0,0 +1,114 @@ +{% extends "pages/page.html" %} + +{% load mezzanine_tags staticfiles %} + +{% block extra_css %} +<link rel="stylesheet" href="{% static "mezzanine/css/magnific-popup.css" %}"> +<style> + .img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img { + max-height: 400px; + } + .carousel-caption { + position: relative; + left: auto; + right: auto; + color: inherit; + text-shadow: none; + padding-bottom: 0px; + } + .carousel-indicators { + bottom: -30px; + top: inherit; + left: 50%; + right: inherit; + width: 60%; + } + .carousel-inner { + margin-bottom: 50px; + } + .carousel-control.left, .carousel-control.right { + background-image: none; + color: inherit; + } +</style> +{% endblock extra_css %} + +{% block main %} +{{ block.super }} + +{{ page.gallery.content|richtext_filters }} + + +{% with page.gallery.images.all as images %} +<div id="gallery-carousel" class="carousel slide screenshots-gallery" data-ride="carousel"> + <div class="carousel-inner gallery"> + {% for image in images %} + <div class="item{% if forloop.first %} active{% endif %}"> + <a class="thumbnail" rel="#image-{{ image.id }}" title="{{ image.description }}" href="{{ image.file.url }}"> + <img + class="img-responsive" + src="{{ MEDIA_URL }}{% thumbnail image.file 600 0 %}" + alt="{{ image.description }}"> + </a> + <div class="carousel-caption"> + <p>{{ image.description }}</p> + </div> + </div> + {% endfor %} + </div> + + <!-- Controls --> + <div> + <a class="left carousel-control" href="#gallery-carousel" 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="#gallery-carousel" role="button" data-slide="next"> + <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> + <span class="sr-only">Next</span> + </a> + <ol class="center carousel-indicators"> + {% for image in images %} + <li + data-target="#gallery-carousel" + data-slide-to="{{ forloop.counter0 }}" + {% if forloop.first %} class="active"{% endif %}> + </li> + {% endfor %} + </ol> + </div> +</div> +{% endwith %} + + + + +<div class="gallery row"> +{% with page.gallery.images.all as images %} +{% for image in images %} +<div class="col-xs-4 col-sm-3"> + <a class="thumbnail" rel="#image-{{ image.id }}" title="{{ image.description }}" href="{{ image.file.url }}"> + <img class="img-responsive" src="{{ MEDIA_URL }}{% thumbnail image.file 131 75 %}"> + </a> +</div> +{% endfor %} +{% endwith %} +</div> +{% endblock %} + +{% block extra_js %} +{{ block.super }} +<script src="{% static "mezzanine/js/magnific-popup.js" %}"></script> +<script> +$(document).ready(function() { + $('.gallery').magnificPopup({ + delegate: 'a', + type: 'image', + gallery: { + enabled: true, + } + }); + $('#gallery-carousel').carousel(); +}); +</script> +{% endblock %}
-------------- This E-Mail was brought to you by github_commit_mail.py (Source: https://github.com/geany/infrastructure).