<!--more--> quicktag breaking FancyBox plugin on my blog's front page

I use a plugin on my blog that allows the user to click on an image to enlarge it in a pop-up window. My plugin of choice for this task is the FancyBox for WordPress plugin.

Most of the time the plugin works as expected. However, I have discovered that it doesn't function on images found on the front page of my blog if the image is part of a post which contains the !--more-- quicktag. For posts without the !--more-- quicktag the FancyBox functionality is working as expected.

Also, on the corresponding single-post page of a post with the !--more-- quick tag, the FancyBox functionality is working as expected. This makes sense since (I believe) the !--more-- quicktag is completely ignored on single-post pages.

I can see from examining the HTML page source that the class="fancybox" and rel="fancybox" attributes are missing from the images' a tags on the problem posts. I know that the plugin normally inserts these attributes. But I don't understand why the attributes are not inserted when the !--more-- quicktag is utilized.

I'm using a custom theme but I have tried a couple of other generic themes and it didn't seem to help. I have also tried two other FancyBox plugins (Easy FancyBox and Fancybox) and they both exhibited the problem.

My site is http://www.untamedimages.com/blog

I'm a bit of a noob when it comes to php and WordPress coding and I don't really know where to start troubleshooting this problem. I'm happy to provide any additional information if that would help lead to a solution.

Any help would be greatly appreciated.

Topic quicktag read-more plugins Wordpress

Category Web

1
answered at

Your images aren't being encapsulated by the hyperlink markup, so unless you're using additional calls, Fancybox won't know which hyperlinks/images to Fancybox.

You'll either need to fix this in the template loop that your homepage uses, or add some hacky additional call like:

jQuery('.post .imgpost').on('click', function($) {
    $.fancybox();
});

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.