Fluidbox on london theme

Themes
1

how could I integrate fluidbox on london theme?

2

Hey @moeen, just done some investigation into fluidbox and it’s a fairly old library and still needs jQuery bundled with it. Is it possible you could find a more modern library to add a lightbox to your images? :slight_smile:

1 Like
3

can you suggest something else?

4

Maybe fslightbox is better?

Install instructions are here:

2 Likes
5

i tried this so many times on london. can’t get it to work.
I added the code but instead of opening lightbox. it open the image.
in gallery it’s not working. but when I add image via html code. it’s ok.

6

The library requires you to wrap images with an anchor that has data-fslightbox data attribute as well as a href attribute that points to the image. I’ve quickly put together this script that adds the anchor to all images and gallery images. This will need to run before the lightbox script runs:

<script>
    const images = [...document.querySelectorAll('.kg-image-card, .kg-gallery-image')];
    images.map(image => {
        const imageURL = image.querySelector('img').src;
        image.innerHTML = `
			<a data-fslightbox href="${imageURL}">${image.innerHTML}</a>
		`;
    });
</script>
1 Like
7

thanks. the code you gave doesn’t work. but i wrote this yesterday, it is add a tag to img but when I click on the image in the site, it loads the image completely .

<script>
$('.kg-gallery-image img ').each(function() {
$(this).wrap("<a data-fslightbox href='" + this.src + "'/>");
});
</script>

site url is Fine Arts Photos

8

I’m guessing neither script will work because of the “swup” library in the theme, which is what makes the pages smoothly transition when navigating. You might need to wrap your code in an event listener for when the page had finished loading properly

9

thats unfortunate. Because the only photography theme for ghost is london.
I don’t know whats you mean buy event listener. I will try to find it.
thanks

1 Like
10

If I get you correct,
I used this code:

<script>
  >  $(window).bind("load", function() { 
  $('.kg-gallery-image img ').each(function() {
    $(this).wrap("<a data-fslightbox href='" + this.src + "'/>");
});

});
but nothing changed
11

@moeen not sure if you saw this tutorial already…

and this…
https://stevengerner.com/automatic-photo-gallery-with-ghost-blog/

and this…

and the other themes on ThemeForest with built-in galleries:

2 Likes
12

thanks. I tried themeix guide yesterday. it doesn’t work.
about other themes I like london theme. the only problem is the lightbox

13

I tried everything around swup, but can’t manage to reload the script for fslightbox.
Can any one help please?

14

I had worked on the issue more than 2 days, I can’t manage to reload the fslightbox script unfortunately

15

~I’m not sure why you’re still trying to use fslightbox, a lot of more modern alternatives have been suggested in this thread.~

Have you looked into the swup documentation? There’s a way to check when swup is finished so you can then execute your own JavaScript, like so:

<script>
  document.addEventListener('swup:contentReplaced', event => {
    // My code here
  });
</script>

This combined with a new lightbox library might be what you’re looking for.

16

I tried fslightbox because you helped me and suggest it,
I read the swup docs i tired the code you gave but I it’s not working,
Actually I tried more than 4 other lightboxes but nothings work…

17

Ah I’m sorry @moeen, I misread the previous messages. Feeling a bit under the weather at the moment. Would you be able to share the code you’re using? Might be able to collectively debug it for you :slight_smile:

1 Like
18 
<script>
$('.kg-gallery-image img ').each(function() {
    $(this).wrap("<a data-fslightbox href='" + this.src + "'/>");
});

</script>
<script src="/fslightbox.js"></script>
<script>
  document.addEventListener('swup:contentReplaced', event => {
   const a = document.createElement('a');
a.setAttribute('data-fslightbox', 'gallery');
a.setAttribute('href', 'images/2.jpg');
document.body.appendChild(a);

refreshFsLightbox();
  });
</script>

Example link:
https://moeen.salehi.pw/portfolio/street-photography/

19

Just catching up with this. I see you’ve managed to add a lightbox, nice job!

Did the example code you shared work for you?

20

just about 40 minutes ago i finally managed to get it worked. I will share the process in 2 or 3 days on my blog and also post it here.

2 Likes