Gallery popup of images when clicked?


#1

I’m using a customized version of Casper. How can I make it so when you click on a gallery image, it gets larger for the viewer?


#2

I’ve read about some JavaScript known as light box, but I’m not sure where to begin in using it.


#3

I think Google (and Ghost Forum) search is your best friend and you could start there. I did a 10 seconds research for you and these are the top results I got back (I’m not a developer, so I hope they solve your issue):

Cheers! :slight_smile:


#4

I’ve found those, but coding isn’t my thing. I was hoping for a more thorough tutorial. I’d like to apply it to every image on my blog by default.


#5

Well it’s quite easy, I just did it in 30 seconds:

Just insert this code into your Ghost admin Code Injection section:

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fluidbox/1.4.2/css/fluidbox.css" />
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/fluidbox/1.4.2/jquery.fluidbox.min.js'></script>
<script>
        $('a').fluidbox({
            viewportFill: 0.8,
        });
</script>

And you get a nice lightbox for images from within your stories. I used the info from the first link I provided above.


#6

I appreciate it, but when I put that into the ghost admin section (cut and pasted verbatim) - it doesn’t do anything different.


#7

Maybe you don’t have support for that in the theme, I am not sure.

For me it just worked out of the box, you can check it here:

I just added the image into the body of the story and when you click on it is shows in a lightbox.

However, I haven’t tested a gallery and I now see that I cannot add the gallery at all in the editor (it uploads images, but doesn’t display them).

But it appears to be an issue with my nginx security config:

Refused to load the image ‘blob:’ because it violates the following Content Security Policy directive: “default-src ‘self’ https: data: ‘unsafe-inline’ ‘unsafe-eval’”. Note that ‘img-src’ was not explicitly set, so ‘default-src’ is used as a fallback.


#8

I’m testing your page on an iPhone 8 Plus, and I don’t see a light box.

My theme is Casper


#9

I am not a developer so I haven’t checked the code in details to see how it actually functions and if it applies on the mobile devices as well.

However, it won’t show a lightbox if you keep the device in vertical position (as the width of the image is as big as the width of the screen), but it will show the lightbox (at least on my Android Samsung Galaxy S8) if you turn the device in horizontal position so that the image is not as wide as the screen and then it makes sense for the lightbox to appear and expand the image and it does this in my case.

And, anyways, we are here to provide pointers and help for you to find the solution that could match your needs, we cannot actually just solve the problem in your place, especially if we don’t have all the details available.