FbIN/htmly
1
0
Fork 0
mirror of https://github.com/danpros/htmly.git synced 2026-04-20 04:26:22 +05:30
Code Issues Projects Releases Packages Wiki Activity

Add pager in gallery

Browse source 
Load 40 images for each pager.
This commit is contained in:
danpros 2024-03-03 17:26:08 +07:00
commit 675cf51259
8 changed files with 125 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

24
system/admin/admin.php
View file

@ -1626,3 +1626,27 @@ function reorder_subpages($subpages = null)
rebuilt_cache(); rebuilt_cache();
} }
// Return image gallery in pager.
function image_gallery($images, $page = 1, $perpage = 0)
{
if (empty($images)) {
$images = get_gallery();
}
$pagination = has_pagination(count($images), $perpage, $page);
$tmp = '';
$images = array_slice($images, ($page - 1) * $perpage, $perpage);
$tmp .= '<div class="cover-container">';
foreach ($images as $index => $v) {
$tmp .= '<div class="cover-item"><img loading="lazy" class="img-thumbnail the-img" src="' . site_url() . $v['dirname'] . '/'. $v['basename'].'"></div>';
}
$tmp .= '</div><br><div class="row">';
if (!empty($pagination['prev'])) {
$tmp .= '<a class="btn btn-primary left" href="#'. $page - 1 .'" onclick="loadImages(' . $page - 1 . ')">← '. i18n('Prev') .'</a>';
}
if (!empty($pagination['next'])) {
$tmp .= '<a class="btn btn-primary right" href="#'. $page + 1 .'" onclick="loadImages(' . $page + 1 . ')">'. i18n('Next') .' →</a>';
}
$tmp .= '</div>';
return $tmp;
}

2
system/admin/editor/js/editor.js
View file

@ -11,6 +11,8 @@
$('#insertImageDialogFile').val(''); $('#insertImageDialogFile').val('');
$('#insertMediaDialogURL').val(''); $('#insertMediaDialogURL').val('');
$('#insertMediaDialogFile').val(''); $('#insertMediaDialogFile').val('');
$('#gallery-1').html(initial_image);
$('#gallery-2').html(initial_image);
}; };
$('#insertImageDialogInsert').click( function() { $('#insertImageDialogInsert').click( function() {
callbackFunc( $('#insertImageDialogURL').val().length > 0 ? $('#insertImageDialogURL').val() : null ); callbackFunc( $('#insertImageDialogURL').val().length > 0 ? $('#insertImageDialogURL').val() : null );

41
system/admin/views/add-content.html.php
View file

@ -24,7 +24,7 @@ if (file_exists($tagslang)) {
file_put_contents($tagslang, print_r($tmp, true), LOCK_EX); file_put_contents($tagslang, print_r($tmp, true), LOCK_EX);
} }
$images = get_gallery(); $images = image_gallery(null, 1, 40);
?> ?>
@ -227,18 +227,12 @@ $( function() {
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<?php if (!empty($images)) :?>
<div class="form-group"> <div class="form-group">
<div class="row-fluid cover-container"> <div class="row-fluid img-container" id="gallery-1">
<?php foreach ($images as $img):?> <?php echo $images;?>
<div class="cover-item">
<img class="img-thumbnail the-img" src="<?php echo site_url() . $img['dirname'] . '/' . $img['basename']?>">
</div>
<?php endforeach;?>
</div> </div>
</div> </div>
<hr> <hr>
<?php endif;?>
<div class="form-group"> <div class="form-group">
<label for="insertImageDialogURL">URL</label> <label for="insertImageDialogURL">URL</label>
<input type="text" class="form-control" id="insertImageDialogURL" size="48" placeholder="<?php echo i18n('Enter_image_URL');?>" /> <input type="text" class="form-control" id="insertImageDialogURL" size="48" placeholder="<?php echo i18n('Enter_image_URL');?>" />
@ -267,18 +261,12 @@ $( function() {
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<?php if (!empty($images)) :?>
<div class="form-group"> <div class="form-group">
<div class="row-fluid cover-container"> <div class="row-fluid img-container" id="gallery-2">
<?php foreach ($images as $img):?> <?php echo $images;?>
<div class="cover-item">
<img class="img-thumbnail the-img" src="<?php echo site_url() . $img['dirname'] . '/' . $img['basename']?>">
</div>
<?php endforeach;?>
</div> </div>
</div> </div>
<hr> <hr>
<?php endif;?>
<div class="form-group"> <div class="form-group">
<label for="insertMediaDialogURL">URL</label> <label for="insertMediaDialogURL">URL</label>
<input type="text" class="form-control" id="insertMediaDialogURL" size="48" placeholder="<?php echo i18n('Enter_image_URL');?>" /> <input type="text" class="form-control" id="insertMediaDialogURL" size="48" placeholder="<?php echo i18n('Enter_image_URL');?>" />
@ -301,12 +289,25 @@ $( function() {
</div> </div>
<!-- Declare the base path. Important --> <!-- Declare the base path. Important -->
<script type="text/javascript">var base_path = '<?php echo site_url() ?>';</script> <script type="text/javascript">var base_path = '<?php echo site_url() ?>'; var initial_image = '<?php echo $images;?>';</script>
<script type="text/javascript" src="<?php echo site_url() ?>system/admin/editor/js/editor.js"></script> <script type="text/javascript" src="<?php echo site_url() ?>system/admin/editor/js/editor.js"></script>
<script type="text/javascript" src="<?php echo site_url() ?>system/resources/js/media.uploader.js"></script> <script type="text/javascript" src="<?php echo site_url() ?>system/resources/js/media.uploader.js"></script>
<script> <script>
$('.the-img').click(function(e) { function loadImages(page) {
$.ajax({
url: '<?php echo site_url();?>admin/gallery',
type: 'POST',
data: { page: page },
dataType: 'json',
success: function(response) {
$('#gallery-1').html(response.images);
$('#gallery-2').html(response.images);
}
});
}
$('.img-container').on("click", ".the-img", function(e) {
$('#insertMediaDialogURL').val($(e.target).attr('src')); $('#insertMediaDialogURL').val($(e.target).attr('src'));
$('#insertImageDialogURL').val($(e.target).attr('src')); $('#insertImageDialogURL').val($(e.target).attr('src'));
}); });
</script> </script>

32
system/admin/views/add-page.html.php
View file

@ -1,5 +1,5 @@
<?php if (!defined('HTMLY')) die('HTMLy'); ?> <?php if (!defined('HTMLY')) die('HTMLy'); ?>
<?php $images = get_gallery(); ?> <?php $images = image_gallery(null, 1, 40); ?>
<link rel="stylesheet" type="text/css" href="<?php echo site_url() ?>system/admin/editor/css/editor.css"/> <link rel="stylesheet" type="text/css" href="<?php echo site_url() ?>system/admin/editor/css/editor.css"/>
<script src="<?php echo site_url() ?>system/resources/js/jquery.min.js"></script> <script src="<?php echo site_url() ?>system/resources/js/jquery.min.js"></script>
<script src="<?php echo site_url() ?>system/resources/js/jquery-ui.min.js"></script> <script src="<?php echo site_url() ?>system/resources/js/jquery-ui.min.js"></script>
@ -91,18 +91,12 @@
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<?php if (!empty($images)) :?>
<div class="form-group"> <div class="form-group">
<div class="row-fluid cover-container"> <div class="row-fluid img-container" id="gallery-1">
<?php foreach ($images as $img):?> <?php echo $images;?>
<div class="cover-item">
<img class="img-thumbnail the-img" src="<?php echo site_url() . $img['dirname'] . '/' . $img['basename']?>">
</div>
<?php endforeach;?>
</div> </div>
</div> </div>
<hr> <hr>
<?php endif;?>
<div class="form-group"> <div class="form-group">
<label for="insertImageDialogURL">URL</label> <label for="insertImageDialogURL">URL</label>
<input type="text" class="form-control" id="insertImageDialogURL" size="48" placeholder="<?php echo i18n('Enter_image_URL');?>" /> <input type="text" class="form-control" id="insertImageDialogURL" size="48" placeholder="<?php echo i18n('Enter_image_URL');?>" />
@ -122,10 +116,24 @@
</div> </div>
</div> </div>
<!-- Declare the base path. Important --> <!-- Declare the base path. Important -->
<script type="text/javascript">var base_path = '<?php echo site_url() ?>';</script> <script type="text/javascript">var base_path = '<?php echo site_url() ?>'; var initial_image = '<?php echo $images;?>';</script>
<script type="text/javascript" src="<?php echo site_url() ?>system/admin/editor/js/editor.js"></script> <script type="text/javascript" src="<?php echo site_url() ?>system/admin/editor/js/editor.js"></script>
<script> <script>
$('.the-img').click(function(e) { function loadImages(page) {
$('#insertImageDialogURL').val($(e.target).attr('src')); $.ajax({
url: '<?php echo site_url();?>admin/gallery',
type: 'POST',
data: { page: page },
dataType: 'json',
success: function(response) {
$('#gallery-1').html(response.images);
$('#gallery-2').html(response.images);
}
}); });
}
$('.img-container').on("click", ".the-img", function(e) {
$('#insertMediaDialogURL').val($(e.target).attr('src'));
$('#insertImageDialogURL').val($(e.target).attr('src'));
});
</script> </script>

41
system/admin/views/edit-content.html.php
View file

@ -69,7 +69,7 @@ if (file_exists($tagslang)) {
file_put_contents($tagslang, print_r($tmp, true), LOCK_EX); file_put_contents($tagslang, print_r($tmp, true), LOCK_EX);
} }
$images = get_gallery(); $images = image_gallery(null, 1, 40);
?> ?>
<link rel="stylesheet" type="text/css" href="<?php echo site_url() ?>system/admin/editor/css/editor.css"/> <link rel="stylesheet" type="text/css" href="<?php echo site_url() ?>system/admin/editor/css/editor.css"/>
@ -278,18 +278,12 @@ $( function() {
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<?php if (!empty($images)) :?>
<div class="form-group"> <div class="form-group">
<div class="row-fluid cover-container"> <div class="row-fluid img-container" id="gallery-1">
<?php foreach ($images as $img):?> <?php echo $images;?>
<div class="cover-item">
<img class="img-thumbnail the-img" src="<?php echo site_url() . $img['dirname'] . '/' . $img['basename']?>">
</div>
<?php endforeach;?>
</div> </div>
</div> </div>
<hr> <hr>
<?php endif;?>
<div class="form-group"> <div class="form-group">
<label for="insertImageDialogURL">URL</label> <label for="insertImageDialogURL">URL</label>
<input type="text" class="form-control" id="insertImageDialogURL" size="48" placeholder="<?php echo i18n('Enter_image_URL');?>" /> <input type="text" class="form-control" id="insertImageDialogURL" size="48" placeholder="<?php echo i18n('Enter_image_URL');?>" />
@ -318,18 +312,12 @@ $( function() {
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<?php if (!empty($images)) :?>
<div class="form-group"> <div class="form-group">
<div class="row-fluid cover-container"> <div class="row-fluid img-container" id="gallery-2">
<?php foreach ($images as $img):?> <?php echo $images;?>
<div class="cover-item">
<img class="img-thumbnail the-img" src="<?php echo site_url() . $img['dirname'] . '/' . $img['basename']?>">
</div>
<?php endforeach;?>
</div> </div>
</div> </div>
<hr> <hr>
<?php endif;?>
<div class="form-group"> <div class="form-group">
<label for="insertMediaDialogURL">URL</label> <label for="insertMediaDialogURL">URL</label>
<input type="text" class="form-control" id="insertMediaDialogURL" size="48" placeholder="<?php echo i18n('Enter_image_URL');?>" /> <input type="text" class="form-control" id="insertMediaDialogURL" size="48" placeholder="<?php echo i18n('Enter_image_URL');?>" />
@ -351,12 +339,25 @@ $( function() {
</div> </div>
<!-- Declare the base path. Important --> <!-- Declare the base path. Important -->
<script type="text/javascript">var base_path = '<?php echo site_url() ?>';</script> <script type="text/javascript">var base_path = '<?php echo site_url() ?>'; var initial_image = '<?php echo $images;?>';</script>
<script type="text/javascript" src="<?php echo site_url() ?>system/admin/editor/js/editor.js"></script> <script type="text/javascript" src="<?php echo site_url() ?>system/admin/editor/js/editor.js"></script>
<script type="text/javascript" src="<?php echo site_url() ?>system/resources/js/media.uploader.js"></script> <script type="text/javascript" src="<?php echo site_url() ?>system/resources/js/media.uploader.js"></script>
<script> <script>
$('.the-img').click(function(e) { function loadImages(page) {
$.ajax({
url: '<?php echo site_url();?>admin/gallery',
type: 'POST',
data: { page: page },
dataType: 'json',
success: function(response) {
$('#gallery-1').html(response.images);
$('#gallery-2').html(response.images);
}
});
}
$('.img-container').on("click", ".the-img", function(e) {
$('#insertMediaDialogURL').val($(e.target).attr('src')); $('#insertMediaDialogURL').val($(e.target).attr('src'));
$('#insertImageDialogURL').val($(e.target).attr('src')); $('#insertImageDialogURL').val($(e.target).attr('src'));
}); });
</script> </script>

32
system/admin/views/edit-page.html.php
View file

@ -76,7 +76,7 @@ if ($type == 'is_frontpage') {
} }
} }
$images = get_gallery(); $images = image_gallery(null, 1, 40);
?> ?>
<link rel="stylesheet" type="text/css" href="<?php echo site_url() ?>system/admin/editor/css/editor.css"/> <link rel="stylesheet" type="text/css" href="<?php echo site_url() ?>system/admin/editor/css/editor.css"/>
@ -184,18 +184,12 @@ $images = get_gallery();
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<?php if (!empty($images)) :?>
<div class="form-group"> <div class="form-group">
<div class="row-fluid cover-container"> <div class="row-fluid img-container" id="gallery-1">
<?php foreach ($images as $img):?> <?php echo $images;?>
<div class="cover-item">
<img class="img-thumbnail the-img" src="<?php echo site_url() . $img['dirname'] . '/' . $img['basename']?>">
</div>
<?php endforeach;?>
</div> </div>
</div> </div>
<hr> <hr>
<?php endif;?>
<div class="form-group"> <div class="form-group">
<label for="insertImageDialogURL">URL</label> <label for="insertImageDialogURL">URL</label>
<input type="text" class="form-control" id="insertImageDialogURL" size="48" placeholder="<?php echo i18n('Enter_image_URL');?>" /> <input type="text" class="form-control" id="insertImageDialogURL" size="48" placeholder="<?php echo i18n('Enter_image_URL');?>" />
@ -215,10 +209,24 @@ $images = get_gallery();
</div> </div>
</div> </div>
<!-- Declare the base path. Important --> <!-- Declare the base path. Important -->
<script type="text/javascript">var base_path = '<?php echo site_url() ?>';</script> <script type="text/javascript">var base_path = '<?php echo site_url() ?>'; var initial_image = '<?php echo $images;?>';</script>
<script type="text/javascript" src="<?php echo site_url() ?>system/admin/editor/js/editor.js"></script> <script type="text/javascript" src="<?php echo site_url() ?>system/admin/editor/js/editor.js"></script>
<script> <script>
$('.the-img').click(function(e) { function loadImages(page) {
$('#insertImageDialogURL').val($(e.target).attr('src')); $.ajax({
url: '<?php echo site_url();?>admin/gallery',
type: 'POST',
data: { page: page },
dataType: 'json',
success: function(response) {
$('#gallery-1').html(response.images);
$('#gallery-2').html(response.images);
}
}); });
}
$('.img-container').on("click", ".the-img", function(e) {
$('#insertMediaDialogURL').val($(e.target).attr('src'));
$('#insertImageDialogURL').val($(e.target).attr('src'));
});
</script> </script>

8
system/htmly.php
View file

@ -1824,6 +1824,14 @@ post('/admin/menu', function () {
} }
}); });
post('/admin/gallery', function () {
if (login()) {
$page = from($_REQUEST, 'page');
$images = image_gallery(null, $page, 40);
echo json_encode(array('images' => $images));
}
});
// Show category page // Show category page
get('/admin/categories', function () { get('/admin/categories', function () {

2
system/resources/js/media.uploader.js
View file

@ -8,6 +8,8 @@
$('#insertImageDialogFile').val(''); $('#insertImageDialogFile').val('');
$('#insertMediaDialogURL').val(''); $('#insertMediaDialogURL').val('');
$('#insertMediaDialogFile').val(''); $('#insertMediaDialogFile').val('');
$('#gallery-1').html(initial_image);
$('#gallery-2').html(initial_image);
}; };
$('#insertMediaDialogInsert').click( function() { $('#insertMediaDialogInsert').click( function() {
$('.media-uploader').val(''); $('.media-uploader').val('');