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

Compare commits

base: arcHIVE-tech:c527d42651ec4cfdc86d58d3041598992ed5e6f8
Branches Tags
arcHIVE-tech:main
arcHIVE-tech:fix/height-window-load
..
compare: arcHIVE-tech:9603db5929ea7c0cbe2a8208ac20677d4f8521b8
Branches Tags
arcHIVE-tech:main
arcHIVE-tech:fix/height-window-load

No commits in common. "c527d42651ec4cfdc86d58d3041598992ed5e6f8" and "9603db5929ea7c0cbe2a8208ac20677d4f8521b8" have entirely different histories.
c527d42651 ... 9603db5929

2 changed files with 29 additions and 41 deletions
Show Stats Expand all files Collapse all files

10
asset/css/carousel.css
View File

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

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

@ -7,8 +7,8 @@
?> ?>
<style> <style>
#siema-ui_<?= $carousel_id ?> { #siema-ui {
background-color: <?= $ui_background ?>; /* background-color: <?php echo $ui_background ?>; */
} }
</style> </style>
@ -20,22 +20,19 @@
</div> </div>
<?php } ?> <?php } ?>
<div style="position:relative;"> <div class="archive-carousel-container">
<div id="siema_<?= $carousel_id ?>" <div class="siema_<?php $carousel_id ?> siema">
class="siema">
<?php foreach ($images as $image) { ?> <?php foreach ($images as $image) { ?>
<div class="siema-wrap" style="<?= $wrapStyle ?>" <div class="siema-wrap" style="<?php // $wrapStyle ?>"
> >
<img class="siema-img" <img class="siema-img"
style="<?= $imgStyle ?>" style="<?php $imgStyle ?>"
src="<?= $image['media_url'] ?>" src="<?php $image['media_url'] ?>"
/> />
</div> </div>
<?php } ?> <?php } ?>
</div> </div>
<div id="siema-ui_<?= $carousel_id ?>" <div id="siema-ui"></div>
class="siema-ui">
</div>
</div> </div>
<?php if ($title) { ?> <?php if ($title) { ?>
@ -47,39 +44,31 @@
<script> <script>
var sourceURLs_<?= $carousel_id ?> = []; var sourceURLs = [];
<?php foreach ($images as $image) { ?> <?php foreach ($images as $image) { ?>
sourceURLs_<?= $carousel_id ?>.push("<?= $image['item_url'] ?>") sourceURLs.push("<?php $image['item_url'] ?>")
<?php } ?> <?php } ?>
$(document).ready(function() { $(document).ready(function() {
let siema_<?= $carousel_id ?> = new Siema({ let siema = new Siema({
selector: '#siema_<?= $carousel_id ?>', selector: '.siema_<?php $carousel_id ?>',
easing: 'ease-out', easing: 'ease-out',
duration: <?php echo $duration ?>, duration: <?php echo $duration ?>,
perPage: <?php echo $perPage ?>, perPage: <?php echo $perPage ?>,
loop: <?php echo $loop ?>, loop: <?php echo $loop ?>,
draggable: <?php echo $draggable ?>, draggable: <?php echo $draggable ?>,
onInit: changeSourceURL_<?= $carousel_id ?>, onInit: changeSourceURL,
onChange: changeSourceURL_<?= $carousel_id ?>, onChange: changeSourceURL,
}); });
let caret = $('<?php echo $caret;?>'); let caret = '<?php echo $caret;?>';
$(caret).prop('id', '<?= $carousel_id ?>_left') let caret_r = '<?php echo $caret_r;?>';
$(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').append(caret);
$('#siema-ui_<?= $carousel_id ?>').append(caret_r); $('#siema-ui').append(caret_r);
$('#<?= $carousel_id ?>_left').click(function () { $('.caret#left').click(function () {siema.prev()});
siema_<?= $carousel_id ?>.prev() $('.caret#right').click(function () {siema.next()});
});
$('#<?= $carousel_id ?>_right').click(function () {
siema_<?= $carousel_id ?>.next()
});
<?php if ($autoSlide == true): ?> <?php if ($autoSlide == true): ?>
window.setInterval(() => { window.setInterval(() => {
@ -88,18 +77,17 @@ $(document).ready(function() {
<?php endif ?> <?php endif ?>
}); });
function changeSourceURL_<?= $carousel_id ?>(){ function changeSourceURL(){
var slide_idx = this.currentSlide var slide_idx = this.currentSlide
if (slide_idx < 0) { if (slide_idx < 0) {
slide_idx = sourceURLs_<?= $carousel_id ?>.length -1; slide_idx = sourceURLs.length -1;
} }
var source_link = $("#siema_<?= $carousel_id ?>") var source_link = $(".siema_<?php $carousel_id ?>")
.closest(".archive-carousel") .closest(".archive-carousel")
.find(".source-link") .find(".source-link")
.find('a'); .find('a');
if (source_link.length != 0) { if (source_link.length != 0) {
$(source_link).attr("href", sourceURLs_<?= $carousel_id ?>[slide_idx]) $(source_link).attr("href", sourceURLs[slide_idx])
} }
} }