108 lines
2.8 KiB
PHTML
108 lines
2.8 KiB
PHTML
|
|
<?php
|
|
$this->headLink()->appendStylesheet($this->assetUrl('css/carousel.css', 'SimpleCarousel'));
|
|
$this->headScript()->appendFile($this->assetUrl('js/siema.min.js', 'SimpleCarousel'));
|
|
$caret = sprintf('<img class="caret" id="left" src="%s">', $this->assetUrl('caret.png', 'SimpleCarousel'));
|
|
$caret_r = sprintf('<img class="caret" id="right" src="%s">', $this->assetUrl('caret.png', 'SimpleCarousel'));
|
|
?>
|
|
|
|
<style>
|
|
#siema-ui_<?= $carousel_id ?> {
|
|
background-color: <?= $ui_background ?>;
|
|
}
|
|
</style>
|
|
|
|
<div class="archive-item-block archive-carousel">
|
|
|
|
<?php if ($renderSourceLink) { ?>
|
|
<div class="source-link">
|
|
<a href="">Source</a>
|
|
</div>
|
|
<?php } ?>
|
|
|
|
<div style="position:relative;">
|
|
<div id="siema_<?= $carousel_id ?>"
|
|
class="siema">
|
|
<?php foreach ($images as $image) { ?>
|
|
<div class="siema-wrap" style="<?= $wrapStyle ?>"
|
|
>
|
|
<img class="siema-img"
|
|
style="<?= $imgStyle ?>"
|
|
src="<?= $image['media_url'] ?>"
|
|
/>
|
|
</div>
|
|
<?php } ?>
|
|
</div>
|
|
<div id="siema-ui_<?= $carousel_id ?>"
|
|
class="siema-ui">
|
|
</div>
|
|
</div>
|
|
|
|
<?php if ($title) { ?>
|
|
<div class="item_title">
|
|
<?= $title ?>
|
|
</div>
|
|
<?php } ?>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
var sourceURLs_<?= $carousel_id ?> = [];
|
|
<?php foreach ($images as $image) { ?>
|
|
sourceURLs_<?= $carousel_id ?>.push("<?= $image['item_url'] ?>")
|
|
<?php } ?>
|
|
|
|
$(document).ready(function() {
|
|
let siema_<?= $carousel_id ?> = new Siema({
|
|
selector: '#siema_<?= $carousel_id ?>',
|
|
easing: 'ease-out',
|
|
duration: <?php echo $duration ?>,
|
|
perPage: <?php echo $perPage ?>,
|
|
loop: <?php echo $loop ?>,
|
|
draggable: <?php echo $draggable ?>,
|
|
onInit: changeSourceURL_<?= $carousel_id ?>,
|
|
onChange: changeSourceURL_<?= $carousel_id ?>,
|
|
});
|
|
|
|
let caret = $('<?php echo $caret;?>');
|
|
$(caret).prop('id', '<?= $carousel_id ?>_left')
|
|
$(caret).addClass('caret-left');
|
|
let caret_r = $('<?php echo $caret_r;?>');
|
|
$(caret_r).prop('id', '<?= $carousel_id ?>_right')
|
|
$(caret_r).addClass('caret-right');
|
|
|
|
$('#siema-ui_<?= $carousel_id ?>').append(caret);
|
|
$('#siema-ui_<?= $carousel_id ?>').append(caret_r);
|
|
|
|
$('#<?= $carousel_id ?>_left').click(function () {
|
|
siema_<?= $carousel_id ?>.prev()
|
|
});
|
|
$('#<?= $carousel_id ?>_right').click(function () {
|
|
siema_<?= $carousel_id ?>.next()
|
|
});
|
|
|
|
<?php if ($autoSlide == true): ?>
|
|
window.setInterval(() => {
|
|
siema.next();
|
|
}, <?php echo $autoSlideInt; ?>);
|
|
<?php endif ?>
|
|
});
|
|
|
|
function changeSourceURL_<?= $carousel_id ?>(){
|
|
var slide_idx = this.currentSlide
|
|
if (slide_idx < 0) {
|
|
slide_idx = sourceURLs_<?= $carousel_id ?>.length -1;
|
|
|
|
}
|
|
var source_link = $("#siema_<?= $carousel_id ?>")
|
|
.closest(".archive-carousel")
|
|
.find(".source-link")
|
|
.find('a');
|
|
if (source_link.length != 0) {
|
|
$(source_link).attr("href", sourceURLs_<?= $carousel_id ?>[slide_idx])
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|