how to use multiple scripts from different sources in one page?

Question

Good evening,

I'm having a problem concerning scripts, i couldn't manage to get two scripts working at the same time, on my page I have a 2 scripts each is referenced to a different jquery file, the problem is when i run the page just one of them will work, if I rearrange the place of the scripts (one above the other) the second one will run.

I will appreciate it if anyone could help me with this issue ...

here is my scripts:

<link rel="stylesheet" type="text/css" href="jquery_imgzoom/css/imgzoom.css" />
<link rel="stylesheet" type="text/css" href="orbit/orbit.css" />

<script src="orbit/jquery.min.js" type="text/javascript"></script>
<script src="orbit/jquery.orbit.min.js" type="text/javascript"></script>
<script type="text/javascript" >
 $(window).load(function() {
     $('#featured').orbit();
 });
</script>

<script type="text/javascript" src="jquery_imgzoom/scripts/jquery.min.js"></script> 
<script type="text/javascript" src="jquery_imgzoom/scripts/jquery.imgzoom.pack.js"></script>
<script type="text/javascript">
 $(document).ready(function () {
$('img.thumbnail').imgZoom();

});

and the markup:

<div id="featured"> 
          <img src="orbit/img1.jpg" alt="..." />
          <img src="orbit/img2.jpg"  alt="..." />
 </div>


         <a href="jquery_imgzoom/scripts/pic1_thum.jpg"><img class="thumbnail" src="jquery_imgzoom/scripts/pic1.jpg" alt="Picture1r" /></a>
        <a href="jquery_imgzoom/scripts/pic2_thumb.jpg"><img class="thumbnail" src="jquery_imgzoom/scripts/pic2.jpg" alt="Picture2" /></a>

I have tried to embed the SRCs in one script and move the two functions to that script tag, but nothing seems to be good !!!

Adil Shaikh · Accepted Answer · 2013-04-21 18:12:25Z

1

You don't need to import jquery multiple times, Just import that once and that too before importing any other script

<script src="orbit/jquery.min.js" type="text/javascript"></script>
<script src="orbit/jquery.orbit.min.js" type="text/javascript"></script>
<script type="text/javascript" >
 $(window).load(function() {
     $('#featured').orbit();
 });
</script>

<script type="text/javascript" src="jquery_imgzoom/scripts/jquery.imgzoom.pack.js"></script>

answered Apr 21, 2013 at 18:12

Adil Shaikh

44.8k17 gold badges95 silver badges112 bronze badges

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

1 Comment

spac3hit Over a year ago

thank you very much @MohammadAdil, it worked for me ... now just to clarify something, importing jquery multiple times makes conjunctions with scripts ?

Collectives™ on Stack Overflow

how to use multiple scripts from different sources in one page?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related