Question

I developed this JQuery Horizontal Slider with the correct Styles:
http://css-tricks.com/examples/FeaturedContentSlider/

This functions normal in my JsFiddle: http://jsfiddle.net/NinjaSk8ter/5tXgQ/

However when I dropped this into my site, Im having a problem with the picture transtions.

http://www.virtualpetstore.com/InteriorServices.aspx

The frames are not easing and transitioning as in the JSFiddle. There are 3 js files that I’ve included, and I cant tell if these are being clobbered by some other js file I already have.

Im also not sure if I added the JavaScript correctly to the Document Ready Function, which was already in place for the accordian.

If anyone wouldnt mind to FireBug this to see what I did wrong- it would be greatly appreciated!

Answer 1

There are 3 js files that I’ve included, and I cant tell if these are being clobbered by some other js file I already have.

Apparently it does make a difference in terms of the order of the JavaScript Includes.
I commented out where these includes existed before, and now I moved them to the bottom.

<script type="text/javascript" src="js/jquery-1.5.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>

<%--<script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>--%>
<%--<script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>--%>
<%--<script type="text/javascript" src="js/coda-slider.1.1.1.pack.js"></script>--%>

<script type="text/javascript" src="js/jquery.serialScroll-min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="js/jquery.opacityrollover.js"></script>
<script type="text/javascript" src="js/colors.js"></script>
<script type="text/javascript" src="js/colorpicker.js"></script>
<script type="text/javascript" src="js/blipITpicker.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>
<script type="text/javascript" src="js/jquery.cycle.min.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<script type="text/javascript" src="js/jquery.simplemodal.js"></script>
<script type="text/javascript" src="js/contact.js"></script>

<script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="js/coda-slider.1.1.1.pack.js"></script>