Allows manual curation of a rotating list of multimedia items for special sections.

dp.com-media-mini-rotator

<script src="http://extras.denverpost.com/media/js/jquery-min.js"></script>

<script type="text/javascript">
document.write('<style type="text/css"> \n\
#ssrotate { width:300px; height:270px; overflow:hidden; background:#f5f5f5; color:#222; position:relative; border:1px solid #bbb; -moz-border-radius:5px; border-radius:5px; display:block; margin: 10px 0 5px; } \n\
#ssrotate .rotating-item { width:298px; height:324px; margin-bottom:20px; display: none; position: absolute; top: 0; left: 0; } \n\
#ssrotate .rotating-item img { width:280px; height:200px; margin:5px 10px 10px; } \n\
#ssrotate .rotating-item h2 { font-family:Georgia,Times,"Times New Roman",serif; font-size:14px; color:#568; width:280px; font-weight:600; padding:0; margin:0 10px 5px; } \n\
#ssrotate .rotating-item h2.ssover { font-family:Georgia,Times,"Times New Roman",serif; font-size:12px; text-transform:uppercase; color:#568; width:280px; font-weight:600; padding:0; margin:10px 10px 0; } \n\
</style>');

$(window).load(function() {
    var InfiniteRotatorV =
    {
        init: function()
        {
            var initialFadeIn = 450;
            var itemInterval = 4200;
            var fadeTime = 600;
            var numberOfItems = $('.rotating-item').length;
            var currentItem = 0;
            $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);
            var infiniteLoop = setInterval(function(){
                $('.rotating-item').eq(currentItem).fadeOut(fadeTime);
 
                if(currentItem == numberOfItems -1){
                    currentItem = 0;
                }else{
                    currentItem++;
                }
                $('.rotating-item').eq(currentItem).fadeIn(fadeTime);
            }, itemInterval);
        }
    };
    InfiniteRotatorV.init();
});
</script>

<div id="ssrotate">
    <div class="rotating-item"><!-- BE SURE TO CHANGE BOTH LINK URLs -->
		<h2 class="ssover">photos</h2><!-- put in photos or video as appropriate -->
		<a href="http://www.denverpost.com/wildfires/ci_20962928/photos-before-and-after-views-neighborhood-burned-by"><img src="http://extras.mnginteractive.com/live/media/site36/2012/1114/20121114_125645_20120629_122421_tamorawayafter.jpg" border="0"></a><!-- Insert image here - images need to be 280x200 -->
		<a href="http://www.denverpost.com/wildfires/ci_20962928/photos-before-and-after-views-neighborhood-burned-by"><h2>Waldo Canyon Fire before and after</h2></a><!-- put in a headline -- keep it short -->
	</div>
    
    <div class="rotating-item"><!-- BE SURE TO CHANGE BOTH LINK URLs -->
		<h2 class="ssover">photos</h2><!-- put in photos or video as appropriate -->
		<a href="http://photos.denverpost.com/2012/06/27/photos-the-firefighters-of-the-colorado-wildfires/38590/"><img src="http://extras.mnginteractive.com/live/media/site36/2012/1114/20121114_010139_firefighters.jpg" border="0"></a><!-- Insert image here - images need to be 280x200 -->
		<a href="http://photos.denverpost.com/2012/06/27/photos-the-firefighters-of-the-colorado-wildfires/38590/"><h2>Firefighters of Colorado wildfires</h2></a><!-- put in a headline -- keep it short -->
	</div>

</div> <!-- #ssrotate -->