Can you post a link to your site? I heard someone else mention that depending on how the featured image was being placed, there might be issues.
Thread Starter
filo21
(@filo21)
Hi,
This is the website.
As you can see, if you scroll down after the first page of posts the main image on top of each post disappears. Same thing for the small icons associated to tags and categories.
Deactivating infinite scroll all images are fine.
Thank you for for taking some time to look into this!
It looks like the javascript effects applied to the images is not completely being loaded with infinite scroll. The opacity on the images is set to 0 in the loaded results (along with the grayscale). You might look into removing the javascript mouseover effect (where they the opacity changes) or force the opacity to be 1 on “.post-thumb img”
In CSS:
.post-thumb img {
opacity: 1 !important;
}
I believe this should at least allow the images to be viewed in the infinite results, though it doesn’t show the effects. I think the problem is that the “.img_wrapper” div is not being included in the output from infinite scroll, and that is the class which jQuery effects are looking for. Ah, not only that. It’s failing to load the second, color version of the image. I think the workaround solution of setting the Opacity with CSS is probably best for those images loaded with infinite scroll. The rest of the images (loaded without infinite scroll) will still have the effects applied.
Otherwise, you’d have to dig into the javascript for those effects and change how it worked, I think. Somebody else might have more input on how to get it working more completely.
Thread Starter
filo21
(@filo21)
Yep, you’re right, setting the opacity value definitely helps to at least load the main image. While it’s not ideal, it’ll do for now, so thank you for the tip!
There’s more though. While I’m not too bothered by the lack of the shadow/greyscale fading effect (actually I’ve been tempted many times to remove the whole thing), infinite scroll is also failing to load the background image for tags and categories (in the post footer). On the first page, there’s an <i></i> element whose background is set to show an icon for tags and categories. Scrolling down to the second page, the <i> isn’t included. I don’t think that’s related to any javascript, is it?
Thank you again for your help, much appreciated!
Hmm, I’ll have to get back to you on it. I’m working on something similar myself which may provide me with an answer. I’m hoping that it’s not the case that the infinite scroll simply doesn’t retrieve elements beyond the Selectors that you provide, but I think that might be the case.
OK, I think using callback functions to load the jQuery is what you need to do. Figure out which functions are not loading in the posts called up by the infinite scroll, and then include them within the “Callback” field in the infinite scroll settings. Basically you’re setting any jQuery loaded after AJAX to run again, just as you would with $(document).onload(); You’ll have to dig through the theme to find out what jQuery is doing there to change the opacity, etc. and then copy those functions.
Took me a while to figure it out, but I’ll need to do it too.
jQuery(document).ajaxComplete(function() {
//necessary jQuery functions here.
});
Note that you have to use “jQuery” instead of “$” because WordPress runs in noConflict mode.
Oops, I meant, it’s just like $(document).ready();
Thread Starter
filo21
(@filo21)
Hi, sorry for the late reply.
Umm, it looks like this issue (and the solution you’re suggesting) goes way beyond my knowledge of php and javascript.. Despite your clear explanation, I wouldn’t really know how to actually try it.
Nontheless, I would like to thank you for your help, I really appreciate it!
