How to use multiple scripts in single page

Question

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="jquery.blueberry.js"></script>

<script>

$(window).load(function() {
   $('.blueberry').blueberry();

});

</script>



<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="jquery.bxSlider.js"></script>
<script type="text/javascript">


    $(document).ready(function(){
          $('#slider').bxSlider({
              ticker: true,
              tickerSpeed: 5000,
              tickerHover: true
      });
    });


</script>

I have used this query for gallery and content slider in same page when I run both, they don't work. Help me here im new to this

may be they conflict each other

Satish Sharma
– Satish Sharma

2014-03-03 06:00:33 +00:00
Commented Mar 3, 2014 at 6:00 — Satish Sharma
– Satish Sharma, Commented Mar 3, 2014 at 6:00

Sajad Karuthedath · Accepted Answer · 2014-03-03 06:02:35Z

3

You add 2 standard versions of jquery. Use any one of of them

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>

add only

this at the top of all scripts

<script src="http://code.jquery.com/jquery-latest.js"></script>

answered Mar 3, 2014 at 6:02

Sajad Karuthedath

16.2k4 gold badges35 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gavin Over a year ago

I was 3 seconds too late :) This is the correct answer.

Gavin Over a year ago

Now he changed it back. LOL. Your answer is still correct.

Dragick · Accepted Answer · 2014-03-03 06:07:57Z

2

Which of your scripts isn't working?

For either of them to work, these two scripts would have to be in the same folder as your HTML page; jquery.blueberry.js jquery.bxSlider.js

Otherwise, you'll need to reference these to the folder they are in, such as ~/scripts/<>.js

Also, you've got 2 references to jQuery. One needs to go away (I'd suggest 1.6.1 goes as your loading the latest later). Otherwise if blueberry or bxSLider relies on 1.6.1 and the other relies on 2.1.0, you'll need to user jQuery.noConflict().

answered Mar 3, 2014 at 6:07

Dragick

6751 gold badge7 silver badges15 bronze badges

Comments

Felix · Accepted Answer · 2014-03-03 06:12:40Z

1

You just need to include jQuery library once, so try:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="jquery.blueberry.js"></script>
<script src="jquery.bxSlider.js"></script>
<script>
$(window).load(function() {
    $('.blueberry').blueberry();
    $('#slider').bxSlider({
        ticker: true,
        tickerSpeed: 5000,
        tickerHover: true
    });
});
</script>

I choose version 1.6 here since I'm not sure the latest version of jQuery is compatible with your custom plugins or not.

edited Mar 3, 2014 at 6:12

answered Mar 3, 2014 at 6:05

Felix

38.2k8 gold badges46 silver badges56 bronze badges

Collectives™ on Stack Overflow

How to use multiple scripts in single page

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related