Breaks all other image links

[mrtnsimo]

Hi,

I put fluidbox on my ghost. The images in function great now.

All other image links have stopped working though. The logo in top left corner no longer works. I also have images in the homepage post loop. These link to posts themselves and have also stopped working.

[terrymun]

With no code or example, it will be impossible for me to help you troubleshoot. Here's what you can do:

1. Run the demo of fluidbox on your server. Does it work?
2. Implement that code on your site with minimal modifications. Does it work?
3. Keep adding other components until something breaks.

Check your console log in between and try to find where the error is coming from.

[mrtnsimo]

Hi Terry,

thanks for the quick reply. I will try to provide some more context.

I am using ghost for our company blog and have made some slight modifications to the default casper theme. The problem with fluidbox occured in all image links outside that were not pard of content. These are images, e.g. logo that link to a different site.

These seem to fit the definition of fluidbox selector even though the target url is not an image. This then creates a problem which breaks these links.

I implemented fluidbox guided by this article: https://www.ghostforbeginners.com/add-an-image-lightbox-to-ghost/

A link to our blog is: http://blog.paravan.sk

I have since removed the fluidbox code. I will try to find a solution during weekend. Will update, if I come up with something.

[terrymun]

You can just use a more stringent selector for the anchor links that you want Fluidbox to initialize with, e.g. $('.content a') or the likes.

[twang91]

I'm having the same problem where I used javascript to include anchor tags on all my images. However, when I tried adding a class to the images and fluidbox selector, fluidbox stopped working.

<script type="text/javascript"> var images = $('.post img'); for (i = 0; i < images.length; i++) { $(images[i]).wrap('<a href="' + $(images[i]).attr('src') + '">'); $("img").addClass("fb"); } $('.fb a').fluidbox(); </script>

When I change the selector to $('a').fluidbox(); all the images in the post class div work correctly. However, other images (e.g. top logo that should link to homepage) across the website end up getting thrown into a fluidbox div too and when clicked, do nothing.

[terrymun]

@twang91 It seems like the selector of choice, .post img is too broad and causing Fluidbox to be instantiated on images that do not strictly belong to the post content (therefore affecting other images).

[twang91]

@terrymun I actually got it working by changing the class to a rel attribute and placing it on the anchor tag instead of the img tag. I also changed the selector class to be for specific classes of images. Thanks for the info.