jQuery - How do I change view based on mouseOver?

Question

I made the home page of my site so that when you mouse over the different service offerings that the related image would also display. However when Malsup's hosting of Cycle came off github the function was lost.

Here is the code I am using that worked before but no longer works correctly. The slideshow still cycles through, but the mouseover function does not work correctly.

<script type="text/javascript">
$(document).ready(function() {
$('#slideshow').cycle({
    fx: 'fade',
    pager : '#slideshow-nav',
    pagerEvent: 'mouseover',
    pauseOnPagerHover: true,
    speed: 1000,
    delay:  3000,
    timeout: 9000,
    pagerAnchorBuilder: function(idx, slide) {
    // return sel string for existing anchor
    return '.features ul li:eq(' + (idx) + ') a';
},
allowPagerClickBubble: true 
});
});
</script>

What changes do I need to make to get it working again?

Thanks.

Answer 1

Try this 'command' of the plugin libary, it will do the trick.

<script type="text/javascript">

$(document).ready(function(){

    $("#skills li").click(function(){

        id = $(this).attr('id');

        imgIndexToJump = id.substr(1); //extracting number as index from id
        imgIndexToJump = parseInt(imgIndexToJump, 10);

        $('.slideshow').cycle('goto', imgIndexToJump);
    });
});

</script>

assign ids to ur list in skills like this and it will work.

<ul id="skills">
<li id="a0">
    a1-data
</li>
<li id="a2">
    a1-data
</li>
</ul>