Image slider dissapears

JavaScript
1

Hi.

I’m not sure if this is the right section for this, if it’s wrong, please get it to the right.

So basically when I ad my code and stuff for my twitter jquery plugin, the plugin work, but then the Nivo image slider wich is also a jquery plugin I have on my site. The pictures simply dont show up on the screen.

And i realized, as soon as I delete this:

<link rel="stylesheet" type="text/css" href="css/style.css"/>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>

wich is the code for the twitter, the pictures start showing again, so something is wrong. I just don’t know what.

Here’s my HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/styles.css"rel="stylesheet" type="text/css">
<link href="css/style for jquery.css"rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/jquery.nivo.slider.js" type="text/javascript"></script>


<link rel="stylesheet" type="text/css" href="css/style.css"/>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>







<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'>

<script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script>

 <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>



<!--[if (lte IE 6)|(gte IE 8)]>
<style type="text/css">
#outer {height:100%;display:table;}
</style>
<![endif]-->

<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>

<body onload="MM_preloadImages('images/social/facebook rollover.png','images/social/youtube rollover.png','images/social/twitter rollover.png','images/social/vimeo rollover.png','images/social/flick rollover.png','images/social/rss rollover.png')">


<div id="unwrapper">
<div id="wrapper">


<div id="uppercontainer">
<div id="meny1">



<ul class="meny1">

<li class="menytext"><a href="index.html">START</a></li>
<li class="menytext"><a href="distrikt.html">DISTRIKT</a></li>
<li class="menytext"><a href="media.html">MEDIA</a></li>
<li class="menytext"><a href="JAM.html">JAM</a></li>

</ul>








</div>

<div id="logodiv"><a href="index.html"><img src="images/Logo.png" width="122" height="31" border="0" id="logotyp" /></a>
</div>

<div id="meny2">




<ul class="meny2">

<li class="menytext"><a href="gästbok.html">GÄSTBOK</a></li>
<li class="menytext"><a href="medlem.html">MEDLEM</a></li>
<li class="menytext"><a href="om oss.html">OM OSS</a></li>
<li class="menytext"><a href="kfum.html">KFUM</a></li>

</ul>









</div>
</div>

<div id="banner">


<div id="wrapper1">
	<div id="slider_wrapper1">
		<div id="slider">
        <img src="images/Banner1.png" title="" />

         <img src="images/Banner2.png" title="" />

             <img src="images/Banner3.png" title="" />


</div>

<div id="htmlcaption" class="nivo-html-caption"></div>
	</div>
</div>









</div>



<div id="icr">
<div id="cleft">

<div id="tweets">
	<!-- Tweets will get loaded from jQuery -->
</div>
<div id="overlay">
	<img src="images/ajax-loader.gif" />
</div>
</div>
<div id="cright">









  <ul class="social">

<li><a href="https://www.facebook.com/airwipp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images/social/facebook rollover.png',1)"><img src="images/social/facebook.png" name="Image3" width="43" height="43" border="0" id="Image3" /></a></li>
<li><a href="http://www.youtube.com/user/AirWipp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/social/youtube rollover.png',1)"><img src="images/social/youtube.png" name="Image4" width="43" height="43" border="0" id="Image4" /></a></li>
<li><a href="https://twitter.com/#!/airwipp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images/social/twitter rollover.png',1)"><img src="images/social/twitter.png" name="Image5" width="43" height="43" border="0" id="Image5" /></a></li>

<li><a href="http://vimeo.com/airwipp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','images/social/vimeo rollover.png',1)"><img src="images/social/vimeo.png" name="Image6" width="43" height="43" border="0" id="Image6" /></a></li>

<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','images/social/flick rollover.png',1)"><img src="images/social/flickr.png" name="Image7" width="43" height="43" border="0" id="Image7" /></a></li>

<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','images/social/rss rollover.png',1)"><img src="images/social/rss.png" name="Image8" width="43" height="43" border="0" id="Image8" /></a></li>

</ul>


      <iframe id="facebook" src="http://www.facebook.com/plugins/like.php?href=https://www.facebook.com/airwipp"
        scrolling="no" frameborder="0"
        style="border:none; width:270px; height:80px"></iframe>




















        <div id="twitterticker">

      </div>


</div>

</div>






</div>

<div id="footer">

</div>



</div>



</body>
</html>

I really don’t know what more to post here to fix the problem, but just leave a comment if it isnt enough.

// Kevin

2

The problem is that you are including the jQuery library twice:

<script src=“js/jquery-1.7.1.min.js” type=“text/javascript”></script>
<script src=“js/jquery.nivo.slider.js” type=“text/javascript”></script>

<link rel=“stylesheet” type=“text/css” href=“css/style.css”/>

<script type=“text/javascript” src=“http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js”></script>

You only need it once … and having it twice is not only downloading the whole thing more than needed, but it also seems to confuse the browser/scripts … especially since the second one being downloaded is an older version.

So deleting the line in blue above is the right thing to do. No matter how many jQuery scripts you have on your page, just include a link to the library once, and make sure that comes before any other scripts. :slight_smile:

I’m not sure if this is the right section for this, if it’s wrong, please get it to the right.

I’ve moved it to the JavaScript forum. :slight_smile:

3

Yes! I love you. Thanks man! I learned something new today :smiley:

4

Glad to be of some use. :slight_smile:

[ot]

I’d feel much better about that if you changed your avatar to something more … enticing? :lol: [/ot]

5

How about this one? :slight_smile:

You get like…happy…when you see it. The colours make you happy. Get it? :wink:

6

[ot]

Hmmm, now I think I miss the monkey. :shifty:[/ot]

7

Ill keep messi for a while, he needs some HTML and CSS… :slight_smile: