Sudo Slider jQuery Plugin - Modal demo

Usage

Include the javascripts

<script type="Text/Javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.sudoSlider.min.js"></script>

The Javascript to start it.

<script type="text/javascript" >
$(document).ready(function(){   
   $("#slider").sudoSlider({ 
      ajax: ['../images/06.jpg', '../images/07.jpg', '../images/08.jpg'],
      continuous: true,
      clickableAni: true,
      ajaxLoadFunction: function(t){
         var target = $(this).children();
         target.css('cursor' , 'pointer').click(function() {
         var maxheight = $(window).height() - 80;
         var maxwidth = $(window).width() - 40;
         var width = target.attr('oldwidth');
         var height = target.attr('oldheight');
         var imageUrl = target.attr("src");
         if (height > maxheight)
         {
            var ratio = width/height;
            var height = maxheight;
            var width = height * ratio;
         }
         if (width > maxwidth)
         {
            var ratio = height/width;
            var width = maxwidth;
            var height = width * ratio;
         }
         var modalhtml = "<p style='line-height:10px;'>
		    This is slide number " + t + "</p>
			<div style='width:" + width + "px;height:" + height + "px;'>
			<img src='" + imageUrl + "'  style='width:" + width + "px;height:" + height + "px;' /></div>";
         jQuery.modal(modalhtml);
         }); 
      }
   });
});
</script>

The CSS

#slider {
    width:696px;
}
#slider img{
    border:none;
}
#slider ul, #slider li{
    margin:0;
    padding:0;
    list-style:none;
}
#slider li { 
    width:696px;
    overflow:hidden; 
}
#simplemodal-overlay {background-color:#000; cursor:wait;}

/* Container */
#simplemodal-container {color:#bbb; background-color:#333; border:4px solid #444; }
#simplemodal-container a.modalCloseImg {background:url(../images/x.png) no-repeat top right; width:100%; height:100%; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}

The HTML

<div id="slider" > </div>