I built an image slider that uses jquery to create a "loop" of images. If you go to the right, the first image is prepended to the end. If you go to the left the last image is attended at the beginning. The margin-left-value is used to create a sliding look. It seems to work so far, but in Safari the animation of the margin doesnt work. It should use an easing function to ease between -100px und -200px. But there are values about 4000px.
There are other people, who have those jumping problems in Safari, but I found no sollution.
Here is the js:
window.onload = function ()
{
$inner = $('#wdgt_slider #inner');
$active = $('#wdgt_slider').children().first();
$slides = $('#wdgt_slider').children().length;
$inner.prepend($inner.children().last()).css({'-webkit-transition':' ', '-moz-transition':' ', '-o-transition':' ', 'transition':' ', 'marginLeft':'-100%'});
$('#wdgt_slider').delegate('input[type=radio]', 'change', function()
{
if($(this).attr("checked") == "checked")
{
if( $(this).index() == ($inner.children().length-1) && $active.index() == 0 )
{
prev();
}
else if( $(this).index() == 0 && $active.index() == ($inner.children().length-1) )
{
next();
}
else if( $(this).index() < $active.index() )
{
prev();
}
else if( $(this).index() > $active.index() )
{
next();
}
$active = $(this);
}
});
}
function next()
{
$inner.animate({
marginLeft:"-200%"
},8000, $.easie(0.77, 0, 0.175, 1),function()
{
//$inner.append($inner.children().first()).css({'-webkit-transition':' ', '-moz-transition':' ', '-o-transition':' ', 'transition':' ', 'marginLeft': "-100%"});
});
}
function prev()
{
$inner.animate({
marginLeft:"0"
},8000, $.easie(0.77, 0, 0.175, 1), function()
{
$inner.prepend($inner.children().last()).css('marginLeft', '-100%');
});
}
I didn't make a fiddle, because the problem is more obvious inside the 960 grid system. Here is the link: http://www.goldentree.de/wordpress/