{"id":895,"date":"2018-10-18T09:48:40","date_gmt":"2018-10-18T09:48:40","guid":{"rendered":"https:\/\/awplife.com\/demo\/image-gallery-premium\/?page_id=895"},"modified":"2020-11-26T10:34:53","modified_gmt":"2020-11-26T10:34:53","slug":"load-more","status":"publish","type":"page","link":"https:\/\/awplife.com\/demo\/image-gallery-premium\/load-more\/","title":{"rendered":"Load More"},"content":{"rendered":"\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\t<!-- Premium Gallery Engine Assets -->\r\n\t<style>\r\n\t\t#image_gallery_wrap_894 {\r\n            --ig-gutter: 8px;\r\n            --ig-cols-lg: 4;\r\n            --ig-cols-md: 3;\r\n            --ig-cols-sm: 3;\r\n            --ig-cols-xs: 2;\r\n            --ig-grid-aspect-ratio: 1\/1;\r\n            \r\n            \/* Dynamic Border Variables *\/\r\n                        --ig-card-border-color: rgba(238, 242, 246, 1);\r\n            --ig-card-bg-color: rgba(255, 255, 255, 1);\r\n            --ig-radius: 8px;\r\n            --ig-card-radius: 8px;\r\n            --ig-card-padding: 8px;\r\n\r\n            \/* Load More Customization *\/\r\n            --ig-lm-bg: #1e73be;\r\n            --ig-lm-txt: #ffffff;\r\n            --ig-lm-hover: #4338ca;\r\n            --ig-lm-px: 32px;\r\n            --ig-lm-py: 12px;\r\n            --ig-lm-radius: 50px;\r\n\r\n            \/* Loader Customization *\/\r\n            --ig-loader-color: #4f46e5;\r\n        }\r\n\r\n        .ig-load-more-container {\r\n            width: 100%;\r\n            text-align: center;\r\n            margin: 40px 0;\r\n            display: block;\r\n        }\r\n\r\n        .img_load_more_894 {\r\n            display: inline-block;\r\n            margin: 0 auto;\r\n            padding: var(--ig-lm-py) var(--ig-lm-px);\r\n            border-radius: var(--ig-lm-radius);\r\n            font-size: 16px;\r\n            font-weight: 600;\r\n            cursor: pointer;\r\n            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n            text-align: center;\r\n            text-decoration: none;\r\n            outline: none;\r\n            font-family: inherit;\r\n            border: 2px solid transparent;\r\n            box-sizing: border-box;\r\n            vertical-align: middle;\r\n\r\n                            background-color: var(--ig-lm-bg) !important;\r\n                color: var(--ig-lm-txt) !important;\r\n                border: none !important;\r\n                    }\r\n\r\n        .img_load_more_894:hover {\r\n                            background-color: var(--ig-lm-hover) !important;\r\n                transform: translateY(-2px);\r\n                box-shadow: 0 8px 25px -8px var(--ig-lm-hover) !important;\r\n                    }\r\n\r\n        .img_load_more_894:active {\r\n            transform: scale(0.95);\r\n        }\r\n\r\n                #image_gallery_894,\r\n        #image_gallery_wrap_894 .ig-custom-profile-header {\r\n            opacity: 0;\r\n            transition: opacity 0.4s ease;\r\n        }\r\n        \r\n\t\t\t<\/style>\r\n        <div id=\"image_gallery_wrap_894\" class=\"ig-gallery-outer-wrap ig-layout-masonry\" data-layout=\"masonry\" data-lb-loop=\"1\" data-version=\"6.7.3\">\r\n        <div class=\"ig-gallery-loader\" id=\"ig_loader_894\" aria-label=\"Loading gallery...\">\r\n                    <div class=\"ig-loader-spinner-icon\"><\/div>\r\n            <\/div>\r\n    \r\n        <div id=\"image_gallery_894\" \n         class=\"ig-row igp-gallery all-images_894\">\n        <div class=\"grid-sizer\"><\/div>\n                        <div class=\"ig-col single-image igp-item ig-4 ig-3 ig-3 ig-2\" data-index=\"0\">\n            <div class=\"ig-image-card igp-card ig-has-card-border \">\n                                                                                    <a class=\"ig-lightbox-item\" href=\"https:\/\/awplife.com\/demo\/image-gallery-premium\/wp-content\/uploads\/sites\/15\/2022\/07\/tyler-nix-6mze64HRU2Q-unsplash.jpg\" data-lightbox=\"ig-gallery-894\" data-title=\"Travel Van\" data-description=\"\" data-width=\"640\" data-height=\"960\">\n                                                        \n                    \n                    <div class=\"ig-image-container \">\n                        <div class=\"ig-skeleton ig-loading\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"960\" src=\"https:\/\/awplife.com\/demo\/image-gallery-premium\/wp-content\/uploads\/sites\/15\/2022\/07\/tyler-nix-6mze64HRU2Q-unsplash.jpg\" class=\"ig-thumbnail loading\" alt=\"Travel Van\" \/><\/div>                        \n                                                    <div class=\"ig-overlay ig-overlay-bottom\">\n                                                                <span class=\"ig-item-title\">Travel Van<\/span>\n                            <\/div>\n                                                \n                                            <\/div>\n\n                    \n                                    <\/a>\n                            <\/div>\n                    <\/div>\n                        <div class=\"ig-col single-image igp-item ig-4 ig-3 ig-3 ig-2\" data-index=\"1\">\n            <div class=\"ig-image-card igp-card ig-has-card-border \">\n                                                                                    <a class=\"ig-lightbox-item\" href=\"https:\/\/awplife.com\/demo\/image-gallery-premium\/wp-content\/uploads\/sites\/15\/2025\/01\/shamblen-studios-zJphVSgUOoo-unsplash.jpg\" data-lightbox=\"ig-gallery-894\" data-title=\"Colour Full flower\" data-description=\"\" data-width=\"640\" data-height=\"640\">\n                                                        \n                    \n                    <div class=\"ig-image-container \">\n                        <div class=\"ig-skeleton ig-loading\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"640\" src=\"https:\/\/awplife.com\/demo\/image-gallery-premium\/wp-content\/uploads\/sites\/15\/2025\/01\/shamblen-studios-zJphVSgUOoo-unsplash.jpg\" class=\"ig-thumbnail loading\" alt=\"Colour Full flower\" \/><\/div>                        \n                                                    <div class=\"ig-overlay ig-overlay-bottom\">\n                                                                <span class=\"ig-item-title\">Colour Full flower<\/span>\n                            <\/div>\n                                                \n                                            <\/div>\n\n                    \n                                    <\/a>\n                            <\/div>\n                    <\/div>\n                        <div class=\"ig-col single-image igp-item ig-4 ig-3 ig-3 ig-2\" data-index=\"2\">\n            <div class=\"ig-image-card igp-card ig-has-card-border \">\n                                                                                    <a class=\"ig-lightbox-item\" href=\"https:\/\/awplife.com\/demo\/image-gallery-premium\/wp-content\/uploads\/sites\/15\/2025\/01\/salah-regouane-ZZd4FJwUGHU-unsplash-scaled.jpg\" data-lightbox=\"ig-gallery-894\" data-title=\"Ballon\" data-description=\"\" data-width=\"1601\" data-height=\"2560\">\n                                                        \n                    \n                    <div class=\"ig-image-container \">\n                        <div class=\"ig-skeleton ig-loading\"><img loading=\"lazy\" decoding=\"async\" width=\"1601\" height=\"2560\" src=\"https:\/\/awplife.com\/demo\/image-gallery-premium\/wp-content\/uploads\/sites\/15\/2025\/01\/salah-regouane-ZZd4FJwUGHU-unsplash-scaled.jpg\" class=\"ig-thumbnail loading\" alt=\"Ballon\" \/><\/div>                        \n                                                    <div class=\"ig-overlay ig-overlay-bottom\">\n                                                                <span class=\"ig-item-title\">Ballon<\/span>\n                            <\/div>\n                                                \n                                            <\/div>\n\n                    \n                                    <\/a>\n                            <\/div>\n                    <\/div>\n                        <div class=\"ig-col single-image igp-item ig-4 ig-3 ig-3 ig-2\" data-index=\"3\">\n            <div class=\"ig-image-card igp-card ig-has-card-border \">\n                                                                                    <a class=\"ig-lightbox-item\" href=\"https:\/\/awplife.com\/demo\/image-gallery-premium\/wp-content\/uploads\/sites\/15\/2025\/01\/michael-dziedzic-tG5pIdfy27c-unsplash.jpg\" data-lightbox=\"ig-gallery-894\" data-title=\"unsplash\" data-description=\"\" data-width=\"1920\" data-height=\"1443\">\n                                                        \n                    \n                    <div class=\"ig-image-container \">\n                        <div class=\"ig-skeleton ig-loading\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1443\" src=\"https:\/\/awplife.com\/demo\/image-gallery-premium\/wp-content\/uploads\/sites\/15\/2025\/01\/michael-dziedzic-tG5pIdfy27c-unsplash.jpg\" class=\"ig-thumbnail loading\" alt=\"unsplash\" \/><\/div>                        \n                                                    <div class=\"ig-overlay ig-overlay-bottom\">\n                                                                <span class=\"ig-item-title\">unsplash<\/span>\n                            <\/div>\n                                                \n                                            <\/div>\n\n                    \n                                    <\/a>\n                            <\/div>\n                    <\/div>\n                        <div class=\"ig-col single-image igp-item ig-4 ig-3 ig-3 ig-2\" data-index=\"4\">\n            <div class=\"ig-image-card igp-card ig-has-card-border \">\n                                                                                    <a class=\"ig-lightbox-item\" href=\"https:\/\/awplife.com\/demo\/image-gallery-premium\/wp-content\/uploads\/sites\/15\/2025\/01\/mae-mu-XTztXbv6gMs-unsplash-1.jpg\" data-lightbox=\"ig-gallery-894\" data-title=\"Photos, Food &amp; Drink\" data-description=\"\" data-width=\"640\" data-height=\"800\">\n                                                        \n                    \n                    <div class=\"ig-image-container \">\n                        <div class=\"ig-skeleton ig-loading\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"800\" src=\"https:\/\/awplife.com\/demo\/image-gallery-premium\/wp-content\/uploads\/sites\/15\/2025\/01\/mae-mu-XTztXbv6gMs-unsplash-1.jpg\" class=\"ig-thumbnail loading\" alt=\"Photos, Food &amp; Drink\" \/><\/div>                        \n                                                    <div class=\"ig-overlay ig-overlay-bottom\">\n                                                                <span class=\"ig-item-title\">Photos, Food &amp; Drink<\/span>\n                            <\/div>\n                                                \n                                            <\/div>\n\n                    \n                                    <\/a>\n                            <\/div>\n                    <\/div>\n                        <div class=\"ig-col single-image igp-item ig-4 ig-3 ig-3 ig-2\" data-index=\"5\">\n            <div class=\"ig-image-card igp-card ig-has-card-border \">\n                                                                                    <a class=\"ig-lightbox-item\" href=\"https:\/\/awplife.com\/demo\/image-gallery-premium\/wp-content\/uploads\/sites\/15\/2025\/01\/mae-mu-f_cNyVCExTM-unsplash.jpg\" data-lightbox=\"ig-gallery-894\" data-title=\"Lemon\" data-description=\"\" data-width=\"640\" data-height=\"800\">\n                                                        \n                    \n                    <div class=\"ig-image-container \">\n                        <div class=\"ig-skeleton ig-loading\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"800\" src=\"https:\/\/awplife.com\/demo\/image-gallery-premium\/wp-content\/uploads\/sites\/15\/2025\/01\/mae-mu-f_cNyVCExTM-unsplash.jpg\" class=\"ig-thumbnail loading\" alt=\"Lemon\" \/><\/div>                        \n                                                    <div class=\"ig-overlay ig-overlay-bottom\">\n                                                                <span class=\"ig-item-title\">Lemon<\/span>\n                            <\/div>\n                                                \n                                            <\/div>\n\n                    \n                                    <\/a>\n                            <\/div>\n                    <\/div>\n            <\/div>\n\n        <div class=\"text-center ig-load-more-container\" role=\"status\" aria-live=\"polite\">\n        <button class=\"img_load_more img_load_more_894\" \n                data-gallery-id=\"894\" \n                data-start=\"6\" \n                data-limit=\"6\"\n                data-total=\"28\"\n                data-rand-seed=\"62894\"\n                aria-label=\"Load More\">\n            Load More        <\/button>\n        <div class=\"ig-loader-spinner img_loader_894\" style=\"display:none;\" aria-hidden=\"true\"><\/div>\n        <p class=\"ig-no-more-msg no_more_894\" style=\"display:none;\">\n            All images loaded        <\/p>\n    <\/div>\n    \n    <script>\njQuery(document).ready(function($) {\n    var galleryID = 894;\n    var showLoop = true;\n    \n    function initGLightbox() {\n        if (typeof GLightbox !== 'undefined') {\n            const lightbox = GLightbox({\n                selector: '#image_gallery_' + galleryID + ' .ig-lightbox-item',\n                touchNavigation: true,\n                loop: showLoop,\n                autoplayVideos: true,\n                titleAttribute: 'data-title',\n                descriptionAttribute: 'data-description'\n            });\n            return lightbox;\n        }\n    }\n\n    var lb_instance = null;\n    if (typeof GLightbox !== 'undefined') {\n        lb_instance = initGLightbox();\n    } else {\n        console.error('GLightbox library not loaded');\n    }\n\n    \/\/ Prevent default anchor behavior\n    $(document).on('click', '#image_gallery_' + galleryID + ' a.ig-lightbox-item', function(e) {\n        e.preventDefault();\n    });\n\n    \/\/ Update when new items are added via AJAX\n    $('#image_gallery_wrap_' + galleryID).on('ig_items_added', function() {\n        if (lb_instance) {\n            lb_instance.reload();\n        } else {\n            lb_instance = initGLightbox();\n        }\n    });\n});\n<\/script>\n<style>\n    \/* Ensure GLightbox image stays within viewport and doesn't obscure caption *\/\n    .glightbox-container .gslide-image img {\n        max-height: 80vh !important;\n        width: auto !important;\n        object-fit: contain !important;\n        margin: 0 auto;\n    }\n    .glightbox-container .gslide-description {\n        max-height: 15vh !important;\n        overflow-y: auto !important;\n    }\n<\/style>\n    <script>\r\n    setTimeout(function() {\r\n        var loader = document.getElementById(\"ig_loader_894\");\r\n        var gallery = document.getElementById(\"image_gallery_894\");\r\n        var profile = document.querySelector(\"#image_gallery_wrap_894 .ig-custom-profile-header\");\r\n        if (loader && loader.style.display !== \"none\" && (!window.getComputedStyle || window.getComputedStyle(loader).display !== \"none\")) {\r\n            loader.style.display = \"none\";\r\n            if (gallery) {\r\n                gallery.style.opacity = \"1\";\r\n            }\r\n            if (profile) {\r\n                profile.style.opacity = \"1\";\r\n            }\r\n            \/\/ Ensure images inside skeleton are shown\r\n            var skeletons = document.querySelectorAll(\"#image_gallery_wrap_894 .ig-skeleton.ig-loading\");\r\n            for (var i = 0; i < skeletons.length; i++) {\r\n                skeletons[i].classList.remove(\"ig-loading\");\r\n                skeletons[i].classList.add(\"ig-loaded\");\r\n                var img = skeletons[i].querySelector(\"img\");\r\n                if (img) img.style.opacity = \"1\";\r\n            }\r\n        }\r\n    }, 2000);\r\n    <\/script>\r\n    <\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-895","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/awplife.com\/demo\/image-gallery-premium\/wp-json\/wp\/v2\/pages\/895","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/awplife.com\/demo\/image-gallery-premium\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/awplife.com\/demo\/image-gallery-premium\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/awplife.com\/demo\/image-gallery-premium\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/awplife.com\/demo\/image-gallery-premium\/wp-json\/wp\/v2\/comments?post=895"}],"version-history":[{"count":2,"href":"https:\/\/awplife.com\/demo\/image-gallery-premium\/wp-json\/wp\/v2\/pages\/895\/revisions"}],"predecessor-version":[{"id":918,"href":"https:\/\/awplife.com\/demo\/image-gallery-premium\/wp-json\/wp\/v2\/pages\/895\/revisions\/918"}],"wp:attachment":[{"href":"https:\/\/awplife.com\/demo\/image-gallery-premium\/wp-json\/wp\/v2\/media?parent=895"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}