Отправлено от
Sharlex (04 Февраль 2018 - 07:33) писал:
Поддерживаю, можно ли сделать такую ленту фотографий?
Простите за длительное ожидание ответа.
В main.js найдите код
function indexPage() {
и после него вставьте
$('a[rel="gallery"]').fancybox();
// Увеличение изображение при клике на него и открытие галереи изображений
$('.thumblist a').click(function(){
if($(this).closest('.thumblist').length) {
$('.goodsImageZoom').attr('data', $(this).attr('data'));
return(true);
}
$('.goodsImageList a[data="' + $('.goodsImageZoom').attr("data") + '"]').trigger('click');
return(false);
});
var owl = $(".gallery-index-page .owl-carousel");
// Показывать\Скрывать навигацию
owl.on('initialized.owl.carousel changed.owl.carousel', function(event) {
var items = event.item.count;
var size = event.page.size;
if (items > size){
$('.gallery-index-page.navigation .prev, .gallery-index-page.navigation .next').show();
} else {
$('.gallery-index-page.navigation .prev, .gallery-index-page.navigation .next').hide();
}
});
owl.owlCarousel({
items: 4,
margin: 15,
loop: false,
rewind: true,
lazyLoad: false,
nav: false,
dots: false,
autoplay: false,
autoplayHoverPause: true,
smartSpeed: 500,
mouseDrag: true,
touchDrag: true,
pullDrag: true,
responsiveClass: true,
responsiveRefreshRate: 100,
responsive: {
0:{items:1},
320:{items:2},
480:{items:3},
640:{items:4},
768:{items:5},
992:{items:2},
1200:{items:3}
}
});
// Кнопки навигации
$('.gallery-index-page.navigation .next').click(function(event) {
event.preventDefault();
owl.trigger('next.owl.carousel');
});
$('.gallery-index-page.navigation .prev').click(function(event) {
event.preventDefault();
owl.trigger('prev.owl.carousel');
});
В шаблоне html найдите код
{% IF index_page %}
<div id="main">
<div class="container">
{BODY}
</div>
</div>
{% ENDIF %}
<!-- /END Основная часть -->
и замените на
{% IF index_page %}
<div id="main">
<div class="container">
{BODY}
<div class="thumblist-box gallery-index-page navigation">
<span class="next"></span>
<span class="prev"></span>
<div class="thumblist owl-carousel" style="max-width:none;width:auto;">
<li><a href="Ссылка на большое изображение"class="thumblisticon" rel="gallery"><img src="ссылка на маленькое изображение" itemprop="image" /></a></li>
<li><a href="Ссылка на большое изображение"class="thumblisticon" rel="gallery"><img src="ссылка на маленькое изображение" itemprop="image" /></a></li>
<li><a href="Ссылка на большое изображение"class="thumblisticon" rel="gallery"><img src="ссылка на маленькое изображение" itemprop="image" /></a></li>
<li><a href="Ссылка на большое изображение"class="thumblisticon" rel="gallery"><img src="ссылка на маленькое изображение" itemprop="image" /></a></li>
<li><a href="Ссылка на большое изображение"class="thumblisticon" rel="gallery"><img src="ссылка на маленькое изображение" itemprop="image" /></a></li>
<li><a href="Ссылка на большое изображение"class="thumblisticon" rel="gallery"><img src="ссылка на маленькое изображение" itemprop="image" /></a></li>
</div>
</div>
</div>
</div>
{% ENDIF %}
<!-- /END Основная часть -->
в данном коде замените текст "Ссылка на большое изображение" и "Ссылка на маленькое изображение" на соответствующие элементы.
