78 lines
1.8 KiB
Plaintext
78 lines
1.8 KiB
Plaintext
<div class="widget-gallery widget9 no-print">
|
|
<h3 class="widget-title">
|
|
<span>{{widget-title}}</span>
|
|
</h3>
|
|
<div class="row widget-content" data-level="0" data-list="images">
|
|
<div class="widget-content-inner" style="text-align: center;">
|
|
<a class="widget-pic" href="{{link_to_show}}" title="{{album-name}}">
|
|
<img
|
|
srcset="
|
|
{{thumb-large-src}} 1024w,
|
|
{{thumb-src}} 768w"
|
|
src="{{thumb-src}}"
|
|
alt="{{alt_title}}"
|
|
>
|
|
</a>
|
|
<a href="{{link_to_show}}" title="{{album-name}}">
|
|
<div class="mask_title">{{image_description}}</div>
|
|
</a>
|
|
<a class="album-name" href="{{link_to_show}}" title="{{album-name}}">{{link_text}}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
.widget-gallery.widget9 .row {
|
|
@media(min-width:768px){
|
|
display: block !important;
|
|
column-count: 3;
|
|
column-gap: 16px;
|
|
}
|
|
}
|
|
|
|
.widget-gallery.widget9 .index-content {
|
|
break-inside: avoid;
|
|
-webkit-column-break-inside: avoid;
|
|
display: inline-block;
|
|
width:100%!important;
|
|
margin-bottom: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
|
|
.widget-gallery.widget9 .index-content.col-sm-4 {
|
|
float: none !important;
|
|
padding: 0;
|
|
}
|
|
|
|
|
|
.widget-gallery.widget9 .index-content-inner {
|
|
width: 100%;
|
|
}
|
|
|
|
.widget-gallery.widget9 .index-content-inner img {
|
|
width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
}
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(40px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
$(document).ready(function () {
|
|
$('.widget-gallery.widget9 .index-content').each(function (i) {
|
|
$(this).css({
|
|
'opacity': 0,
|
|
'animation': 'fadeInUp 0.6s ease forwards',
|
|
'animation-delay': (i * 0.08) + 's'
|
|
});
|
|
});
|
|
});
|
|
</script> |