Do we have any lightbox for Ghost Gallery card?

truekasun · November 18, 2018, 7:03am

Hi,

Do we have any lightbox (popup or something) when we use Ghost Gallery cards? In my theme (Casper based) when I insert a gallery, it just show small images but there is no way to see a bigger image.

chrome_2018-11-18_12-37-45

Nothing happens when a user clicks on a gallery image. Is that the default behavior or am I missing something?

Thanks.

zce · November 18, 2018, 9:20am

github.com

zce/creative/blob/aa2c1a586475c66b6a57060abd52cde01837332d/assets/js/script.js#L83


      
          // gallery
          // -----------------------------------------------------------------------------
          qsa('.kg-gallery-image > img').forEach(item => {
            const container = item.closest('.kg-gallery-image')
            const width = item.attributes.width.value
            const height = item.attributes.height.value
            const ratio = width / height
            container.style.flex = ratio + ' 1 0%'
          })
          
          
const galleryContainers = qsa('.kg-gallery-container')
          if (galleryContainers.length) {
            loadStyle('https://unpkg.com/lightgallery.js/dist/css/lightgallery.min.css')
            loadScript('https://unpkg.com/lightgallery.js/dist/js/lightgallery.js', () => {
              galleryContainers.forEach(item => {
                item.querySelectorAll('.kg-gallery-image').forEach(sub => {
                  sub.dataset.src = sub.children[0].src
                })
                window.lightGallery(item, { selector: '.kg-gallery-image' })
              })
            })

truekasun · November 18, 2018, 10:09am

Wow! This is awesome dude! Thank you.
I was wondering if there is something native to ghosts but this is also okay.

Topic		Replies	Views
Gallery popup of images when clicked? Themes	13	7018	October 26, 2022
No image zoom in Ghost? Using Ghost	2	120	November 25, 2024
Photoswipe or Other Lightbox Implementation? Developer help	6	1490	May 10, 2023
Where to find default gallery behavior in a theme? Using Ghost	11	439	November 17, 2024
Replace Theme's Gallery Behavior with Ghost Default Using Ghost	3	403	January 11, 2024

Do we have any lightbox for Ghost Gallery card?

Related topics