{"id":27,"date":"2016-07-12T10:42:39","date_gmt":"2016-07-12T10:42:39","guid":{"rendered":"http:\/\/demo.awplife.com\/image-gallery-premium\/?page_id=27"},"modified":"2020-11-26T10:24:38","modified_gmt":"2020-11-26T10:24:38","slug":"blue-imp-light-box-gallery","status":"publish","type":"page","link":"https:\/\/awplife.com\/demo\/image-gallery-premium\/blue-imp-light-box-gallery\/","title":{"rendered":"Blue Imp Light Box Gallery"},"content":{"rendered":"\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<h2 style=\"text-align: center;\"><\/h2>\n\t<!-- Premium Gallery Engine Assets -->\r\n\t<style>\r\n\t\t#image_gallery_wrap_28 {\r\n            --ig-gutter: 8px;\r\n            --ig-cols-lg: 3;\r\n            --ig-cols-md: 4;\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: #B2B5BC;\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_28 {\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_28: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_28:active {\r\n            transform: scale(0.95);\r\n        }\r\n\r\n                #image_gallery_28,\r\n        #image_gallery_wrap_28 .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_28\" 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_28\" aria-label=\"Loading gallery...\">\r\n                    <div class=\"ig-loader-spinner-icon\"><\/div>\r\n            <\/div>\r\n    \r\n        <div id=\"image_gallery_28\" \n         class=\"ig-row igp-gallery all-images_28\">\n        <div class=\"grid-sizer\"><\/div>\n                        <div class=\"ig-col single-image igp-item ig-3 ig-4 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\/2025\/01\/shamblen-studios-zJphVSgUOoo-unsplash.jpg\" data-lightbox=\"ig-gallery-28\" 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-3 ig-4 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\/michael-dziedzic-tG5pIdfy27c-unsplash.jpg\" data-lightbox=\"ig-gallery-28\" 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-3 ig-4 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\/mae-mu-XTztXbv6gMs-unsplash-1.jpg\" data-lightbox=\"ig-gallery-28\" 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-3 ig-4 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\/mae-mu-6k7W97gWTvQ-unsplash.jpg\" data-lightbox=\"ig-gallery-28\" data-title=\"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-6k7W97gWTvQ-unsplash.jpg\" class=\"ig-thumbnail loading\" alt=\"Food &amp; Drink\" \/><\/div>                        \n                                                    <div class=\"ig-overlay ig-overlay-bottom\">\n                                                                <span class=\"ig-item-title\">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-3 ig-4 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-bauqYdmadYw-unsplash.jpg\" data-lightbox=\"ig-gallery-28\" data-title=\"Amusement Parks\" data-description=\"\" data-width=\"640\" data-height=\"360\">\n                                                        \n                    \n                    <div class=\"ig-image-container \">\n                        <div class=\"ig-skeleton ig-loading\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"360\" src=\"https:\/\/awplife.com\/demo\/image-gallery-premium\/wp-content\/uploads\/sites\/15\/2025\/01\/mae-mu-bauqYdmadYw-unsplash.jpg\" class=\"ig-thumbnail loading\" alt=\"Amusement Parks\" \/><\/div>                        \n                                                    <div class=\"ig-overlay ig-overlay-bottom\">\n                                                                <span class=\"ig-item-title\">Amusement Parks<\/span>\n                            <\/div>\n                                                \n                                            <\/div>\n\n                    \n                                    <\/a>\n                            <\/div>\n                    <\/div>\n            <\/div>\n\n    \n    <!-- blueimp lightbox dialog -->\n<div id=\"blueimp-gallery-28\" class=\"blueimp-gallery blueimp-gallery-controls\">\n    <style>\n        .blueimp-gallery .prev, \n        .blueimp-gallery .next, \n        .blueimp-gallery .close,\n        .blueimp-gallery .play-pause {\n            text-decoration: none !important;\n            border: none !important;\n            box-shadow: none !important;\n        }\n    <\/style>\n    <div class=\"slides\"><\/div>\n    <h3 class=\"title\"><\/h3>\n    <p class=\"description\" style=\"position: absolute; bottom: 60px; left: 0; width: 100%; text-align: center; color: #fff; margin: 0; padding: 10px; font-size: 14px; z-index: 1000;\"><\/p>\n    <a class=\"prev\">&#8249;<\/a>\n    <a class=\"next\">&#8250;<\/a>\n    <a class=\"close\">x<\/a>\n    <a class=\"play-pause\"><\/a>\n    <ol class=\"indicator\"><\/ol>\n<\/div>\n\n<script>\njQuery(document).ready(function($) {\n    var galleryID = '28';\n    var $gallery = $('#image_gallery_' + galleryID);\n    \n    function initBlueImp() {\n        \/\/ Unbind previous to prevent multiple listeners\n        $gallery.off('click', 'a.ig-lightbox-item');\n        \n        $gallery.on('click', 'a.ig-lightbox-item', function(event) {\n            event = event || window.event;\n            event.preventDefault();\n            \n            \/\/ Read loop setting from the DOM attribute directly (avoid jQuery .data() cache)\n            var $wrap = $('#image_gallery_wrap_' + galleryID);\n            var loopVal = $wrap.attr('data-lb-loop');\n            var showLoop = (parseInt(loopVal, 10) === 1);\n            \n            var link = this,\n                links = $gallery.find('a.ig-lightbox-item').get(),\n                options = {\n                    container: '#blueimp-gallery-' + galleryID,\n                    index: link,\n                    event: event,\n                    continuous: showLoop,\n                    onslide: function (index, slide) {\n                        var text = this.list[index].getAttribute('data-description'),\n                            title = this.list[index].getAttribute('data-title'),\n                            $container = $(this.container),\n                            $node = $container.find('.description'),\n                            $titleNode = $container.find('.title');\n                        \n                        $node.empty();\n                        $titleNode.empty();\n                        \n                        if (text) {\n                            $node.text(text);\n                        }\n                        if (title) {\n                            $titleNode.text(title);\n                        }\n                    }\n                };\n                \n            if (typeof blueimp !== 'undefined') {\n                var gallery = blueimp.Gallery(links, options);\n\n                \/\/ BlueImp forcefully disables continuous when num < 3.\n                \/\/ Override it back if the user wants looping and there are at least 2 items.\n                if (showLoop && gallery && links.length >= 2) {\n                    gallery.options.continuous = true;\n                }\n            }\n        });\n    }\n\n    initBlueImp();\n    $('#image_gallery_wrap_' + galleryID).on('ig_items_added', function() {\n        initBlueImp();\n    });\n});\n<\/script>    <script>\r\n    setTimeout(function() {\r\n        var loader = document.getElementById(\"ig_loader_28\");\r\n        var gallery = document.getElementById(\"image_gallery_28\");\r\n        var profile = document.querySelector(\"#image_gallery_wrap_28 .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_28 .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>\n<p style=\"text-align: center;\"><\/p>","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-27","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/awplife.com\/demo\/image-gallery-premium\/wp-json\/wp\/v2\/pages\/27","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=27"}],"version-history":[{"count":4,"href":"https:\/\/awplife.com\/demo\/image-gallery-premium\/wp-json\/wp\/v2\/pages\/27\/revisions"}],"predecessor-version":[{"id":906,"href":"https:\/\/awplife.com\/demo\/image-gallery-premium\/wp-json\/wp\/v2\/pages\/27\/revisions\/906"}],"wp:attachment":[{"href":"https:\/\/awplife.com\/demo\/image-gallery-premium\/wp-json\/wp\/v2\/media?parent=27"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}