-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.phtml
110 lines (96 loc) · 4.31 KB
/
index.phtml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<?php use App\Config\ConstantConfig; ?>
{% extends 'base.phtml' %}
{% block head %}
<!-- FancyBox CSS -->
<link href="{{ $this->path('assets/vendor/fancybox/jquery.fancybox.min.css') }}" rel="stylesheet">
<link href="{{ $this->path('assets/vendor/fancybox/style.css') }}" rel="stylesheet">
{% endblock %}
{% block content %}
{% include '_include/navigation.phtml' %}
{% include '_include/messages.phtml' %}
<!-- Breadcrumb -->
<section class="container">
<nav class="bg-light rounded-3 px-3 py-2 mb-4" aria-label="breadcrumb">
<ol class="breadcrumb mb-0 small">
<li class="breadcrumb-item active">Photo gallery</li>
</ol>
</nav>
</section>
<!-- Main Content - Blog index -->
<main>
<div class="container">
<div id="loadFancyBoxGallery" class="row row-cols-1 row-cols-md-3 g-4 mb-4" data-masonry='{ "percentPosition": true }'>
{% foreach($gallery as $item): %}
<div class="col text-center">
<a class="gallery-item" href="{{ $this->path('images/gallery/photo/') . $item->filename; }}" data-fancybox="fancyGallery" data-captiontext="{{ $item->title }}" data-captionlink="">
<img src="{{ $this->path('images/gallery/thumb/') . $item->filename; }}" class="img-fluid" alt="{{ $item->title }}">
</a>
</div>
{% endforeach; %}
<div class="loadMore d-none" data-parameters="<?= ConstantConfig::GALLERY_INDEX_ITEM_LIMIT; ?>"></div>
</div>
</div>
<div class="container" id="loadMessageContainer">
<div class="row text-center p-2">
<div id="loadDataMessage"></div>
</div>
</div>
</main>
{% endblock %}
{% block body %}
<!-- Masonry with the Bootstrap grid system for images view -->
<script src="{{ $this->path('assets/js/masonry.pkgd.min.js') }}"></script>
<!-- AJAX for FancyBox -->
<script src="{{ $this->path('assets/js/jquery.min.js') }}"></script>
<script src="{{ $this->path('assets/vendor/fancybox/jquery.fancybox.min.js') }}"></script>
<script>
$(document).ready(function() {
var limit = <?= ConstantConfig::GALLERY_INDEX_ITEM_LIMIT; ?>;
function loadDataToBox(start, limit) {
$.ajax({
url: '<?= $this->path('gallery/ajaxLoadData') ?>',
type: 'POST',
data: {
parameters: start,
},
success: function(response) {
if (response) {
$('#loadFancyBoxGallery').append(response);
} else {
$('#loadDataMessage').html('<span class="text-info">The End</span>').show();
$('#loadMessageContainer').fadeOut(1000);
}
}
});
}
$(window).scroll(function() {
if (($(window).scrollTop() == $(document).height() - $(window).height())) {
$('#loadDataMessage').html('<img src="<?= $this->path('images/loading.gif'); ?>" height="30" alt="Loading">').show();
setTimeout(function() {
var start = $('.loadMore').data('parameters');
loadDataToBox(start, limit);
$('.loadMore').data('parameters', start + limit);
$('#loadDataMessage').hide();
}, 1000);
}
});
});
</script>
<!-- FancyBox -->
<script>
$('[data-fancybox="fancyGallery"]').fancybox({
protect: true,
thumbs: {
autoStart: false,
},
caption: function(instance, item) {
var caption = $(this).data('captiontext') || '';
var captionLink = $(this).data('captionlink') || '';
if (item.type === 'image' && caption.length) {
caption = captionLink.length > 8 ? '<a href="' + captionLink + '" target="_blank">' + caption + '</a>' : caption + '<br />' ;
}
return caption;
}
});
</script>
{% endblock %}