{"id":35,"date":"2016-07-12T10:49:11","date_gmt":"2016-07-12T10:49:11","guid":{"rendered":"http:\/\/demo.awplife.com\/image-gallery-premium\/?page_id=35"},"modified":"2020-11-26T10:26:48","modified_gmt":"2020-11-26T10:26:48","slug":"viewer-light-box-gallery","status":"publish","type":"page","link":"https:\/\/awplife.com\/demo\/image-gallery-premium\/viewer-light-box-gallery\/","title":{"rendered":"Viewer 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_36 {\r\n            --ig-gutter: 8px;\r\n            --ig-cols-lg: 3;\r\n            --ig-cols-md: 3;\r\n            --ig-cols-sm: 1;\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_36 {\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_36: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_36:active {\r\n            transform: scale(0.95);\r\n        }\r\n\r\n                #image_gallery_36,\r\n        #image_gallery_wrap_36 .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_36\" 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_36\" aria-label=\"Loading gallery...\">\r\n                    <div class=\"ig-loader-spinner-icon\"><\/div>\r\n            <\/div>\r\n    \r\n        <div id=\"image_gallery_36\" \n         class=\"ig-row igp-gallery all-images_36\">\n        <div class=\"grid-sizer\"><\/div>\n                        <div class=\"ig-col single-image igp-item ig-3 ig-3 ig-1 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\/dimitar-krastev-W-fMOyWW4eA-unsplash.jpg\" data-lightbox=\"ig-gallery-36\" data-title=\"Burger\" 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\/dimitar-krastev-W-fMOyWW4eA-unsplash.jpg\" class=\"ig-thumbnail loading\" alt=\"Burger\" \/><\/div>                        \n                                                    <div class=\"ig-overlay ig-overlay-bottom\">\n                                                                <span class=\"ig-item-title\">Burger<\/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-3 ig-1 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\/2022\/07\/isuru-ranasingha-Wy_X_nYd_vw-unsplash.jpg\" data-lightbox=\"ig-gallery-36\" data-title=\"Cold drink\" data-description=\"\" data-width=\"640\" data-height=\"881\">\n                                                        \n                    \n                    <div class=\"ig-image-container \">\n                        <div class=\"ig-skeleton ig-loading\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"881\" src=\"https:\/\/awplife.com\/demo\/image-gallery-premium\/wp-content\/uploads\/sites\/15\/2022\/07\/isuru-ranasingha-Wy_X_nYd_vw-unsplash.jpg\" class=\"ig-thumbnail loading\" alt=\"Cold drink\" \/><\/div>                        \n                                                    <div class=\"ig-overlay ig-overlay-bottom\">\n                                                                <span class=\"ig-item-title\">Cold 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-3 ig-1 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\/michael-dziedzic-tG5pIdfy27c-unsplash.jpg\" data-lightbox=\"ig-gallery-36\" 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-3 ig-1 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\/shamblen-studios-zJphVSgUOoo-unsplash.jpg\" data-lightbox=\"ig-gallery-36\" 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-3 ig-1 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-s6S8IgEN6-4-unsplash.jpg\" data-lightbox=\"ig-gallery-36\" data-title=\"Orange\" 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\/2025\/01\/mae-mu-s6S8IgEN6-4-unsplash.jpg\" class=\"ig-thumbnail loading\" alt=\"Orange\" \/><\/div>                        \n                                                    <div class=\"ig-overlay ig-overlay-bottom\">\n                                                                <span class=\"ig-item-title\">Orange<\/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-3 ig-1 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\/katsiaryna-endruszkiewicz-BteCp6aq4GI-unsplash.jpg\" data-lightbox=\"ig-gallery-36\" data-title=\"Fashion Girl\" 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\/2025\/01\/katsiaryna-endruszkiewicz-BteCp6aq4GI-unsplash.jpg\" class=\"ig-thumbnail loading\" alt=\"Photos, Fashion &amp; Beauty, Girls vs. Stereotypes\" \/><\/div>                        \n                                                    <div class=\"ig-overlay ig-overlay-bottom\">\n                                                                <span class=\"ig-item-title\">Fashion Girl<\/span>\n                            <\/div>\n                                                \n                                            <\/div>\n\n                    \n                                    <\/a>\n                            <\/div>\n                    <\/div>\n            <\/div>\n\n    \n    <script>\njQuery(document).ready(function($) {\n    var galleryID = '36';\n    var elem = document.getElementById('image_gallery_' + galleryID);\n    \n    if (typeof Viewer !== 'undefined' && elem) {\n        var showTitle = true;\n        var showDesc = true;\n        var showLoop = true;\n\n        var options = {\n            title: function(image, imageData) {\n                \/\/ 'this' refers to the Viewer instance. image is the cloned image in viewer.\n                \/\/ We need the original image to get data attributes from its parent anchor.\n                var originalImage = this.images[this.index];\n                if (!originalImage) return '';\n\n                var anchor = originalImage.closest('a.ig-lightbox-item');\n                if (!anchor) return '';\n\n                var title = anchor.getAttribute('data-title') || '';\n                var desc = anchor.getAttribute('data-description') || '';\n                \n                var content = '';\n                if (showTitle && title) {\n                    content += '<div class=\"ig-viewer-title\">' + title + '<\/div>';\n                }\n                if (showDesc && desc) {\n                    content += '<div class=\"ig-viewer-desc\">' + desc + '<\/div>';\n                }\n                return content;\n            },\n            loop: showLoop,\n            url: function(image) {\n                \/\/ 'image' is the original img element during navbar\/list initialization\n                var anchor = image.closest('a.ig-lightbox-item');\n                return anchor ? anchor.getAttribute('href') : image.src;\n            },\n            transition: true, \/\/ Ensure animations are enabled\n            filter: function(image) {\n                \/\/ Exclude images inside redirect links from the lightbox\n                var parentLink = image.closest('a');\n                if (parentLink && parentLink.classList.contains('ig-redirect-link')) {\n                    return false;\n                }\n                return true;\n            }\n        };\n        var viewer = new Viewer(elem, options);\n\n        \/\/ Prevent default anchor behavior for lightbox items\n        $(document).on('click', '#image_gallery_' + galleryID + ' a.ig-lightbox-item', function(e) {\n            e.preventDefault();\n        });\n\n        \/\/ Update viewer when new items are added via AJAX\n        $('#image_gallery_wrap_' + galleryID).on('ig_items_added', function() {\n            viewer.update();\n        });\n    } else if (!elem) {\n        console.error('Gallery element not found for ViewerJS: #image_gallery_' + galleryID);\n    } else {\n        console.error('ViewerJS library not loaded');\n    }\n});\n<\/script>\n<style>\n    \/* Styling for the combined title\/description in ViewerJS footer *\/\n    .viewer-footer .viewer-title {\n        color: #fff;\n        line-height: 1.4;\n        padding: 12px 20px;\n        background: rgba(0,0,0,0.7);\n        max-width: 90%;\n        margin: 0 auto;\n        border-radius: 8px;\n        margin-bottom: 20px;\n        text-shadow: 0 1px 2px rgba(0,0,0,0.5);\n    }\n    .ig-viewer-title {\n        font-weight: 600;\n        font-size: 16px;\n        margin-bottom: 4px;\n        display: block;\n    }\n    .ig-viewer-desc {\n        font-size: 13px;\n        opacity: 0.9;\n        display: block;\n        font-weight: 400;\n    }\n\n    \/* Newspaper Spinning Animation *\/\n    @keyframes ig-newspaper-in {\n        0% {\n            transform: scale(0.1) rotate(-720deg);\n            opacity: 0;\n        }\n        100% {\n            transform: scale(1) rotate(0deg);\n            opacity: 1;\n        }\n    }\n\n    \/* Target the image while it is opening (viewer-transition class) *\/\n    .viewer-container.viewer-in .viewer-canvas img.viewer-transition {\n        animation: ig-newspaper-in 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;\n    }\n<\/style>    <script>\r\n    setTimeout(function() {\r\n        var loader = document.getElementById(\"ig_loader_36\");\r\n        var gallery = document.getElementById(\"image_gallery_36\");\r\n        var profile = document.querySelector(\"#image_gallery_wrap_36 .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_36 .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-35","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/awplife.com\/demo\/image-gallery-premium\/wp-json\/wp\/v2\/pages\/35","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=35"}],"version-history":[{"count":5,"href":"https:\/\/awplife.com\/demo\/image-gallery-premium\/wp-json\/wp\/v2\/pages\/35\/revisions"}],"predecessor-version":[{"id":908,"href":"https:\/\/awplife.com\/demo\/image-gallery-premium\/wp-json\/wp\/v2\/pages\/35\/revisions\/908"}],"wp:attachment":[{"href":"https:\/\/awplife.com\/demo\/image-gallery-premium\/wp-json\/wp\/v2\/media?parent=35"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}