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

added slickLightbox function to mobile view

Browse source
This commit is contained in:
khashashin 2017-09-14 14:53:19 +02:00
parent 91f74955bc
commit f0793f5518
4 changed files with 10 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -18,7 +18,7 @@
{% for val in block.value %} {% for val in block.value %}
<div class="item"> <div class="item">
{% image val.image fill-700x400 as entry_thumb %} {% image val.image fill-700x400 as entry_thumb %}
<image style="background-image:url({{ entry_thumb.url }})"> <image data-src="{{ entry_thumb.url }}" data-caption="{{ val.caption }}" style="background-image:url({{ entry_thumb.url }})">
</div> </div>
{% endfor %} {% endfor %}
{% endfor %} {% endfor %}

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

@ -42,7 +42,6 @@ $slider-nav: 200px;
.arrow:before { .arrow:before {
font-size: 45px; font-size: 45px;
/* border: 2px solid grey; */
padding: 58px 0 88px 0; padding: 58px 0 88px 0;
background-color: rgba(128, 128, 128, 0.57); background-color: rgba(128, 128, 128, 0.57);
margin: 0; margin: 0;

2
publichealth/static/css/modules/_banner.scss
View file

@ -128,7 +128,6 @@ $banner-height: 700px;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
opacity: 1; opacity: 1;
} }
.carousel-caption { .carousel-caption {
background-color: white; background-color: white;
@ -217,5 +216,4 @@ $gallery-height: 550px;
.carousel-caption { left: 0px; right: 0px; overflow-x: hidden; } .carousel-caption { left: 0px; right: 0px; overflow-x: hidden; }
.carousel-inner { margin-bottom: 0px; } .carousel-inner { margin-bottom: 0px; }
} }
//#banner { margin-top: 100px; }
} }

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

@ -30,9 +30,12 @@ $(document).ready(function() {
}).slickLightbox({ }).slickLightbox({
src: 'data-src', src: 'data-src',
itemSelector: 'img', itemSelector: 'img',
caption: 'caption' caption: 'caption',
captionPosition: 'bottom'
}); });
} }
// Slider navigation
$('.slider-nav').slick({ $('.slider-nav').slick({
slidesToShow: 3, slidesToShow: 3,
slidesToScroll: 1, slidesToScroll: 1,
@ -40,6 +43,7 @@ $(document).ready(function() {
asNavFor: '.carousel-gallery', asNavFor: '.carousel-gallery',
centerMode: true, centerMode: true,
focusOnSelect: true, focusOnSelect: true,
// Responsive settings
responsive: [ responsive: [
{ {
breakpoint: 768, breakpoint: 768,
@ -62,6 +66,10 @@ $(document).ready(function() {
], ],
prevArrow: '<span class="arrow left glyphicon glyphicon-chevron-left" aria-hidden="true">Previous</span>', 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>', nextArrow: '<span class="arrow right glyphicon glyphicon-chevron-right" aria-hidden="true">Next</span>',
}).slickLightbox({
src: 'data-src',
itemSelector: 'img',
caption: 'caption'
}); });