arcHIVE-tech
/
SimpleCarousel-omeka-module
4
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Wiki Activity

handles multiple carousels on same page

This commit is contained in:
buttle 2021-09-13 14:37:47 +02:00
parent 1259955cb8
commit 4aaeddc487
2 changed files with 29 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
asset/css/carousel.css
View File

@ -3,7 +3,7 @@
flex-wrap: nowrap !important;
}
.siema {
margin: 1rem 0;
margin: margin: 0; /*1rem 0;*/
background-color: #000;
position: relative;
}
@ -12,9 +12,10 @@
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
}
#siema-ui {
.siema-ui {
display: flex;
justify-content: space-between;
position: absolute;
@ -33,11 +34,11 @@
opacity: 1;
}
.caret#left {
.caret-left {
margin-left: 20px;
}
.caret#right {
.caret-right {
transform: rotate(180deg);
margin-right: 20px;
}

43
view/common/block-layout/simple-carousel.phtml
View File

@ -7,10 +7,8 @@
?>
<style>
.siema { margin: 0; }
.siema-img { width: 100%; }
#siema-ui {
/* background-color: <?php echo $ui_background ?>; */
#siema-ui_<?= $carousel_id ?> {
background-color: <?php echo $ui_background ?>;
}
</style>
@ -23,7 +21,8 @@
<?php } ?>
<div style="position:relative;">
<div class="siema_<?= $carousel_id ?> siema">
<div id="siema_<?= $carousel_id ?>"
class="siema">
<?php foreach ($images as $image) { ?>
<div class="siema-wrap"
style="<?= $wrapStyle ?>"
@ -35,7 +34,9 @@
</div>
<?php } ?>
</div>
<div id="siema-ui"></div>
<div id="siema-ui_<?= $carousel_id ?>"
class="siema-ui">
</div>
</div>
<?php if ($title) { ?>
@ -47,14 +48,14 @@
<script>
var sourceURLs = [];
var sourceURLs_<?= $carousel_id ?> = [];
<?php foreach ($images as $image) { ?>
sourceURLs.push("<?= $image['item_url'] ?>")
sourceURLs_<?= $carousel_id ?>.push("<?= $image['item_url'] ?>")
<?php } ?>
$(document).ready(function() {
let siema = new Siema({
selector: '.siema_<?= $carousel_id ?>',
let siema_<?= $carousel_id ?> = new Siema({
selector: '#siema_<?= $carousel_id ?>',
easing: 'ease-out',
duration: <?php echo $duration ?>,
perPage: <?php echo $perPage ?>,
@ -64,14 +65,18 @@ $(document).ready(function() {
onChange: changeSourceURL,
});
let caret = '<?php echo $caret;?>';
let caret_r = '<?php echo $caret_r;?>';
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').append(caret);
$('#siema-ui accesskey=""').append(caret_r);
$('#siema-ui_<?= $carousel_id ?>').append(caret);
$('#siema-ui_<?= $carousel_id ?>').append(caret_r);
$('.caret#left').click(function () {siema.prev()});
$('.caret#right').click(function () {siema.next()});
$('#<?= $carousel_id ?>_left').click(function () {siema_<?= $carousel_id ?>.prev()});
$('#<?= $carousel_id ?>_right').click(function () {siema_<?= $carousel_id ?>.next()});
<?php if ($autoSlide == true): ?>
window.setInterval(() => {
@ -83,14 +88,14 @@ $(document).ready(function() {
function changeSourceURL(){
var slide_idx = this.currentSlide
if (slide_idx < 0) {
slide_idx = sourceURLs.length -1;
slide_idx = sourceURLs_<?= $carousel_id ?>.length -1;
}
var source_link = $(".siema_<?= $carousel_id ?>")
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])
$(source_link).attr("href", sourceURLs_<?= $carousel_id ?>[slide_idx])
}
}