EP/website-typo3
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'fancybox'

Browse Source
This commit is contained in:
Björn Fromme
2018-08-31 17:10:40 +02:00
parent 72a04faadc 5f47cdc9d7
commit 37049e270b
2 changed files with 24 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/app.js
-5
View File
@@ -238,11 +238,6 @@ new Vue({
prevArrow: sliderPrevArrow,
nextArrow: sliderNextArrow
});
$('.slider--content').on('click', '.slider__thumb', function (e) {
e.preventDefault();
let slideIndex = $(this).data('slide');
$(this).closest('.slider').find('.slider__items').slick('slickGoTo', slideIndex);
});
},
initHeaderSlider () {
$('.slider--header').not('.slider--disabled').slick({
web/typo3conf/ext/ep_theme/Resources/Private/Partials/ContentSlider.html
+24 -7
View File
@@ -1,21 +1,38 @@
{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<f:comment>
This content element was implemented as a slider initially and has been turned into a lightbox gallery.
ToDo: Adjust naming accordingly
</f:comment>
<div class="slider slider--content">
<div id="carousel-{id}" class="slider__items">
<f:for each="{images}" as="image" iteration="iteration">
<f:link.typolink parameter="{image.originalResource.link}" class="slider__item">
<img class="slider__image" src="{f:uri.image(src: image.uid, treatIdAsReference: 1, crop: image.crop, width: '770', height: '430c+100')}" alt="{image.alternative}" title="{image.title}">
</f:link.typolink>
</f:for>
<div class="slider__items">
<f:alias map="{image: images.0}">
<a href="#" data-trigger="gallery-{id}">
<f:image image="{image}" crop="{image.crop}" width="770" height="430c+100"
class="slider__image" alt="{image.alternative}" title="{image.title}"/>
</a>
</f:alias>
</div>
<f:if condition="{thumbnails}">
<f:if condition="{images -> f:count()} > 1">
<div class="slider__thumbs hidden-sm hidden-xs">
<f:for each="{images}" as="image" iteration="iteration">
<f:if condition="{iteration.cycle} <= 5">
<a href="#" class="slider__thumb" data-slide="{iteration.index}"><img src="{f:uri.image(src: image.uid, treatIdAsReference: 1, crop: image.crop, width: '150', height: '85c+100')}" class="img-responsive" alt="{image.alternative}" title="{image.title}"></a>
<a href="{f:uri.image(image: image, crop: image.crop, maxWidth: '2560')}"
data-fancybox="gallery-{id}" class="slider__thumb">
<f:image image="{image}" crop="{image.crop}" width="150" height="85c+100"
class="img-responsive" alt="{image.alternative}" title="{image.title}"/>
</a>
</f:if>
</f:for>
</div>
</f:if>
</f:if>
<div class="slider__zoom" style="display: none">
<f:for each="{images}" as="image" iteration="iteration">
<f:if condition="{iteration.cycle} > 5">
<a data-fancybox="gallery-{id}" href="{f:uri.image(image: image, crop: image.crop, maxWidth: '2560')}"
title="{image.title}">{iteration.index}</a>
</f:if>
</f:for>
</div>
</div>