WunderSlider + EasyBox

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>WunderSlider Proportional</title>
<link rel="stylesheet" type="text/css" href="css/default/wunderslider-min.css" />
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/default/wunderslider-ie-min.css" />
<![endif]-->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/wunderslider-min.js"></script>

<!-- easybox -->
<script type="text/javascript" src="easybox/easybox.min.js"></script>
<link rel="stylesheet" href="easybox/easybox.min.css" type="text/css" media="screen" />

</head>
<body>
<div id="slideshow" style="width:80%;height:500px;margin-left:auto;margin-right:auto;left:0;right:0;margin-top:10%;"></div>

<script type="text/javascript">
(function($) {
    $(window).load(function(){
        var parent = document.getElementById('slideshow');
        var wunderSlider = new itthinx.WunderSlider(
        parent,
        [
            {
                url:'images-demo/image-0.jpg',
                title:'Cool Ice',
                description:'Some icy blue stuff :)'
            },
            {
                url:'images-demo/image-1.jpg',
                title:'Red Rocks',
                description:'Red rocks rock!'
            },
            {
                url:'images-demo/image-2.jpg',
                title:'Good morning',
                description:'Go for a swim'
            }
        ],
        {display:'proportional', mode:'proportional', mouseOverPause:true, effects:['random','checkers'], period:'3000' }
        );

        // easybox
        $(parent).find('.view').click(function(){
            $.easybox([['images-demo/image-0.jpg', 'Cool Ice'], ['images-demo/image-2.jpg', 'Red Rocks'], ['images-demo/image-3.jpg', 'Go for a swim']]);
        });
});
})(jQuery);
</script>
</body>
</html>