Chèn nút Xem thêm vào Gallery Flatsome

// Code nút xem thêm vào mục Gallery hình ảnh Flatsome webantam.com
function enqueue_custom_gallery_wat_assets() {
wp_enqueue_script('jquery');
wp_register_style('custom-gallery-style', false);
wp_enqueue_style('custom-gallery-style'); 
$custom_gallery_css = '
.show-more-gallery-btn-wat {
display: flex;
align-items: center;
justify-content: center;
margin: 20px auto;
padding: 5px 30px;
background-color: #0073aa;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
position: relative;
overflow: hidden;
transition: background-color 0.3s ease;
}
.show-more-gallery-btn-wat:hover {
background-color: #005f8d;
}
.show-more-gallery-btn-wat.loading {
pointer-events: none;
opacity: 0.8;
}
';
wp_add_inline_style('custom-gallery-style', $custom_gallery_css);
$custom_gallery_js = '
jQuery(document).ready(function($) {
$(".row[class*=\'columns-\']").each(function(index) {
var galleryRow = $(this);
var galleryCols = galleryRow.find(".gallery-col");
var columnCount = getColumnCount(galleryRow);
var rowsToShow = 4;
var itemsPerPage = columnCount * rowsToShow;
var totalItems = galleryCols.length;
var itemsShown = 0;
function getColumnCount(row) {
var classes = row.attr("class").split(" ");
for (var i = 0; i < classes.length; i++) {
if (classes[i].includes("columns-")) {
return parseInt(classes[i].split("-").pop());
}
}
return 4; // Mặc định là 4 cột nếu không tìm thấy class
}
function showNextItems() {
var nextItems = galleryCols.slice(itemsShown, itemsShown + itemsPerPage);
nextItems.slideDown();
itemsShown += nextItems.length;
if (itemsShown >= totalItems) {
galleryRow.next(".show-more-gallery-btn-wat").fadeOut();
}
}
galleryCols.hide();
showNextItems();
if (totalItems > itemsPerPage) {
var buttonHtml = "<button class=\"show-more-gallery-btn-wat\">Xem thêm</button>";
galleryRow.after(buttonHtml);
galleryRow.next(".show-more-gallery-btn-wat").on("click", function() {
var button = $(this);
button.prop("disabled", true);
button.addClass("loading");
button.html("Đang tải thêm...");
setTimeout(function() {
showNextItems();
button.prop("disabled", false);
button.removeClass("loading");
button.html("Xem thêm");
}, 1000);
});
}
});
});
';
wp_add_inline_script('jquery-core', $custom_gallery_js);
}
add_action('wp_enqueue_scripts', 'enqueue_custom_gallery_wat_assets');

// Code nút xem thêm cho nội dung dạng lưới trên theme Flatsome
function enqueue_custom_load_more_row_assets() {
wp_enqueue_script('jquery');
wp_register_style('custom-load-more-style', false);
wp_enqueue_style('custom-load-more-style'); 
$custom_load_more_css = '
.load-more-btn-wat {
display: flex;
align-items: center;
justify-content: center;
margin: 20px auto;
padding: 5px 30px;
background-color: #0073aa;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
position: relative;
overflow: hidden;
transition: background-color 0.3s ease;
}
.load-more-btn-wat:hover {
background-color: #005f8d;
}
.load-more-btn-wat.loading {
pointer-events: none;
opacity: 0.8;
}
';
wp_add_inline_style('custom-load-more-style', $custom_load_more_css);
$custom_load_more_js = '
jQuery(document).ready(function($) {
$(".row.row-bao-chi").each(function(index) {
var contentRow = $(this);
var contentCols = contentRow.find(".col");
var columnCount = 3; // Cố định 3 cột
var rowsToShow = 1; // Hiển thị 1 dòng mỗi lần
var itemsPerPage = columnCount * rowsToShow;
var totalItems = contentCols.length;
var itemsShown = 0;

function showNextItems() {
var nextItems = contentCols.slice(itemsShown, itemsShown + itemsPerPage);
nextItems.slideDown();
itemsShown += nextItems.length;
if (itemsShown >= totalItems) {
contentRow.next(".load-more-btn-wat").fadeOut();
}
}

contentCols.hide();
showNextItems();

if (totalItems > itemsPerPage) {
var buttonHtml = "<button class=\"load-more-btn-wat\">Xem thêm</button>";
contentRow.after(buttonHtml);
contentRow.next(".load-more-btn-wat").on("click", function() {
var button = $(this);
button.prop("disabled", true);
button.addClass("loading");
button.html("Đang tải thêm...");
setTimeout(function() {
showNextItems();
button.prop("disabled", false);
button.removeClass("loading");
button.html("Xem thêm");
}, 1000);
});
}
});
});
';
wp_add_inline_script('jquery-core', $custom_load_more_js);
}
add_action('wp_enqueue_scripts', 'enqueue_custom_load_more_row_assets');