library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Position: Fix initial positioning of cycler demo.

Browse Source
This commit is contained in:
Jörn Zaefferer 2012-02-23 14:26:47 +01:00
parent d32a9e81ec
commit 8f71accb75
1 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
demos/position/cycler.html
View File

@ -17,6 +17,7 @@
</style>
<script>
$(function() {
// TODO refactor into a widget and get rid of these plugin methods
$.fn.position2 = function( options ) {
return this.position( $.extend({
of: window,
@ -52,10 +53,6 @@
});
};
$( "img:eq(0)" ).left();
$( "img:eq(1)" ).center();
$( "img:eq(2)" ).right();
$( "body" ).css({
overflow: "hidden"
})
@ -66,15 +63,21 @@
position: "absolute",
});
$( "img:eq(0)" ).left();
$( "img:eq(1)" ).center();
$( "img:eq(2)" ).right();
function animate( to ) {
$(this).animate( to );
$(this).stop( true, false ).animate( to );
}
function next() {
function next( event ) {
event.preventDefault();
$( "img:eq(2)" ).center( animate );
$( "img:eq(1)" ).left( animate )
$( "img:eq(0)" ).right().appendTo( ".demo" );
}
function previous() {
function previous( event ) {
event.preventDefault();
$( "img:eq(0)" ).center( animate );
$( "img:eq(1)" ).right( animate );
$( "img:eq(2)" ).left().prependTo( ".demo" );
@ -82,8 +85,8 @@
$( "#previous" ).click( previous );
$( "#next" ).click( next );
$( ".demo img" ).click(function() {
$( ".demo img" ).index( this ) === 0 ? previous() : next();
$( ".demo img" ).click(function( event ) {
$( ".demo img" ).index( this ) === 0 ? previous( event ) : next( event );
});
$( window ).resize(function() {
@ -98,9 +101,9 @@
<div class="demo">
<img src="images/earth.jpg" />
<img src="images/flight.jpg" />
<img src="images/rocket.jpg" />
<img src="images/earth.jpg" width="458" height="308" />
<img src="images/flight.jpg" width="512" height="307" />
<img src="images/rocket.jpg" width="300" height="353" />
<a id="previous" href="#">Previous</a>
<a id="next" href="#">Next</a>