Slideshow stopped working when I put a gallery in

Question

So I had a page, working perfectly fine with a nice little slider, but then... I put a gallery in which is working fine BUT the slider stopped working. I'm thinking the JS on the gallery is somehow stopping the JS from the slider from working but I have no JS knowledge so I don't know, I deal with HTML and CSS, I will learn JS at some point but for now I am using codrops.

The website is: http://www.maintenancebirmingham.co.uk/ here you can see the slider working fine, if you go to the gallery page: http://www.maintenancebirmingham.co.uk/gallery.html (or just click gallery) then you can see the problem.

If you need any html/css/JS or anything else from the site please let me know, I'm not going to put it all up not because there is just too much and if anyone figures it out without needing it, life is good :)

Thanks in advance guys.

Answer 1

Sounds like Culyx says, coin-slider-min.js is injecting code in jquery 1.4.2 then below your page jquery 1.7.1 is being loaded, so you override the code injected from coin-slider;

You can try to remove jquery 1.4.2 (if it's possible) and put jquery on the header

or put coin-slider-min.js after jquery 1.7.1

at least seems to be running fine here.

I just reloaded the coin-slider-min.js from your page (with broken code), then I initialize the element with coin slider. This is how I discovered, but don't use it in your current code!

function load_js()
{
   var head= document.getElementsByTagName('head')[0];
   var script= document.createElement('script');
   script.type= 'text/javascript';
   script.src= 'coin-slider.min.js';
   head.appendChild(script);
}
load_js();
//after load
$('#coin-slider').coinslider({ effect: 'rain', delay: 4000, width: 1040, height:435, hoverPause: false });