I must admit, I begin to love jQuery. I am not JavaScript developer, yet jQuery is so easy, that even I can use it.
In this post I will explain how to create animated, scrollable box with alternating links and images. Just like this one:
1. Start by adding these scripts inside body of your page:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.cycle/2.88/jquery.cycle.all.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var randomDelay = function () {
var min = 1000;
var max = 1500;
var wait = Math.round(Math.random() * (max - min) + min);
return wait;
};
$('.animated-tile').cycle({
fx: 'scrollDown',
easing: 'easeOutBounce',
speed: 3000,
delay: -3000,
timeoutFn: randomDelay,
random: 0,
pause: 1,
});
});
</script>
Here, in randomDelay function, set minimum and maximum time in milliseconds.
2. Put div section where the box will be:
<div class="animated-tile" style="position: relative; width: 110px; height: 110px; overflow: hidden;">
Width and height should be the same as dimensions of images to cycle.
3. Put multiple links with images inside. That's it!
<a href="http://goleszympansy.pl>
<img src="myimage.jpg" height="110px" width="110px" border="0px">
</a>
