ungleich-public/public-health-ch
6
1
Fork 0
Code Issues Pull requests 1 Projects Releases Wiki Activity

gallery responsive, added button background

Browse source
This commit is contained in:
khashashin 2017-09-14 11:05:21 +02:00
parent bf88bdeeb7
commit 91f74955bc
3 changed files with 46 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
publichealth/home/templates/home/photo_gallery.html
View file

@ -2,13 +2,13 @@
<!-- Gallery Template -->
<div class="carousel-inner carousel-gallery slick" role="listbox">
<div id="responsive" class="carousel-inner carousel-gallery slick" role="listbox">
{% for block in page.gallery %}
{% for val in block.value %}
<div class="item">
{% image val.image fill-700x400 as entry_thumb %}
{% image val.image original as entry_photo %}
<image data-src="{{ entry_photo.url }}" style="background-image:url({{ entry_thumb.url }})">
<image data-src="{{ entry_photo.url }}" data-caption="{{ val.caption }}" style="background-image:url({{ entry_thumb.url }})">
</div>
{% endfor %}
{% endfor %}
@ -18,8 +18,7 @@
{% for val in block.value %}
<div class="item">
{% image val.image fill-700x400 as entry_thumb %}
{% image val.image original as entry_photo %}
<image data-src="{{ entry_photo.url }}" style="background-image:url({{ entry_thumb.url }})">
<image style="background-image:url({{ entry_thumb.url }})">
</div>
{% endfor %}
{% endfor %}

22
publichealth/static/css/main.scss
View file

@ -14,9 +14,21 @@ body {
@include mid-screen($screen-sm-min, $screen-md-min) {
body { margin-top: 200px; }
}
@include max-screen(1000px) {
.carousel-inner .item {
margin-bottom: 0px;
height: auto;
}
.slick-dots { display: none !important; }
}
@include max-screen(480px) {
#responsive { display: none !important; }
.arrow:before { display: none; }
}
$slider-nav: 200px;
.slider-nav {
padding-bottom: 2.5em;
margin-top: 2.5em;
.item {
height: $slider-nav;
@ -27,3 +39,11 @@ $slider-nav: 200px;
}
}
}
.arrow:before {
font-size: 45px;
/* border: 2px solid grey; */
padding: 58px 0 88px 0;
background-color: rgba(128, 128, 128, 0.57);
margin: 0;
}

25
publichealth/static/js/main.js
View file

@ -30,17 +30,36 @@ $(document).ready(function() {
}).slickLightbox({
src: 'data-src',
itemSelector: 'img',
// lazy: true,
// useHistoryApi: 'true'
caption: 'caption'
});
}
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
infinite: true,
asNavFor: '.carousel-gallery',
dots: true,
centerMode: true,
focusOnSelect: true,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '30px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '30px',
slidesToShow: 1
}
}
],
prevArrow: '<span class="arrow left glyphicon glyphicon-chevron-left" aria-hidden="true">Previous</span>',
nextArrow: '<span class="arrow right glyphicon glyphicon-chevron-right" aria-hidden="true">Next</span>',
});