Gallery popup of images when clicked?

Themes
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 Likes
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:

2 Likes
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:
https://blog.digitalentrepreneur.eu/how-the-cms-of-the-future-should-look-like/

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).

image
image1288×400 72.3 KB

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.

10

I created something really cool tonight that you all might be interested in. It’s a code snippet that will all the desired functionality to your ghost blog version 2.0 and beyond. Looking for testers if you want to give it a shot. Also interested in feedback if you have features that I left out.
Check it out here: Fluidbox for Ghost Blogs

Video Demo: - YouTube

4 Likes
11

Thanks so much @coreysnyder for this. I’ve tried it and does what it’s supposed to do. I simply added the script line below on the “Code injection” section on the Ghost admin:

<script async src="https://cdn.jsdelivr.net/gh/coreysnyder04/fluidbox-ghost-blog-plugin@8b384f414e8f573fe56c93cc9d16be03d3d38a01/fluidbox-ghost-blog-plugin.min.js"></script>

For those who want to contribute with code, feedback or submitting issues, the code lives at GitHub - coreysnyder04/fluidbox-ghost-blog-plugin

6 Likes
12

This looks beautiful!!!

1 Like
13

I implemented this into my latest theme called Morgan. Check out a live demo at Writing posts with Ghost ✍️. Available for purchase at https://gumroad.com/l/morgan-theme.

15

This really helped me. Thank you!