Can it get smaller?

Can it get smaller?

Ok,

Can it get any smaller / more logical?

I created this (with help from internet/ and info from here). It works that's just great. HOWEVER the coding is in my opinion incredible dirty so to say.

Could you get this code more efficient / better?



Copy code
  1.     $jquery('ul.show_pictures li').filter(':not(:first)').hide().end().filter(':first').addClass('showing');
  2.     $jquery('ul.show_menu li').filter(':first').addClass('showing_menuitem');
  3.     rotate = function(){
  4.         $jquery('ul.show_menu li').removeClass('showing_menuitem');
  5.         $activeM.addClass('showing_menuitem');
  6.         $jquery('ul.show_pictures li').removeClass('showing').fadeOut();
  7.         $active.addClass('showing').fadeIn();
  8.     };
  9.     rotateSwitch = function(){
  10.         play = setInterval(function() {
  11.             $active = $jquery('ul.show_pictures li.showing').next();
  12.             $activeM = $jquery('ul.show_menu li.showing_menuitem').next();           
  13.             if ($active.length === 0) {
  14.                 $active = $jquery('ul.show_pictures li:first');
  15.                 $activeM = $jquery('ul.show_menu li:first');
  16.             }
  17.             rotate();
  18.         }, 5000);   
  19.     };
  20.     rotateSwitch();
  21.         
  22.     $jquery('ul.show_pictures li').hover(function() {
  23.         clearInterval(play);
  24.     }, function() {
  25.         rotateSwitch();
  26.     });
  27.     $jquery('ul.show_menu li').hover(function() {
  28.         $activeM = $jquery(this);
  29.         $activeMnr = $jquery('ul.show_menu li').index(this);
  30.         //alert($activeMnr);
  31.         $active = $jquery('ul.show_pictures li').eq($activeMnr);
  32.         clearInterval(play);
  33.         rotate();
  34.         rotateSwitch();       
  35.     });

(oh and this is the html -- NO need for optimizing this one!!)
  1.     <div id="slideshow">
  2.       <div class="show_pictures_container">
  3.         <ul class="show_pictures">
  4.           <li class="article_row cols1 clearfix">
  5.             <div class="article_column column1">
  6.               <div class="contentpaneopen">
  7.                 <div class="article-content">
  8.                   <a><img></a>
  9.                 </div>
  10.               </div>
  11.             </div>
  12.           </li>
  13.           <li class="article_row cols1 clearfix">
  14.             <div class="article_column column1">
  15.               <div class="contentpaneopen">
  16.                 <div class="article-content">
  17.                   <a><img></a>
  18.                 </div>
  19.               </div>
  20.             </div>
  21.           </li>
  22.           <li class="article_row cols1 clearfix">
  23.             <div class="article_column column1">
  24.               <div class="contentpaneopen">
  25.                 <div class="article-content">
  26.                   <a><img></a>
  27.                 </div>
  28.               </div>
  29.             </div>
  30.           </li>
  31.         </ul>
  32.       </div>
  33.       <div class="show_menu_container">
  34.         <ul class="show_menu">
  35.           <li>
  36.             <a>
  37.           </li>
  38.           <li>
  39.             <a>
  40.           </li>
  41.           <li>
  42.             <a>
  43.           </li>
  44.         </ul>
  45.       </div>
  46.     </div><!-- end slideshow -->
Thanks for your time!

3Pinter














    • Topic Participants

    • joris