Your IP : 216.73.216.84
<?php defined('_JEXEC') or die;
/*
* @package mod_uk_grid
* @copyright © 2020 Joomlaplates. All rights reserved.
* @license GNU General Public License version 3 or later; see http://www.gnu.org/licenses/gpl-3.0.txt
*/
$content_before_class = $params->get('content_before_class');
$content_before = $params->get('content_before');
$loadmore = $params->get('loadmore');
$loadmore_start = $params->get('loadmore_start');
$loadmore_load = $params->get('loadmore_load');
$loadmore_text = $params->get('loadmore_text');
$loadmore_bg = $params->get('loadmore_bg');
$module_id = $module->id;
?>
<style type="text/css">
.grid-hover img { transform: scale(1); transform-origin: 50% 50% 0px; transition: all 0.3s ease 0s; }
.grid-hover a:hover img { transform: scale(1.0); }
.grid-hover .item-image-backdrop { position: absolute; top: 0px; left: 0px; z-index: 10; width: 100%; height: 100%; background-color: rgb(0, 0, 0); visibility: hidden; opacity: 0; transition: all 0.3s ease 0s; }
.grid-hover a:hover .item-image-backdrop { visibility: visible; opacity: 0.7; }
.grid-hover .item-image-backdrop::before { content: ""; z-index: 11; display: block; width: 25px; height: 1px; background-color: rgb(255, 255, 255); position: absolute; top: 50%; left: 50%; margin-left: -12px; transition: all 0.3s ease 0s; transform: translateX(-150px); }
.grid-hover .item-image-backdrop::after { content: ""; z-index: 12; display: block; width: 1px; height: 25px; background-color: rgb(255, 255, 255); position: absolute; top: 50%; left: 50%; margin-top: -12px; transition: all 0.3s ease 0s; transform: translateY(-150px); }
.grid-hover a:hover .item-image-backdrop::before { transform: translateX(0px); }
.grid-hover a:hover .item-image-backdrop::after { transform: translateY(0px); }
</style>
<?php if ($content_before) { ?>
<div class="<?php echo $content_before_class; ?>">
<?php echo $content_before; ?>
</div>
<?php } ?>
<div uk-filter="target: .js-filter">
<ul class="uk-subnav <?php echo $show_tags; ?>">
<li class="uk-active" uk-filter-control><a href="#"><?php echo JText::_('MOD_UK_GALLERY_ALL'); ?></a></li>
<?php foreach($tagsList['index'] as $tag => $tagClass):?>
<li uk-filter-control="filter: .<?php echo $tagClass; ?>"><a href="#"><?php echo $tag; 'UTF-8'?></a></li>
<?php endforeach; ?>
</ul>
<div uk-lightbox="animation: <?php echo $animation; ?>" class="contents js-filter mod_uk_gallery card-columns" >
<?php
foreach ($items as $key => $item)
{
$tags = $tagsList['items'][$key];
$itemClass = ' ';
foreach ($tags as $tag) {
$itemClass .= $tagsList['index'][$tag] .' ';
}
?>
<div class="grid-hover card" >
<a class="uk-inline <?php echo $item_style; ?>" href="<?php echo $item->img; ?>" data-caption="<?php echo $item->title; ?>">
<img class="card-img-top" src="<?php echo $item->img; ?>" alt="<?php echo $item->title; ?>">
<span class="item-image-backdrop"></span>
</a>
</div>
<?php } ?>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript">
/* Button Load more - v1.0.0 - 2018-02-28
* Copyright (c) 2018 NTTPS; */
(function ($) {
$.fn.btnLoadmore = function (options) {
var defaults = {
showItem: 6,
whenClickBtn: 3,
textBtn: 'Loadmore ...',
classBtn : '',
setCookies: false,
delayToScroll: 2000,
},
options = $.extend(defaults, options);
this.each(function () {
var $this = $(this),
$childrenClass = $($this.children());
// Get Element Of contents to hide
$childrenClass.hide();
//Show Element from Options
$childrenClass.slice(0, defaults.showItem).show();
//Show Button when item in contents != 0
if ($childrenClass.filter(":hidden").length > 0) {
$this.after('<button type="button" class="btn-loadmore '+ defaults.classBtn +'">' + defaults.textBtn + '</button>')
}
$(document).on('click', '.btn-loadmore', function (e) {
e.preventDefault();
$childrenClass.filter(':hidden').slice(0, defaults.whenClickBtn).slideDown();
if ($childrenClass.filter(":hidden").length == 0) {
$(".btn-loadmore").fadeOut('slow');
}
scrollDown();
});
function scrollDown() {
$('html, body').animate({
scrollTop: $childrenClass.filter(":visible").last().offset().top
}, defaults.delayToScroll);
}
});
}
}(jQuery));
</script>
<script>
$(document).ready( function() {
$('.contents').btnLoadmore({
showItem : 3,
whenClickBtn : 3,
textBtn : 'Load more...',
classBtn : 'btn btn-danger'
});
});
</script>
<style type="text/css">
@media (min-width: 576px) {
.card-columns {
column-count: 1;
}
}
@media (min-width: 768px) {
.card-columns {
column-count: 2;
}
}
@media (min-width: 992px) {
.card-columns {
column-count: 3;
}
}
@media (min-width: 1200px) {
.card-columns {
column-count: 3;
}
}
</style>