Chia sẽ code nút xem thêm vào mục Gallery hình ảnh Flatsome

Thông báo: Nội dung trên trang web này là những kiến thức mà mình đã sưu tầm từ nhiều nguồn trên mạng, cũng như những gì mình học hỏi và tích lũy được. Nếu bất kỳ bài viết nào trên trang vô tình vi phạm bản quyền của tác giả, xin vui lòng thông báo cho mình để mình có thể gỡ bỏ ngay lập tức. Rất mong nhận được sự thông cảm và hỗ trợ từ mọi người. Xin cảm ơn!

Mặc định trình tạo Gallery của Flatsome

Mặc đình trình tạo Gallery của Flatsome không có kiểu tải xem thêm hình ảnh mà nó xổ ra hết hình ảnh cùng 1 lúc, nếu có 10000 hình ảnh trong Gallery thì để mặc đỉnh tải đuối đơ không biết khi nào xong, nên theo design khách gửi phải code thêm nút “Xem thêm” để chủ động trong việc cho hiển thị bao nhiêu ảnh thôi, và tải trang sẽ ổn hơn

code nút xem thêm vào mục Gallery hình ảnh Flatsome

Bạn sao chép code dưới đây bỏ vào Funtion.php của child theme nhé, xem hình ảnh bên dưới

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');

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 vào mục Gallery hình ảnh Flatsome

Điều chỉnh bao nhêu hàng hiển thị theo mong muốn

Bạn muốn hiển thị bao nhiêu hàng thì mới hiển thị nút ” xem thêm ” thì điều chỉnh theo hình ảnh bên dưới nhé

Lời kết

Nếu trong quá trình thao tác các bạn có khó khăn gì có thể liên hệ mình nhé.

Flatsome Tips, Wordpress

Mặc định trình tạo Gallery của Flatsome

code nút xem thêm vào mục Gallery hình ảnh Flatsome

Điều chỉnh bao nhêu hàng hiển thị theo mong muốn

Lời kết

Bài viết mới cập nhật:

Dev Panda

Bài Viết Cùng Chủ Đề:

Dev Panda

Dev Panda