Showing posts with label thumb rotator. Show all posts
Showing posts with label thumb rotator. Show all posts

Wednesday, August 18, 2010

Video thumb rotator with jQuery Cycle Plugin

This is a simple code I used to rotate video thumbs which were retrieved using the YouTube API.
I use the jQuery Cycle Plugin to do the rotation on mouse over.

http://jquery.malsup.com/cycle/

Make sure you download the cycle plugin
http://jquery.malsup.com/cycle/download.html

<html>
<head>
<title>Video thumb rotator with jquery Cycle Plugin</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cycle.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    
    $('.adimagebg').cycle();
    $('.adimagebg').cycle('pause');
    
    $(".adimagebg").hover( function () {
        $(this).cycle({ 
            fx: 'fade',
            speed: 300,
            timeout:  1200
        });
    },
    function(){
        $(this).cycle('pause');
    });
});
</script>
</head>

<body>

    <div class="adimagebg">
        <a href="#"><img width="100" src="image1.jpg" border="0" /></a>
        <a href="#"><img width="100" src="image2.jpg" border="0" /></a>
        <a href="#"><img width="100" src="image3.jpg" border="0" /></a>
    </div>

</body>
</html>


View Demo

Freelance Jobs