On 10/24/07, Jason <[EMAIL PROTECTED]> wrote:
>
> Thank you for the reply. That's how I have it setup now but the
> scrolling image disappears at the edge of the inner div. I'd like for
> it to scroll "off the page" so-to-speak.
I see what you want now. Here's a way to do it with a custom transition:
<html>
<head>
<script type="text/javascript" src="jquery-1.2.1.js"></script>
<script type="text/javascript" src="jquery.cycle.js"></script>
<script type="text/javascript">
// define custom transition
jQuery.fn.cycle.transitions.wideScroll= function($cont, $slides, opts) {
var w = $cont.width();
var elW = $slides[0].offsetWidth;
$cont.css('overflow','hidden');
opts.before.push(function(curr, next, opts) {
jQuery(this).show();
opts.cssBefore.left = w;
opts.animOut.left = 0-elW;
});
opts.cssFirst = { left: (w-elW)/2, top: 0 };
opts.animIn = { left: (w-elW)/2 };
};
$(function() {
$('#partners').cycle({
fx: 'wideScroll',
delay: -2000
});
});
</script>
<style type="text/css">
#partners { border: 3px solid #faa; width: 300px; height: 72px; }
</style>
</head>
<body>
<div id="partners">
<img src="foo.jpg" width="145" height="72" />
<img src="bar.jpg" width="145" height="72" />
</div>
</body>
</html>
