84 lines
1.9 KiB
PHTML
84 lines
1.9 KiB
PHTML
|
|
<?php
|
|
$this->headLink()->appendStylesheet($this->assetUrl('css/gallery.css', 'ImageGallery'));
|
|
?>
|
|
|
|
<?php $image_id = 0; ?>
|
|
|
|
|
|
<div class="archive-gallery">
|
|
<div class="source-link">
|
|
<a href="<?= $item_url ?>">Source</a>
|
|
</div>
|
|
|
|
<section id="<?= $gallery_id ?>"
|
|
class="gallery"
|
|
style="padding-top: 400px; max-width: <?= $max_width ?>%;">
|
|
|
|
<?php foreach ($images as $image) { ?>
|
|
<?php $image_id = $image_id +1;
|
|
$img_id = $gallery_id . '-' . $image_id;
|
|
?>
|
|
<div class="gallery__item">
|
|
<input type="radio"
|
|
id="<?= $img_id ?>"
|
|
checked name="gallery"
|
|
class="gallery__selector"/>
|
|
<img class="gallery__img"
|
|
style=""
|
|
src="<?= $image['media_url'] ?>"
|
|
alt="<?= $image['media_url'] ?>"
|
|
/>
|
|
<label for="<?= $img_id ?>" class="gallery__thumb">
|
|
<img src="<?= $image['media_url'] ?>"
|
|
alt="<?= $image['media_url'] ?>"
|
|
item_url="<?= $image['item_url'] ?>"
|
|
onclick="updateSourceURL(this)"
|
|
/>
|
|
</label>
|
|
</div>
|
|
|
|
<?php } ?>
|
|
|
|
</section>
|
|
|
|
<?php if ($title) { ?>
|
|
<div class="item_title">
|
|
<?= $title ?>
|
|
</div>
|
|
<?php } ?>
|
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
|
function updateSourceURL(thumbnail){
|
|
$(thumbnail).closest(".archive-gallery")
|
|
.find('.source-link')
|
|
.find('a').prop('href', $(thumbnail).attr('item_url'));
|
|
}
|
|
|
|
jQuery(document).ready(function() {
|
|
$('.archive-gallery').each(function(i, el){
|
|
var first_thumbnamil = $(el).find('.gallery__thumb:first')
|
|
.find('img');
|
|
updateSourceURL(first_thumbnamil)
|
|
|
|
|
|
});
|
|
});
|
|
|
|
jQuery(document).ready(function() {
|
|
var gallery_image_height=0;
|
|
$( ".gallery__img" ).each(function( index ) {
|
|
if ($(this).height() > gallery_image_height) {
|
|
gallery_image_height = $(this).height();
|
|
}
|
|
});
|
|
$('section.gallery').css('padding-top', gallery_image_height)
|
|
//$(".gallery__thumb:first-of-type").css('margin-left', 0)
|
|
//$(".gallery__thumb:last-of-type").css('margin-right', 0)
|
|
});
|
|
</script>
|