Question

I’m trying to add two different javascript functions to my header:

1) is for a lightbox (see code below) and the

2) is for a local scroll (code below). When I place them both in my header tag, as seen below, one or the other will not work at all–depending on the order in which I place them the tag– when I go to view my page.

Q: how can I get all these js. files to work when I view my page?

<script type="text/javascript" src="/lightbox2.04/js/prototype.js"></script>
<script type="text/javascript" src="/lightbox2.04/js/scriptaculous.js?load=effects,builder"></script>

<script type="text/javascript" src="/js/lightbox.js"></script>

\\\\and this one below////
<script type="text/javascript" src="/jquery-vertical-scroll/js/jquery.min.js"></script>

<script src="jquery-vertical-scroll/js/jquery.localscroll-min.js" type="text/javascript"></script>

<script src="jquery-vertical-scroll/js/jquery.scrollTo-min.js" type="text/javascript"></script>

<script type="text/javascript">
        $(document).ready(function () {
            $.localScroll.defaults.axis = 'y';
            $.localScroll();
        });
</script>

Answer 1

You are using prototype w/ jQuery make sure you have jQuery.noConflict(); after your jquery framework script and prototype framework and before you run any main scripts. It is not recommended to use more than one JavaScript framework at the sametime.

<header>
<link rel="stylesheet" href="/lightbox2.04/css/lightbox.css" type="text/css" media="screen" />

<script type="text/javascript" src="/lightbox2.04/js/prototype.js"></script>
<script type="text/javascript" src="/lightbox2.04/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/jquery-vertical-scroll/js/jquery.min.js">
</script>
<script type="text/javascript">
    jQuery.noConflict();
</script>
<script src="jquery-vertical-scroll/js/jquery.localscroll-min.js" type="text/javascript"></script>
<script src="jquery-vertical-scroll/js/jquery.scrollTo-min.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/lightbox.js"></script>

<script type="text/javascript">
        jQuery(document).ready(function () {
            jQuery.localScroll.defaults.axis = 'y';
            jQuery.localScroll();
        });
</script>
</header>

give this a try