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>