title: Change image on time interval and when hover over link using wordpress
body: <p>I wanted to ask how to make images change on time interval (lets say after 5 seconds) and these same image change depending on the linked hovered (similar as it is in a site like www.gamespot.com).
  I have these links:</p>
  
  <pre><code>&lt;ul class="ul1"&gt;
  &lt;li class="li1"&gt;&lt;a class="link1" title="CRM" href="http://link1" target="_self"&gt;CRM&lt;/   a&gt;&lt;li&gt;                                                                     
  &lt;li class="li1"&gt;&lt;a class="link1" title="Apskaita ir finansai" href="http://link2" target="_self"&gt;Apskaita ir finansai&lt;/a&gt;&lt;/li&gt;
  &lt;li class="li1"&gt;&lt;a class="link1" title="Darbo užmokestis" href="http://link3" target="_self"&gt;Darbo užmokestis&lt;/a&gt;&lt;/li&gt;
  &lt;li class="li1"&gt;&lt;a class="link1" title="Kasos terminalas" href="http://link4" target="_self"&gt;Kasos terminalas&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Ok, so I've managed to create this so far:
  So jquery would look like this:</p>
  
  <pre><code>function swapImages(){
  var $active = $('#gallery1 .active');
  var $next = ($('#gallery1 .active').next().length &gt; 0) ? $('#gallery1 .active').next() : $('#gallery1 img:first');
  $active.fadeOut(function(){
  $active.removeClass('active');
  $next.fadeIn().addClass('active');
  });
  }
  $(document).ready(function(){
    // Run our swapImages() function every 5secs
    setInterval('swapImages()', 5000);
  }
  </code></pre>
  
  <p>I added my .js file into 'wp-includes/js/jquery'. I opened header.php and inside 'head' tag added: </p>
  
  <pre><code>&lt;?php wp_enqueue_script("jquery"); ?&gt;
  
  &lt;?php wp_head(); ?&gt;
  &lt;script type="text/javascript" src="/wp-includes/js/jquery/image-on-time.js"&gt;&lt;/script&gt; /*my .js function*/
  </code></pre>
  
  <p>CSS styles:</p>
  
  <pre><code>#gallery1{
  float:right;
  width:400px; 
  height:300px; 
  }
  #gallery1 img{
      display:none;
      position:absolute;
  
  }
  #gallery1 img.active{
      display:block;
  }
  </code></pre>
  
  <p>html syntax on my page:</p>
  
  <pre><code>&lt;div id="gallery1"&gt;
   &lt;article&gt;
  &lt;img src="img1.jpg" class="active"/&gt;
  &lt;img src="img2.jpg"/&gt;
  &lt;img src="img3.jpg"/&gt;
   &lt;/article&gt;
  </code></pre>
  
  <p></p>
  
  <p>So after doing that, first image appears and nothing else happens. Did I do something wrong loading .js file or something else is wrong?</p>
  
  <hr>
  
  <p>So i read, that jquery may conflict with other script by using '$'. So I changed function like this:</p>
  
  <pre><code>var $j = jQuery.noConflict();
  $j(function swapImages(){
  var $j(active) = $j('#gallery1 .active');
  var $j(next) = ($j('#gallery1 .active').next().length &gt; 0) ? $('#gallery1 .active').next  () : $j('#gallery1 img:first');
  $j(active).fadeOut(function(){
  $j(active).removeClass('active');
  $j(next).fadeIn().addClass('active');
    });
  }
    $j(document).ready(function(){
    // Run our swapImages() function every 5secs
    setInterval('swapImages()', 5000);
     });
  </code></pre>
  
  <p>And I even changed the way how .js is called:</p>
  
  <pre><code> &lt;script type="text/javascript" src="&lt;?php bloginfo('template_url'); ?&gt;/wp-includes/js/jquery/image-on-time.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>But nothing changed.. Can anyone tell me what I'm doing wrong?..
  So there is no one that knows a little about wordpress?</p>