Rotating Header Image

[Andrea 21]

Can someone recommend a good rotating header image jQuery script? To be specific, I want the image to rotate as one looks at the page, not just a new image on every load.

 

Also - I am already running a jQuery script on the page for the dropdown, which seemed to cause a problem with the first rotating script I tried.

 

In case it matters, here's the site (still under construction): rotating header image

User: Roatan

PW: pelican***

[falkencreative 49]

You have some weird stuff at the end of your file -- it appears you are repeating the Modernizr js file and some additional Javascript? Using jquery code without first loading the jQuery library is sure to cause errors.

 

<script src="js/modernizr.js"></script> 
	    <script>  
       (function($){  
           //cache nav  
           var nav = $("#topNav");  
           //add indicators and hovers to submenu parents  
           nav.find("li").each(function() {  
               if ($(this).find("ul").length > 0) {  
                   $("<span>").text("^").appendTo($(this).children(":first"));  
                   //show subnav on hover  
                   $(this).mouseenter(function() {  
                       $(this).find("ul").stop(true, true).slideDown();  
                   });  
                   //hide submenus on exit  
                   $(this).mouseleave(function() {  
                       $(this).find("ul").stop(true, true).slideUp();  
                   });  
               }  
           });  
       })(jQuery);  
   </script>  </section>

</section>
       <script src="js/jquery.js"></script>  
       <script src="js/modernizr.js"></script> 
	    <script>  
       (function($){  
           //cache nav  
           var nav = $("#topNav");  
           //add indicators and hovers to submenu parents  
           nav.find("li").each(function() {  
               if ($(this).find("ul").length > 0) {  
                   $("<span>").text("^").appendTo($(this).children(":first"));  
                   //show subnav on hover  
                   $(this).mouseenter(function() {  
                       $(this).find("ul").stop(true, true).slideDown();  
                   });  
                   //hide submenus on exit  
                   $(this).mouseleave(function() {  
                       $(this).find("ul").stop(true, true).slideUp();  
                   });  
               }  
           });  
       })(jQuery);  
   </script> 

 

To be honest, I'd personally try to fix the errors first rather than trying a new slideshow script. I'm not actually seeing any code that would cause a slideshow -- did you remove it?

 

The standard one I use is the Cycle plugin though (http://jquery.malsup.com/cycle/) or the lite version if you need a smaller number of features (http://malsup.com/jquery/cycle/lite/)

[Andrea 21]

Sorry Ben - I started out with the scripts inside a footer include, then moved them in their own but forgot to re-upload the now script-less footer. That's why they were there twice.

 

That is fixed now. And I had removed rotating script I was trying at first. I've also added the malsup's rotating script, and everything seems to work now.

 

One question so:

 

The tut for my nav script calls for the jQuery file to be in at the bottom of the page (just above the modernizr.js). I just moved it to the head, as the rotating script needs jQuery up there, and it seems to work.

 

So:

 

Should I have one jQuery.js for each script or is one enough for multiples?

 

Is there a best location for this jQuery.js or does that depend on the script or not even matter?

 

But overall, it seems I finally have my dropdown AND my rotating banner working. YEAH -- that only took a few weeks of procrastination and dread....

 

Thanks Ben for your help.

[falkencreative 49]

Should I have one jQuery.js for each script or is one enough for multiples?

 

Is there a best location for this jQuery.js or does that depend on the script or not even matter?

Only one jquery.js file is needed -- more than that, and you'll probably run into Javascript errors. I'm not sure if there is a best location... as long as the jquery.js file is included before you add any jquery code. As far as I understand it, best practices usually say to include javascript files in the footer before the closing </body>, so they don't slow down page load.