CODEWITHSUNDEEP
jquery
spac3hit
spac3hit

Reputation: 201

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

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 !!!

Upvotes: 0

Views: 898

Answers (1)

Adil Shaikh
Adil Shaikh

Reputation: 44740

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>

Upvotes: 1

Related Questions