SimpleCarousel-omeka-module/view/common/block-layout/simple-carousel.phtml

105 lines
2.5 KiB
PHTML
Raw Normal View History

2021-05-31 20:28:57 +02:00
2021-06-27 15:51:36 +02:00
<?php
$this->headLink()->appendStylesheet($this->assetUrl('css/carousel.css', 'SimpleCarousel'));
$this->headScript()->appendFile($this->assetUrl('js/siema.min.js', 'SimpleCarousel'));
2021-05-31 20:28:57 +02:00
2021-06-27 15:51:36 +02:00
$title = false;
2021-05-31 20:28:57 +02:00
2021-06-27 15:51:36 +02:00
$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 { margin: 0; }
.siema-wrap { height: <?php echo $height ?>; }
.siema-img { width: 100%; }
#siema-ui {
/* background-color: <?php echo $ui_background ?>; */
}
</style>
2021-05-31 20:28:57 +02:00
<div class="archive-carousel">
<?php if ($renderSourceLink) { ?>
<div class="source-link">
<a href="">Source</a>
2021-05-31 20:28:57 +02:00
</div>
<?php } ?>
2021-06-27 15:51:36 +02:00
<div style="position:relative;">
<div class="siema_<?= $carousel_id ?> siema">
<?php foreach ($images as $image) { ?>
2021-06-27 15:51:36 +02:00
<div class="siema-wrap"
style="<?= $wrapStyle ?>"
>
<img class="siema-img"
style="<?= $imgStyle ?>"
src="<?= $image['media_url'] ?>"
2021-06-27 15:51:36 +02:00
/>
</div>
<?php } ?>
</div>
<div id="siema-ui"></div>
2021-05-31 20:28:57 +02:00
</div>
2021-06-27 15:51:36 +02:00
<?php if ($subTitle) { ?>
<div class="item_title">
<?= $subTitle ?>
</div>
<?php } ?>
2021-05-31 20:28:57 +02:00
</div>
2021-06-27 15:51:36 +02:00
<script>
var sourceURLs = [];
<?php foreach ($images as $image) { ?>
sourceURLs.push("<?= $image['item_url'] ?>")
<?php } ?>
2021-06-27 15:51:36 +02:00
$(document).ready(function() {
let siema = new Siema({
selector: '.siema_<?= $carousel_id ?>',
2021-06-27 15:51:36 +02:00
easing: 'ease-out',
duration: <?php echo $duration ?>,
perPage: <?php echo $perPage ?>,
loop: <?php echo $loop ?>,
draggable: <?php echo $draggable ?>,
onInit: changeSourceURL,
onChange: changeSourceURL,
2021-06-27 15:51:36 +02:00
});
2021-05-31 20:28:57 +02:00
2021-06-27 15:51:36 +02:00
let caret = '<?php echo $caret;?>';
let caret_r = '<?php echo $caret_r;?>';
2021-05-31 20:28:57 +02:00
2021-06-27 15:51:36 +02:00
$('#siema-ui').append(caret);
<?php if ($title !== false): ?>
$('#siema-ui').append('<?php echo $title;?>');
<?php endif ?>
$('#siema-ui').append(caret_r);
2021-05-31 20:28:57 +02:00
2021-06-27 15:51:36 +02:00
$('.caret#left').click(function () {siema.prev()});
$('.caret#right').click(function () {siema.next()});
2021-05-31 20:28:57 +02:00
2021-06-27 15:51:36 +02:00
<?php if ($autoSlide == true): ?>
window.setInterval(() => {
siema.next();
}, <?php echo $autoSlideInt; ?>);
<?php endif ?>
});
function changeSourceURL(){
var slide_idx = this.currentSlide
if (slide_idx < 0) {
slide_idx = sourceURLs.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[slide_idx])
}
}
2021-06-27 15:51:36 +02:00
</script>