Question

In my webpage I am doing two things:

1. Image slide show

2. Image popup

For that I had included 6 JavaScript files, but it conflicts. It works fine individually. How can I avoid the JavaScript conflict?

I had included the js file like this:

----------------for popup-------------
<div id="content">
    <div class="chat in">
        <div class="msg Nth">
            <script type="text/javascript" src="popup/js/prototype.js"></script>
            <script type="text/javascript" src="popup/js/scriptaculous.js?load=effects"></script>
            <script type="text/javascript" src="popup/js/lightbox.js"></script>>
                <div class="msg Nth">

--------------for slideshow-------------
<script src="scrollbar_2/jquery-1.3.2.min.js" language="javascript" type="text/javascript"></script>
<script src="scrollbar_2/jquery-ui-1.7.1.custom.min.js" language="javascript" type="text/javascript"></script>
<script src="scrollbar_2/slider_test.js" language="javascript" type="text/javascript"></script>

Answer 1

I’m pretty sure Lightbox is dependent upon JQuery, so it should be placed AFTER you load in JQuery, like so:

<script src="scrollbar_2/jquery-1.3.2.min.js" language="javascript" type="text/javascript"></script>

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

It is also best practice to put all your JavaScript files towards the END of your HTML file in case some of the JavaScript files are dependent upon the elements in the DOM being loaded first.

However, more clarity around the exact error message would be useful for helping you debug.