Masonry ItemSelector and tooltips

Can you post a link to your site so I can look?

Masonry is on the front page and the calendar is on the page titled Kalenteri. Please note that I tested and noted that when I took the ImagesLoaded off of the masonry the tips came back and when I put it back they stopped working again. I cannot remove the ImagesLoaded from the masonry, because then it starts to stack the images.

https://sisustustoimittajat.fi/

Please note that I tested and noted that when I took the ImagesLoaded off of the masonry the tips came back and when I put it back they stopped working again

That’s interesting.

I actually looked at your site just now though and it looks like no scripts or anything are getting loaded on the calendar page. Does the theme have the wp_head() and wp_footer() functions in it? That is required for the plugin to load the styles and such.

Yes, the scripts are loaded, everything else but the qtip works. For instance there’s a sticky header which uses JS and yes, everything is working. There’s a performance plugin used. However I have tested and the performance has not affect on the issue.

Please trust me, the issue is with the ImagesLoaded on masonry and the ImagesLoaded in your plugin. I have tested disabling every other JS and the performance plugin and ImagesLoaded with the masonry is the only thing that breaks the qtip in your plugin.

I was able to fix it by initialising masonry only on the front page. BUT if at any point I needed to have masonry on other page than front page this would make it a bit complicated. Or in case I needed to move the calendar on the front page (or on the sidebar for instance).

You can test it yourself by initialising masonry on your site with ImagesLoaded and it will break the qtip on this plugin. There might be a similar conflict with other plugins which use ImagesLoaded, so you might want to take a look at it.

I will now mark this resolved, but it’s only resolved because I conditionally initialised the masonry on the front page which doesn’t have a calendar at the moment.

The page I was using was this one: https://sisustustoimittajat.fi/kalenteri/

Is that not the correct page? It still looks like it is not working on that page to me.

There could very well be conflicts from other plugins, but we use WordPress best practice procedures to include our scripts and styles so if these arise it is usually coming from elsewhere like an old version of jQuery being loaded or something similar.

I would be glad to continue helping you with this so it doesn’t become a pain for you later on possibly.

Thanks!

The page is working quite correctly now that I removed the ImagesLoaded conflict. As you can see at the moment there are no items on that calendar (they would be red). It’s not old version of jQuery or any other conflict, I tested it.

It is ImagesLoaded I used with the WP masonry. I tested it very very very thoroughly and ImagesLoaded with masonry was the only thing that caused the conflict. When I removed it the qtip started to work. Similarly it started to work when I made the masonry to load only on the front page. It was it. It wasn’t anything else.

Okay here’s the old, test version of the site and said page: https://helmikuu.net/sisustus/kalenteri/

On it qtip doesn’t work. The difference to the live site is that in this masonry with ImagesLoaded is enabled on every page. When you see this, please let me know and I will then go and disable ImagesLoaded from the masonry and you can see the difference.

Ok I just checked that page and I see it not working. I also see in the source that the jquery version being loaded is < 1.6 (which 1.6+ is needed for qtip).

When you change the page to show the new example let me know and I will look for the differences.

Now I have removed ImagesLoaded from the masonry initialisation (which sometimes causes the masonry images to stack). And the calendar tips work again.

@mervi,

Thanks for letting me see the difference. So it does seem (as you have already figured out) that it is a conflict with that. I am still not sure why though.

Yes, it’s strange. I managed to fix the conflict by initialising masonry only on the front page. Here’s to hoping my client doesn’t wish to have the calendar on the sidebar or something.

There appears to be a similar problem with isotope imagesLoaded, but I don’t think it’s quite the same (though I thought it might help you to find out the problem): https://qtip2.com/guides#integration.isotope