Topic: more options for imageTransitionType
Hi,
I saw a nice example of a true fade (i.e. not fade out out to black then fade in) between images done in HTML5:
http://forums.culturalheritageimaging.o … ts-in-web/
Example here:
/http://www.arheovisioon.ee/en/uncategor … frared-rti.
This would be a nice option to have. It would be even nicer if you could specify the transition type and time for each image.
Jon
The code is:
<style>
#rotating-item-wrapper {
position: relative;
width: 611px;
height: 411px;
}
.rotating-item {
display: none;
position: absolute;
top:0;
}
</style>
<script>
// Code based on http://trendmedia.com/code/jquery-infinite-rotator/
// Modified by Hembo Pagi
// Released under the GPL license
// http://www.opensource.org/licenses/gpl-license.php
// **********************************************************************
jQuery(function($) {
$(window).load(function() {
//initial fade-in time (in milliseconds)
var initialFadeIn = 1500;
//interval between items (in milliseconds)
var itemInterval = 3000;
//cross-fade time (in milliseconds)
var fadeTime = 1500;
//count number of items
var numberOfItems = $('.rotating-item').length;
//set current item
var currentItem = 0;
//show first item
$('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);
$(".rotating-item").click(function() {
$('.rotating-item').eq(currentItem).fadeOut(fadeTime);
if(currentItem == numberOfItems -1){
currentItem = 0;
} else {
currentItem++;
}
$('.rotating-item').eq(currentItem).fadeIn(fadeTime);
});
});
});
</script>
<div id="rotating-item-wrapper">
<img src="normal.jpg" alt="" class="rotating-item" width="611" height="411" />
<img src="ir-spec.jpg" alt="" class="rotating-item" width="611" height="411" />
</div>