Addition of Fluidbox to display images is not working

[magicgg91]

Hello,

I had integrated Fluidbox as image gallery for a nice display to users in my previous theme (Casper), but it doesn’t work with Liebling theme 1. I tried several things to make it works but without success for the moment.

Code is following and is in Code Injection, Site footer :

<script async src="https://cdn.jsdelivr.net/gh/Torqu3Wr3nch/fluidbox-ghost-blog-plugin@0.1.1a/fluidbox-ghost-blog-plugin.min.js"></script>
<script>
    window.fluidboxGhostConfig = {
      theme: 'light', // Options: light, dark, image-backdrop, hsla(262, 100%, 82%, 0.6)
      showCaption: true, // Sets whether to capture the caption and show it below the image when expanded
    }
</script>

If you have an idea on how to integrate it to Liebling, it should be great.

Thanks.

[eddiesigner]

Hi,

Can you share a link so I can take a look to see if there are some errors in the console?

Maybe there is a conflict between that library and the one Liebling uses for almost the same purpose. If you take a look to some of the articles in the demo website you can see that if you click on some image, it's opened in a very similar way so maybe you don't need that extra library after all? 🤔

[magicgg91]

Hi,

You can see in https://domopi.eu, there is an error but I'm not a developper and don't understand how to resolve it, unless I'm more OPS and try always to search and find solution/workaround by myself before asking help.

I saw the working of your version, opening of an image is smooth, but Fluidbox come with navigation between images.

Thanks for your time.

[eddiesigner]

There is an error in the console:

Uncaught ReferenceError: $ is not defined
    at fluidbox-ghost-blog-plugin.js:2

Liebling uses jQuery but you can use it only if the code is inside of /src/js/post.js

I also noticed that the library you want to use can't work together with the one Liebling uses already, which makes perfect sense since both are trying to manipulate the same elements. That means you will also have to remove that library first and then use the other one.

However you can't edit that file just like that, to make changes in javascript files you have to create a custom theme based on this one by following this guide.

Replacing the images library is a deep change so I can't really help you because is not something that everyone needs. If you really want to do it you can follow that guide, make the proper changes in the src/js/post.js file and build your own version of this theme.

[eddiesigner]

I will this issue now, please feel free to reopen it if needed.