Compare commits
8 Commits
fix/height
...
main
Author | SHA1 | Date |
---|---|---|
buttle | 1a2d870387 | |
buttle | dd2f42be4e | |
buttle | c527d42651 | |
buttle | 4aaeddc487 | |
buttle | 1259955cb8 | |
buttle | 9603db5929 | |
buttle | 0183bb4428 | |
chris | e47725e14e |
|
@ -2,8 +2,9 @@
|
||||||
display: block !important;
|
display: block !important;
|
||||||
flex-wrap: nowrap !important;
|
flex-wrap: nowrap !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.siema {
|
.siema {
|
||||||
margin: 0;
|
margin: 0; /*1rem 0;*/
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
@ -15,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;
|
||||||
|
@ -34,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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -34,7 +34,7 @@ class Carousel extends AbstractBlockLayout
|
||||||
}
|
}
|
||||||
|
|
||||||
public function getLabel() {
|
public function getLabel() {
|
||||||
return 'Image Carrousel';
|
return 'Carousel';
|
||||||
}
|
}
|
||||||
|
|
||||||
public function form(PhpRenderer $view, SiteRepresentation $site,
|
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', [
|
return $view->partial('common/block-layout/simple-carousel', [
|
||||||
'carousel_id' => 'ic_' . ++$id,
|
'carousel_id' => 'ic_' . ++$id,
|
||||||
'height' => $block->dataValue('height'),
|
|
||||||
'duration' => $block->dataValue('duration'),
|
'duration' => $block->dataValue('duration'),
|
||||||
'perPage' => $block->dataValue('perPage'),
|
'perPage' => $block->dataValue('perPage'),
|
||||||
'loop' => $block->dataValue('loop'),
|
'loop' => $block->dataValue('loop'),
|
||||||
|
@ -104,7 +103,7 @@ class Carousel extends AbstractBlockLayout
|
||||||
'images' => $images,
|
'images' => $images,
|
||||||
'autoSlide' => $block->dataValue('autoSlide'),
|
'autoSlide' => $block->dataValue('autoSlide'),
|
||||||
'autoSlideInt' => $block->dataValue('autoSlideInt'),
|
'autoSlideInt' => $block->dataValue('autoSlideInt'),
|
||||||
'wrapStyle' => $block->dataValue('wrapStyle'),
|
'wrapStyle' => $wrap,
|
||||||
'imgStyle' => $block->dataValue('imgStyle'),
|
'imgStyle' => $block->dataValue('imgStyle'),
|
||||||
'ui_background' => $block->dataValue('ui_background'),
|
'ui_background' => $block->dataValue('ui_background'),
|
||||||
'renderSourceLink' => $block->dataValue('renderSourceLink'),
|
'renderSourceLink' => $block->dataValue('renderSourceLink'),
|
||||||
|
|
|
@ -7,7 +7,9 @@
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
/* styles placed in carousel.css */
|
#siema-ui_<?= $carousel_id ?> {
|
||||||
|
background-color: <?= $ui_background ?>;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class="archive-item-block archive-carousel">
|
<div class="archive-item-block archive-carousel">
|
||||||
|
@ -18,55 +20,66 @@
|
||||||
</div>
|
</div>
|
||||||
<?php } ?>
|
<?php } ?>
|
||||||
|
|
||||||
<div class="archive-carousel-container">
|
<div style="position:relative;">
|
||||||
<div class="siema_<?php $carousel_id ?> siema">
|
<div id="siema_<?= $carousel_id ?>"
|
||||||
|
class="siema">
|
||||||
<?php foreach ($images as $image) { ?>
|
<?php foreach ($images as $image) { ?>
|
||||||
<div class="siema-wrap" style="<?php // $wrapStyle ?>"
|
<div class="siema-wrap" style="<?= $wrapStyle ?>"
|
||||||
>
|
>
|
||||||
<img class="siema-img"
|
<img class="siema-img"
|
||||||
style="<?php $imgStyle ?>"
|
style="<?= $imgStyle ?>"
|
||||||
src="<?php $image['media_url'] ?>"
|
src="<?= $image['media_url'] ?>"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<?php } ?>
|
<?php } ?>
|
||||||
</div>
|
</div>
|
||||||
<div id="siema-ui"></div>
|
<div id="siema-ui_<?= $carousel_id ?>"
|
||||||
|
class="siema-ui">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<?php if ($title) { ?>
|
<?php if ($title) { ?>
|
||||||
<div class="item_title">
|
<div class="item_title">
|
||||||
<?php $title ?>
|
<?= $title ?>
|
||||||
</div>
|
</div>
|
||||||
<?php } ?>
|
<?php } ?>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
var sourceURLs = [];
|
var sourceURLs_<?= $carousel_id ?> = [];
|
||||||
<?php foreach ($images as $image) { ?>
|
<?php foreach ($images as $image) { ?>
|
||||||
sourceURLs.push("<?php $image['item_url'] ?>")
|
sourceURLs_<?= $carousel_id ?>.push("<?= $image['item_url'] ?>")
|
||||||
<?php } ?>
|
<?php } ?>
|
||||||
|
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
let siema = new Siema({
|
let siema_<?= $carousel_id ?> = new Siema({
|
||||||
selector: '.siema_<?php $carousel_id ?>',
|
selector: '#siema_<?= $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,
|
onInit: changeSourceURL_<?= $carousel_id ?>,
|
||||||
onChange: changeSourceURL,
|
onChange: changeSourceURL_<?= $carousel_id ?>,
|
||||||
});
|
});
|
||||||
|
|
||||||
let caret = '<?php echo $caret;?>';
|
let caret = $('<?php echo $caret;?>');
|
||||||
let caret_r = '<?php echo $caret_r;?>';
|
$(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_<?= $carousel_id ?>').append(caret);
|
||||||
$('#siema-ui').append(caret_r);
|
$('#siema-ui_<?= $carousel_id ?>').append(caret_r);
|
||||||
|
|
||||||
$('.caret#left').click(function () {siema.prev()});
|
$('#<?= $carousel_id ?>_left').click(function () {
|
||||||
$('.caret#right').click(function () {siema.next()});
|
siema_<?= $carousel_id ?>.prev()
|
||||||
|
});
|
||||||
|
$('#<?= $carousel_id ?>_right').click(function () {
|
||||||
|
siema_<?= $carousel_id ?>.next()
|
||||||
|
});
|
||||||
|
|
||||||
<?php if ($autoSlide == true): ?>
|
<?php if ($autoSlide == true): ?>
|
||||||
window.setInterval(() => {
|
window.setInterval(() => {
|
||||||
|
@ -75,17 +88,18 @@ $(document).ready(function() {
|
||||||
<?php endif ?>
|
<?php endif ?>
|
||||||
});
|
});
|
||||||
|
|
||||||
function changeSourceURL(){
|
function changeSourceURL_<?= $carousel_id ?>(){
|
||||||
var slide_idx = this.currentSlide
|
var slide_idx = this.currentSlide
|
||||||
if (slide_idx < 0) {
|
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")
|
.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[slide_idx])
|
$(source_link).attr("href", sourceURLs_<?= $carousel_id ?>[slide_idx])
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue