Slideshow POC

by austegard

HTML

<script src="http://dimsemenov.com/plugins/royal-slider/royalslider/jquery.royalslider.min.js"></script>
<div id="u31" style="" data-label="panel">




<div id="pd3u31" style="display: none; visibility: hidden; " data-label="State4">
<div id="u32" class="u32">
<div id="u32_rtf"><p style="text-align:left;"><span style="font-family:Arial;font-size:20px;font-weight:bold;font-style:normal;text-decoration:none;color:#333333;">4 - Featured Content to go here</span></p></div>
</div>
</div><div id="pd2u31" style="display: none; visibility: hidden; " data-label="State3">
<div id="u33" class="u33">
<div id="u33_rtf"><p style="text-align:left;"><span style="font-family:Arial;font-size:20px;font-weight:bold;font-style:normal;text-decoration:none;color:#333333;">3 - AIS Case Study Published on Microsoft.com</span></p></div>
</div>
</div><div id="pd1u31" style="display: none; visibility: hidden; " data-label="State2">
<div id="u34" class="u34">
<div id="u34_rtf"><p style="text-align:left;"><span style="font-family:Arial;font-size:20px;font-weight:bold;font-style:normal;text-decoration:none;color:#333333;">2 - AIS' Work Nominated for a Webby Award</span></p></div>
</div>
</div><div id="pd0u31" style="display: block; " data-label="State1">
<div id="u35" class="u35">
<div id="u35_rtf"><p style="text-align:left;"><span style="font-family:Arial;font-size:20px;font-weight:bold;font-style:normal;text-decoration:none;color:#333333;">1 - AIS' Harin Sandhoo speaks about SQL Azure</span></p></div>
</div>
</div>

</div>

CSS

#u31 {
position: absolute;
left: 10px;
top: 146px;
width: 970px;
height: 300px;
overflow: hidden;
border: solid 1px gray;
}

JavaScript

var sliderJQ = $('#u31').royalSlider({
    controlNavigation:'thumbnails',
    imageScaleMode: 'fill',
    allowCSS3OnMacWebkit: true,
    arrowsNav: false,
    fullscreen: false,
    loop: true,
    thumbs: {
      firstMargin: false
    },
    autoPlay: {
      enabled: true,
      delay: 1500
    },
    thumbsFirstMargin: false,
    autoScaleSlider: true, 
    autoScaleSliderWidth: 960,     
    autoScaleSliderHeight: 600,
    keyboardNavEnabled: true
  });