Gallery fix
This commit is contained in:
Oleg Lavrovsky
parent
89bae40de6
commit
dd377c33ee
|
|
@ -15,7 +15,7 @@
|
|||
],
|
||||
"dependencies": {
|
||||
"bootstrap-sass": "bootstrap-sass-official#^3.3.7",
|
||||
"slick-carousel": "^1.6.0",
|
||||
"slick-carousel": "^1.4.1",
|
||||
"slick-lightbox": "^0.2.10"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,14 @@
|
|||
{% extends "base.html" %}
|
||||
{% load wagtailcore_tags %}
|
||||
{% load static wagtailcore_tags %}
|
||||
|
||||
{% block body_class %}template-{{ self.get_verbose_name|slugify }}{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<link rel="stylesheet" type="text/x-scss" href="{% static 'libs/slick-carousel/slick/slick.scss' %}">
|
||||
<link rel="stylesheet" type="text/x-scss" href="{% static 'libs/slick-carousel/slick/slick-theme.scss' %}">
|
||||
<link rel="stylesheet" type="text/x-scss" href="{% static 'libs/slick-lightbox/src/styles/slick-lightbox.sass' %}">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section id="news-details" class="article-page">
|
||||
<div class="container">
|
||||
|
|
|
|||
|
|
@ -1,38 +1,15 @@
|
|||
{% load compress static wagtailcore_tags wagtailimages_tags %}
|
||||
{% compress js %}
|
||||
<script src="{% static 'libs/jquery/dist/jquery.js' %}"></script>
|
||||
<script src="{% static 'libs/slick-carousel/slick/slick.min.js' %}"></script>
|
||||
<script src="{% static 'libs/slick-lightbox/dist/slick-lightbox.js' %}"></script>
|
||||
<script type="text/javascript" src="{% static 'js/main.js' %}"></script>
|
||||
{% endcompress %}
|
||||
|
||||
{% block extra_css %}
|
||||
<link rel="stylesheet" type="text/x-scss" href="{% static 'libs/slick-carousel/slick/slick.scss' %}">
|
||||
<link rel="stylesheet" type="text/x-scss" href="{% static 'libs/slick-carousel/slick/slick-theme.scss' %}">
|
||||
<link rel="stylesheet" type="text/x-scss" href="{% static 'libs/slick-lightbox/src/styles/slick-lightbox.sass' %}">
|
||||
{% endblock %}
|
||||
|
||||
<!-- Gallery Template -->
|
||||
|
||||
<div id="lazy" class="row">
|
||||
<div class="carousel-inner carousel-gallery slick" role="listbox">
|
||||
{% for block in page.gallery %}
|
||||
{% for val in block.value %}
|
||||
|
||||
{% image val.image height-400 as carouselimagedata %}
|
||||
<a class="thumbnail" href="{{ carouselimagedata.url }}" data-caption="{{ val.caption }}">
|
||||
{% image val.image height-400 %}
|
||||
</a>
|
||||
|
||||
<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 }})">
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
$('#lazy').slickLightbox({
|
||||
src: 'src',
|
||||
itemSelector: 'img',
|
||||
lazy: true,
|
||||
useHistoryApi: 'true'
|
||||
});
|
||||
console.log($('#lazy').slickLightbox);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -93,49 +93,6 @@ $banner-height: 700px;
|
|||
padding-top: 0 !important;
|
||||
padding-bottom: 0em;
|
||||
|
||||
.carousel-inner {
|
||||
padding-bottom: 2.5em;
|
||||
|
||||
.item {
|
||||
height: $banner-height;
|
||||
position: relative;
|
||||
background-color: white;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: $banner-height;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
opacity: 1;
|
||||
|
||||
}
|
||||
.carousel-caption {
|
||||
background-color: white;
|
||||
padding: 2em;
|
||||
bottom: -2em;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
|
||||
|
||||
h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.slick-dots {
|
||||
bottom: 50px;
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
button {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
h3, p, button {
|
||||
color: #333;
|
||||
text-shadow: none;
|
||||
|
|
@ -155,6 +112,49 @@ $banner-height: 700px;
|
|||
margin-top: 2em;
|
||||
}
|
||||
}
|
||||
.carousel-inner {
|
||||
padding-bottom: 2.5em;
|
||||
|
||||
.item {
|
||||
height: $banner-height;
|
||||
position: relative;
|
||||
background-color: white;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: $banner-height;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
opacity: 1;
|
||||
|
||||
}
|
||||
.carousel-caption {
|
||||
background-color: white;
|
||||
padding: 2em;
|
||||
bottom: -2em;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
|
||||
|
||||
h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.slick-dots {
|
||||
bottom: 50px;
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
button {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.arrow {
|
||||
color: white;
|
||||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
|
||||
|
|
@ -192,6 +192,21 @@ $banner-height: 700px;
|
|||
color: inherit;
|
||||
}
|
||||
|
||||
// Carousel gallery
|
||||
$gallery-height: 400px;
|
||||
.carousel-inner {
|
||||
padding-bottom: 2.5em;
|
||||
|
||||
.item {
|
||||
height: $gallery-height;
|
||||
|
||||
img {
|
||||
width: 100%; // TODO: reduce width to try to use the Variable Width slick configuration
|
||||
height: $gallery-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include max-screen(1000px) {
|
||||
.slick-dots { display: none !important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,18 +5,40 @@ $(document).ready(function() {
|
|||
return this.hostname && this.hostname !== location.hostname;
|
||||
}).attr('target', '_blank');
|
||||
|
||||
// Initialise front page carousel component
|
||||
$('.carousel-inner.slick').slick({
|
||||
autoplay: true,
|
||||
autoplaySpeed: '10000',
|
||||
dots: true,
|
||||
infinite: true,
|
||||
speed: 1000,
|
||||
fade: true,
|
||||
cssEase: 'linear',
|
||||
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>',
|
||||
});
|
||||
if ($('#carousel-banner').length) {
|
||||
// Initialise front page carousel component
|
||||
$('.carousel-inner').slick({
|
||||
autoplay: true,
|
||||
autoplaySpeed: '10000',
|
||||
dots: true,
|
||||
infinite: true,
|
||||
speed: 1000,
|
||||
fade: true,
|
||||
cssEase: 'linear',
|
||||
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>',
|
||||
});
|
||||
|
||||
} else if ($('.carousel-gallery').length) {
|
||||
// Load gallery component
|
||||
$('.carousel-gallery').slick({
|
||||
autoplay: false,
|
||||
dots: false,
|
||||
fade: false,
|
||||
infinite: true,
|
||||
slidesToShow: 1,
|
||||
centerMode: true,
|
||||
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>',
|
||||
}).slickLightbox({
|
||||
src: 'data-src',
|
||||
itemSelector: 'img',
|
||||
// lazy: true,
|
||||
// useHistoryApi: 'true'
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Pastel colors on live news
|
||||
// $('.feedpage-body .panel').each(function() {
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@
|
|||
<script src="{% static 'libs/jquery/dist/jquery.js' %}"></script>
|
||||
<script src="{% static 'libs/bootstrap-sass/assets/javascripts/bootstrap.min.js' %}"></script>
|
||||
<script src="{% static 'libs/slick-carousel/slick/slick.min.js' %}"></script>
|
||||
<script src="{% static 'libs/slick-lightbox/dist/slick-lightbox.js' %}"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% compress js %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue