Jump to content

Rotating Header Image


Andrea

Recommended Posts

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

Link to comment
Share on other sites

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/)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...