Compare commits
8 Commits
fix/height
...
main
Author | SHA1 | Date |
---|---|---|
|
1a2d870387 | |
|
dd2f42be4e | |
|
c527d42651 | |
|
4aaeddc487 | |
|
1259955cb8 | |
|
9603db5929 | |
|
0183bb4428 | |
|
e47725e14e |
|
@ -2,8 +2,9 @@
|
|||
display: block !important;
|
||||
flex-wrap: nowrap !important;
|
||||
}
|
||||
|
||||
.siema {
|
||||
margin: 0;
|
||||
margin: 0; /*1rem 0;*/
|
||||
background-color: #000;
|
||||
position: relative;
|
||||
}
|
||||
|
@ -15,7 +16,7 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
#siema-ui {
|
||||
.siema-ui {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: absolute;
|
||||
|
@ -34,11 +35,11 @@
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
.caret#left {
|
||||
.caret-left {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.caret#right {
|
||||
.caret-right {
|
||||
transform: rotate(180deg);
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
@ -50,6 +51,6 @@
|
|||
margin: 0;
|
||||
align-self: center;
|
||||
}
|
||||
.archive-carousel-container {
|
||||
.archive-carousel-container {
|
||||
position: relative;
|
||||
}
|
||||
|
|
|
@ -34,7 +34,7 @@ class Carousel extends AbstractBlockLayout
|
|||
}
|
||||
|
||||
public function getLabel() {
|
||||
return 'Image Carrousel';
|
||||
return 'Carousel';
|
||||
}
|
||||
|
||||
public function form(PhpRenderer $view, SiteRepresentation $site,
|
||||
|
@ -92,10 +92,9 @@ class Carousel extends AbstractBlockLayout
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
$wrap = $block->dataValue('wrapStyle') . 'height:'.$block->dataValue('height').';';
|
||||
return $view->partial('common/block-layout/simple-carousel', [
|
||||
'carousel_id' => 'ic_' . ++$id,
|
||||
'height' => $block->dataValue('height'),
|
||||
'duration' => $block->dataValue('duration'),
|
||||
'perPage' => $block->dataValue('perPage'),
|
||||
'loop' => $block->dataValue('loop'),
|
||||
|
@ -104,7 +103,7 @@ class Carousel extends AbstractBlockLayout
|
|||
'images' => $images,
|
||||
'autoSlide' => $block->dataValue('autoSlide'),
|
||||
'autoSlideInt' => $block->dataValue('autoSlideInt'),
|
||||
'wrapStyle' => $block->dataValue('wrapStyle'),
|
||||
'wrapStyle' => $wrap,
|
||||
'imgStyle' => $block->dataValue('imgStyle'),
|
||||
'ui_background' => $block->dataValue('ui_background'),
|
||||
'renderSourceLink' => $block->dataValue('renderSourceLink'),
|
||||
|
|
|
@ -7,7 +7,9 @@
|
|||
?>
|
||||
|
||||
<style>
|
||||
/* styles placed in carousel.css */
|
||||
#siema-ui_<?= $carousel_id ?> {
|
||||
background-color: <?= $ui_background ?>;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="archive-item-block archive-carousel">
|
||||
|
@ -18,55 +20,66 @@
|
|||
</div>
|
||||
<?php } ?>
|
||||
|
||||
<div class="archive-carousel-container">
|
||||
<div class="siema_<?php $carousel_id ?> siema">
|
||||
<div style="position:relative;">
|
||||
<div id="siema_<?= $carousel_id ?>"
|
||||
class="siema">
|
||||
<?php foreach ($images as $image) { ?>
|
||||
<div class="siema-wrap" style="<?php // $wrapStyle ?>"
|
||||
<div class="siema-wrap" style="<?= $wrapStyle ?>"
|
||||
>
|
||||
<img class="siema-img"
|
||||
style="<?php $imgStyle ?>"
|
||||
src="<?php $image['media_url'] ?>"
|
||||
style="<?= $imgStyle ?>"
|
||||
src="<?= $image['media_url'] ?>"
|
||||
/>
|
||||
</div>
|
||||
<?php } ?>
|
||||
</div>
|
||||
<div id="siema-ui"></div>
|
||||
<div id="siema-ui_<?= $carousel_id ?>"
|
||||
class="siema-ui">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php if ($title) { ?>
|
||||
<div class="item_title">
|
||||
<?php $title ?>
|
||||
<?= $title ?>
|
||||
</div>
|
||||
<?php } ?>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
var sourceURLs = [];
|
||||
var sourceURLs_<?= $carousel_id ?> = [];
|
||||
<?php foreach ($images as $image) { ?>
|
||||
sourceURLs.push("<?php $image['item_url'] ?>")
|
||||
sourceURLs_<?= $carousel_id ?>.push("<?= $image['item_url'] ?>")
|
||||
<?php } ?>
|
||||
|
||||
$(document).ready(function() {
|
||||
let siema = new Siema({
|
||||
selector: '.siema_<?php $carousel_id ?>',
|
||||
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,
|
||||
onChange: changeSourceURL,
|
||||
onInit: changeSourceURL_<?= $carousel_id ?>,
|
||||
onChange: changeSourceURL_<?= $carousel_id ?>,
|
||||
});
|
||||
|
||||
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').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(() => {
|
||||
|
@ -75,17 +88,18 @@ $(document).ready(function() {
|
|||
<?php endif ?>
|
||||
});
|
||||
|
||||
function changeSourceURL(){
|
||||
function changeSourceURL_<?= $carousel_id ?>(){
|
||||
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_<?php $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])
|
||||
}
|
||||
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue