Change image on time interval and when hover over link using wordpress

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:

<ul class="ul1">
<li class="li1"><a class="link1" title="CRM" href="http://link1" target="_self">CRM</   a><li>                                                                     
<li class="li1"><a class="link1" title="Apskaita ir finansai" href="http://link2" target="_self">Apskaita ir finansai</a></li>
<li class="li1"><a class="link1" title="Darbo užmokestis" href="http://link3" target="_self">Darbo užmokestis</a></li>
<li class="li1"><a class="link1" title="Kasos terminalas" href="http://link4" target="_self">Kasos terminalas</a></li>
</ul>

Ok, so I've managed to create this so far: So jquery would look like this:

function swapImages(){
var $active = $('#gallery1 .active');
var $next = ($('#gallery1 .active').next().length > 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);
}

I added my .js file into 'wp-includes/js/jquery'. I opened header.php and inside 'head' tag added:

<?php wp_enqueue_script("jquery"); ?>

<?php wp_head(); ?>
<script type="text/javascript" src="/wp-includes/js/jquery/image-on-time.js"></script> /*my .js function*/

CSS styles:

#gallery1{
float:right;
width:400px; 
height:300px; 
}
#gallery1 img{
    display:none;
    position:absolute;

}
#gallery1 img.active{
    display:block;
}

html syntax on my page:

<div id="gallery1">
 <article>
<img src="img1.jpg" class="active"/>
<img src="img2.jpg"/>
<img src="img3.jpg"/>
 </article>

So after doing that, first image appears and nothing else happens. Did I do something wrong loading .js file or something else is wrong?


So i read, that jquery may conflict with other script by using '$'. So I changed function like this:

var $j = jQuery.noConflict();
$j(function swapImages(){
var $j(active) = $j('#gallery1 .active');
var $j(next) = ($j('#gallery1 .active').next().length > 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);
   });

And I even changed the way how .js is called:

 <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/wp-includes/js/jquery/image-on-time.js"></script>

But nothing changed.. Can anyone tell me what I'm doing wrong?.. So there is no one that knows a little about wordpress?

Answers


Use the word 'jQuery' instead of the $ sign, and call jQuery.noConflict();


Need Your Help

python asyncore using 100% CPU after client connects

python network-programming asyncore

I am using asyncore to implement a publish subscribe. I understand using twisted or ZMQ may be a better solution, however in this case it needs to be pure python. When waiting for connections the CPU

How do I make the "1.9.2" Ruby string point to the final release with RVM?

ruby bash rvm

I'm using RVM to manage my Ruby environment on OSX, and currently it's interpreting '1.9.2' as ruby-1.9.2-rc2 instead of the final release. How can I update this to make it behave as expected?