Fancy box and js slider apparently interfere - duplicates

I've seen a couple of posts about this issue but found no solution that worked for me
I'm running a Js slider in combination with a fancy box , but the images in the fancybox display gets duplicated three times for each image .. does anyone knows a solution to this

Related

Bootstrap collapse animations disabled - when loading webpage at work

This is quite an unusual one, and I had no luck googling this issue.
Short version - I've created a basic webpage for my work, to streamline some tools into one place, which works differently when I open it at work, compared to when I open it at home.
Details - When I've designed it at home, I'm using a lot of hide/unhide content (bootstrap4 collapse buttons), which unveil content with a nice simple sliding animation, as does the carousel at the top with various images sliding across- However when I open the webpage at my place of work, the smooth slide animations are disabled (it literally just makes this appear and disappear, and the carousel just flicks between the images, rather than slides).
Could this be related to work corporation firewalls blocking certain bootstrap sources? Has anyone else ever had something like this, and hopefully solved?
Also - I know I could just do this via JS, but I just wanted to query this all the same as it's a very odd issue.

Why are my images truncated when cursor is hover it after a scale (1.5) effect?

We have an online courses platform. We use Wordpress 5 with Eduma theme and Learnpress plugin.
I am trying to make a netflix effect on the thumbnails of my courses.
I successfully did it but on the first row of courses, the image is truncated.
I tried to make a minimum code to reproduce the issue and paste it here, but there are too many css coming from the theme and different plugins. Impossible to leave some minimum code.
You can see the issue on the homepage of https://formatine.com/ in the rows of courses. Pass the cursor hover a course and you will see the zoom effect.
The second row is fine, but the first row has the issue.
I tried to change the css of parent container because I thought something nested is cutting the effect.
I tried some z-index on different divs, but it didn't work.
After days of investigation, I came here to see if anyone has an idea of what I am doing wrong.
Please help.
After the research, what I was able to find was:
There is one overflow: hidden applied to one of the parent div with class name as thim-course-grid.
Removing it will solve the issue.
Can you check and update?

What Carousel Are they Using

Just came across a slider-carousel I really liked and was inspecting the code to see what they have used. I just can't seem to find the exact one they are using.
Anyone happen to know what carousel they are using :
http://forayclothing.co.uk/
it is a wordpress theme called oneclick with the carousel, view the source then the bottom of the page http://forayclothing.co.uk/wp-content/themes/oneclick/js/carousels.js?ver=4.0

Same css font properties but different display in angularjs view

I've a big problem and apparently nobody seems to have encountered this problem yet.
I have been modifying my website which uses AngularJS to use views instead of charging the whole page everytime. Now I've made slight modifications to the css at the same time, but now I have a very strange difference (I'm using the same browser for the two displays, google chrome) between the two views.
I also included in the image jquery calls to show that the css font-related properties of the two images are the same. The 'h4' element that I test with jQuery is the middle one, "Titre", but the two other elements should also be displayed the same. Left view is whithout angularjs ng-view and right view is in the angularjs ng-view
Thanks for any help, I have to say that I have no idea about what might cause this behavior.

Different layout display on website over multiple loads

I am having an extremely odd issue creating a template for my zencart ecommerce website.
I find that many times I load the website my menu will break up and split over two lines as shown below.
The reason I find this behavior odd is that if I refresh the page it correctly displays.
Now I could understand how to fix this if it was consistently one way or the other but it seems to vary between the two with no obvious difference in the code... I am not sure if this is some sort of technical bug with chrome as I haven't been able to replicate it in other browsers however even if it is I really need a way of working around it. So I am curious as to whether anyone has had this issue before and if so how they got around it.
Link to live site: http://digitalmatrixonline.com.au/
Thanks Jason
If you add
white-space:nowrap;
To the div that contains the list it should prevent this, not sure why it's happening though.
Edit: here is a jsfiddle showing the technique http://jsfiddle.net/RM4S2/
Edit: No floats http://jsfiddle.net/BsGfu/2/
This is a really strange problem, and I was able to recreate the quirkiness in Chrome. While I don't know the direct cause of the issue, I think I found one way that works.
If you set the width of the second div within 'navEZpagesTop' that you are floating right that is wrapping,to 'width:485px;'. This seems to give the section room and does not wrap. If you want to leave more room for this expand without modifying the css you could set it to a much larger size, and float all the links inside of this to the right(instead of the left).