global $prefix,$currentlang,$db,$site_live,$multilingual,$ThemeSel;
$uil = new Uil();
$thum = new thumnail();
$whe = $uil->getWhereCat("Duan",1);
if (isset($_POST['page'])) {
// Số sản phẩm mỗi trang
$limit = 9;
// Trang hiện tại
$page = (int)$_POST['page'];
if ($page < 1) $page = 1;
// Vị trí bắt đầu
$start = ($page - 1) * $limit;
// Điều kiện ngôn ngữ
if ($multilingual == 1) {
$querylang = "AND (alanguage='$currentlang' OR alanguage='')";
} else {
$querylang = "";
}
// Điều kiện chuyên mục (tạm fix luôn = 1)
// $whe = "catid=27";
// Đếm tổng
$sql_count = "SELECT COUNT(*) AS total
FROM ".$prefix."_stories
WHERE $whe $querylang";
$rs_count = $db->sql_query($sql_count);
$row_count = $db->sql_fetchrow($rs_count);
$total = $row_count['total'];
$total_pages = ceil($total / $limit);
// Lấy dữ liệu
$sql = "SELECT * FROM ".$prefix."_stories
WHERE $whe $querylang
ORDER BY sid DESC
LIMIT $start, $limit";
$rs = $db->sql_query($sql);
$data = array();
while ($row = $db->sql_fetchrow($rs)) {
$data[] = $row;
}
// Xuất HTML
foreach ($data as $value) {
$link = "/du-an/".$value['sid_link'];
echo '<div class="catsp">
<a href="'.$link.'" class="case-link">
<img src="/uploads/News/pic/'.$value["images"].'" alt="">
<p class="view">View</p>
</a>
<div class="title">'.$value["title"].'</div>
</div>';
}
// Xuất nút phân trang
if ($total_pages > 1) {
echo '<div class="pagination">';
for ($i = 1; $i <= $total_pages; $i++) {
$active = ($i == $page) ? "active" : "";
echo '<a href="#" class="page-link '.$active.'" data-page="'.$i.'">'.$i.'</a>';
}
echo '</div>';
}
exit; // Chặn không cho load phần HTML phía dưới
}
?>
<div id="gallery" class="gallery"></div>
<div id="loading"></div>
<script>
function load_data(page) {
$.ajax({
// url: "gallery.php",
url: "/index.php?op=show__duan",
type: "POST",
data: {page: page},
beforeSend: function() {
$("#loading").html("<p>Đang tải...</p>");
},
success: function(data) {
$("#gallery").html(data);
$("#loading").html("");
}
});
}
// Load trang đầu tiên
load_data(1);
// Sự kiện click phân trang
$(document).on("click", ".page-link", function(e) {
e.preventDefault();
var page = $(this).data("page");
load_data(page);
});
</script>
<style>
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px; /* khoảng cách đều nhau giữa các ảnh */
width: 100%;
height: auto; /* để auto chiều cao, đừng fix 100vh */
}
.gallery .catsp {
position: relative;
overflow: hidden;
/*aspect-ratio: 1/1; hoặc bỏ nếu muốn giữ theo tỉ lệ ảnh */
/* aspect-ratio: 16/9; hình nằm ngang */
aspect-ratio: 4/3; /* cao hơn 16/9 */
border-radius: 8px;
}
.catsp img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
display: block;
}
.catsp:hover img {
transform: scale(1.05);
}
/* Title luôn có nhưng animate khi load */
.title {
position: absolute;
bottom: 1px;
left: 2px;
width: 99%;
text-align: center;
font-size: 15px;
color: #fff;
background: rgba(0, 0, 0, 0.5);
padding: 10px;
transform: translateY(100%);
animation: slideUp 0.8s ease forwards;
opacity: 1;
}
@keyframes slideUp {
from { transform: translateY(100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.catsp:hover .title {
opacity: 0.5;
display: none;
}
a.case-link p {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
display: grid;
align-content: center;
z-index: 999999;
color: white;
text-transform: uppercase;
font-size: 18px !important;
letter-spacing: 5px !important;
top: -10px;
opacity: 0;
transition: .15s ease-in-out !important;
}
p:not(.has-background):last-of-type {
padding-bottom: 0;
}
a.case-link:hover p {
top: 0;
opacity: 1;
}
.vhtitlehome h2 {
border-left: 5px solid red;
text-transform: uppercase;
padding-left: 10px;
}
.vhtitlehome {
margin-bottom: 15px;
}
/* ===== Responsive ===== */
/* Tablet (dưới 992px): 2 cột */
@media (max-width: 992px) {
.gallery {
grid-template-columns: repeat(2, 1fr);
padding: 10px;
}
}
/* Mobile (dưới 576px): 1 cột */
@media (max-width: 576px) {
.gallery {
grid-template-columns: 1fr;
padding: 10px;
}
}
.pagination {
grid-column: 1 / -1; /* chiếm hết chiều ngang grid */
text-align: center; /* căn giữa */
margin-top: 20px;
}
.pagination .page-link {
display: inline-block;
padding: 8px 15px;
margin: 0 5px;
border: 1px solid #ddd;
border-radius: 5px;
background: #f5f5f5;
color: #333;
text-decoration: none;
transition: 0.3s;
}
.pagination .page-link:hover {
background: #e0e0e0;
}
.pagination .page-link.active {
background: #333;
color: #fff;
border-color: #333;
}
/* Mobile pagination: nút nhỏ hơn */
@media (max-width: 480px) {
.pagination .page-link {
padding: 6px 12px;
font-size: 13px;
margin: 3px;
}
}
</style>
<?php
Không có nhận xét nào:
Đăng nhận xét