vertical_3c/modules/gallery/gallery_index8.html.erb

80 lines
1.9 KiB
Plaintext

<div class="index-gallery index8">
<h3 class="index-title">
<span>{{page-title}}</span>
</h3>
<div class="row" data-level="0" data-list="albums" style="display: flex;flex-wrap: wrap;">
<div class="index-content col-sm-4">
<a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">
<div class="index-content-inner">
<div class="index-pic">
<img class="index-img" src="{{thumb-src}}" alt="{{alt_title}}">
</div>
</a>
<div class="index-part">
<h4 class="index-content-title">
<a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">{{album-name}}</a>
</h4>
</div>
</div>
</div>
</div>
</div>
{{pagination_goes_here}}
<style>
.index-gallery.index8 .row {
@media(min-width:768px){
display: block !important;
column-count: 3;
column-gap: 16px;
}
}
.index-gallery.index8 .index-content {
break-inside: avoid;
-webkit-column-break-inside: avoid;
display: inline-block;
width:100%!important;
margin-bottom: 0;
box-sizing: border-box;
}
.index-gallery.index8 .index-content.col-sm-4 {
float: none !important;
padding: 0;
}
.index-gallery.index8 .index-content-inner {
width: 100%;
}
.index-gallery.index8 .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 () {
$('.index-gallery.index8 .index-content').each(function (i) {
$(this).css({
'opacity': 0,
'animation': 'fadeInUp 0.6s ease forwards',
'animation-delay': (i * 0.08) + 's'
});
});
});
</script>