Gallery pictures

Using Ghost
1

I’m trying to create an image gallery with lots of images using ghost.
The images should be displayed as a grid and enlarged when clicked.
I didn’t find a solution, can someone help me?
I use ghost: 5.63.0+moya
Unfortunately, I’m an absolute beginner when it comes to image galleries.

2

Ghost has an image gallery built in. You can add it with the editor with the big plus button (that appears to the left of a blank line in the body of any post or page).

3

I already used a HTML-script:

But it doesn’t work anymore and I don’t know why.

6

I used this HTML-script:

//

//

But it doesn’t work anymore and I don’t know why.

7

I know this gallery, but I would like to present much more than 9 pictures.
Preferably as a grid with an enlargement when I click on the image.

8

If you want your code to show up on the forum, you’ll need to surround it with three back ticks (`) or else use the code button </>

9

Thank you very much, dear Cathy, for the tip, I did’n know it.
Here is the script:

<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://nanogallery2.nanostudio.org/js/jquery.nanogallery2.min.js"></script>

<script type="text/javascript">
jQuery(document).ready(function () {
   jQuery("#gallery1").nanogallery2({
      itemsBaseURL: 'https://content.hrg1879.de/images/2023/2023_09_16_Grossauheim/',
      items: [
        { src: 'GA+(1).jpeg', src: 'GA+(1).jpeg', title: 'Bild 1' },
        { src: 'GA+(2).jpeg', src: 'GA+(2)', title: 'Bild 2' },  

      ],
      thumbnailHeight: 150,
      thumbnailWidth: 150,
      thumbnailLabel: {
         display: false
      },
      viewerToolbar: {
         standard: 'minimizeButton, previousButton, pageCounter, nextButton, playPauseButton, fullscreenButton, closeButton'
      },
      thumbnailHoverEffect: 'imageScale150'
   });
});
</script>
10

If you open dev tools (f12) and go to the console, are any errors logged?

Is your site live? If you provide a link to a page that should have the gallery, it’ll be easier to find the problem.

11

Here ist the link:
Wanderfahrt Junioren- und ambitionierte Hobbygruppe (hrg1879.de)
A gallery should be visible under each passage of text

I couldn’t see any error in the console

The gallery worked until I made changes in the “code injection” section of a posta. First I changed a single post because the teasers were too big for me.
The following change:
‘’’
.article-image {
max-width: 500px;
margin: 0 auto !important;
float: none !important;
}

Since that worked well, I also changed the site header in the settings. Since then the galleries have stopped working.
Unfortunately I didn’t save the default settings :-(.
Maybe it would also help if I copied them back there.

I found some errors:

grafik
grafik698×362 19.4 KB

12

The first two are not the problem - they’re just checking if you’re the admin user on the front end. The third one IS the problem. The gallery code is looking for a specific css selector for identifying gallery images, and it isn’t finding it, so it can’t call replace on it.

I think you’ve made some changes since you posted these errors, because now I’m seeing this:
image

Hrm…

Ahha! Are you loading jQuery twice on purpose? Looking at network calls, I see both 3.6.0 and 3.5.1 getting loaded, and I’m guessing that’s unintentional…

13

Yes it is. What’s the best thing I can do?

14

You need to load jQuery once, and likely before nanogallery2 (if it depends on it, which I think it does?)

Looks like you’re currently loading jQuery multiple times within the post body. That doesn’t work. Your second gallery shouldn’t load scripts again - you should just call nanogallery2 again. (I am assuming nanogallery2 can handle multiple calls on the page. I don’t know. That’s a question for the documentation.)

Your theme is also loading jQuery 3.5.1. That’s probably hard-coded in the default.hbs for your theme.

Remove all calls to load jquery from the post’s HTML, and remove all but one call to load nanogallery.

Then the problem is the post body content. You can’t include inline jQuery in the post body, if you don’t load jQuery until the footer. I’d take a look at the other way to load nanogallery content - the HTML way - there’s an example here: data source

That should let you push off loading the jQuery until where it’s currently happening in your theme. You will probably also need to relocate the loading of nanogallery until the footer code injection.

Give that a go and report back? :)

1 Like
15

Thank you very much for your patience and support. I’ll try and let you know how it worked - or have to ask further;-)

1 Like
16

Dear Cathy, it took a few more days, but now the picture galleries are working again and are up to date again.
Thank you very much for your help!!

1 Like