I’m currently converting a client’s old site to WordPress using BB and struggling to get reflection.js to create an image reflection at the bottom of each image in the BB Post Carousel on the Home page.
The images are supposed to be perfectly square but are showing rectangular at time times and at other times entirely askew. Not sure what the issue is but reflection.js is working fine on all Single Project pages:
At any rate, thought perhaps it might be a Javascript issue as I keep getting an error message in the Console on OS X/Chrome that indicates “$ is not a function” per the following screenshot:
It looks like the error is in a BB file, but I’m clueless regarding Javascript, so I wanted to check in and confirm whether or not this is/isn’t a BB issue?
I’ll deal with the JS error first as the issue may all be related to that.
So it seems this is from the jQuery code you added to the layout JS settings. Specifically, this… $(".featured-projects img.fl-photo-img").addClass("reflect");
Can you change the $ sign to jQuery and see if that fixes the error?
If so, I’ve tried making the requested edit, but even after clearing the BB cache, database & flushing cache it doesn’t seem to have changed. Did I edit the wrong file?
Thanks for the warm welcome as well Danny, you guys are great. Think I found it, forgot that I’d added that snippet via the Global Settings and just made the modification. Reflections are missing from some of the project images in the Home page slider, not sure why, some sort of conflict between reflection.js and the BB Post Carousel js?
I have checked your carousel again and all the images have a reflection. However, on the ones that don’t, it appears it is taking sometime for the reflect to appear. Once, loaded or cycled through all the images, the reflection appears on all of them for me anyway.
Can you provide a link to the script, so I can test this on my end, please?
I think the problem here is caused by how bxslider works. It generates clones of the slides to make it loop. Can you set Loop to No and see if you get the same problem?
Edit: Bxslider by the way is the jQuery slider we use to power up our Posts Carousel module.
Thanks Ben, just changed loop to “No” and voila, no more issues with image reflections! Unfortunately my client wants the slides to rotate on a loop, can you suggest some sort of workaround for this?
I just got caught up on this thread and believe I might know what the solution is. Would it be possible to get temporary admin access to test my theory?
Would that be in this file?