2009-07-24 18:24:13 +00:00
<!doctype html>
< html lang = "en" >
< head >
< title > jQuery UI Position - Default functionality< / title >
< link type = "text/css" href = "../../themes/base/ui.all.css" rel = "stylesheet" / >
2010-01-20 13:52:38 +00:00
< script type = "text/javascript" src = "../../jquery-1.4.js" > < / script >
2009-09-17 10:39:12 +00:00
< script type = "text/javascript" src = "../../ui/jquery.ui.core.js" > < / script >
2009-12-16 22:20:18 +00:00
< script type = "text/javascript" src = "../../ui/jquery.ui.widget.js" > < / script >
2009-09-17 10:39:12 +00:00
< script type = "text/javascript" src = "../../ui/jquery.ui.position.js" > < / script >
2009-07-24 18:24:13 +00:00
< link type = "text/css" href = "../demos.css" rel = "stylesheet" / >
< style type = "text/css" >
html, body {
margin: 0;
padding: 0
}
< / style >
< script type = "text/javascript" >
$(function() {
$.fn.position2 = function(options) {
return this.position($.extend({
of: window,
2010-01-07 03:19:50 +00:00
using: function(to) {
2009-07-24 18:24:13 +00:00
$(this).css({
top: to.top,
left: to.left
})
},
collision: "none"
}, options));
}
2010-01-07 03:19:50 +00:00
$.fn.left = function(using) {
2009-07-24 18:24:13 +00:00
return this.position2({
my: "right middle",
at: "left middle",
offset: "25 0",
2010-01-07 03:19:50 +00:00
using: using
2009-07-24 18:24:13 +00:00
});
}
2010-01-07 03:19:50 +00:00
$.fn.right = function(using) {
2009-07-24 18:24:13 +00:00
return this.position2({
my: "left middle",
at: "right middle",
offset: "-25 0",
2010-01-07 03:19:50 +00:00
using: using
2009-07-24 18:24:13 +00:00
});
}
2010-01-07 03:19:50 +00:00
$.fn.center = function(using) {
2009-07-24 18:24:13 +00:00
return this.position2({
my: "center middle",
at: "center middle",
2010-01-07 03:19:50 +00:00
using: using
2009-07-24 18:24:13 +00:00
});
};
$("img:eq(0)").left();
$("img:eq(1)").center();
$("img:eq(2)").right();
$("body").css({
overflow: "hidden"
})
$(".demo").css({
position: "relative",
});
$(".demo img").css({
position: "absolute",
});
function animate(to) {
$(this).animate(to);
}
function next() {
$("img:eq(2)").center(animate);
$("img:eq(1)").left(animate)
$("img:eq(0)").right().appendTo(".demo");
}
function previous() {
$("img:eq(0)").center(animate);
$("img:eq(1)").right(animate);
$("img:eq(2)").left().prependTo(".demo");
}
$("#previous").click(previous);
$("#next").click(next);
$(".demo img").click(function() {
$(".demo img").index(this) == 0 ? previous() : next();
});
$(window).resize(function() {
$("img:eq(0)").left(animate);
$("img:eq(1)").center(animate);
$("img:eq(2)").right(animate);
})
});
< / script >
< / head >
< body >
< div class = "demo" >
< img src = "images/earth.jpg" / >
< img src = "images/flight.jpg" / >
< img src = "images/rocket.jpg" / >
< a id = "previous" href = "#" > Previous< / a >
< a id = "next" href = "#" > Next< / a >
< / div >
< div class = "demo-description" >
< p > A prototype for the < a href = "http://wiki.jqueryui.com/Photoviewer" > Photoviewer< / a > using Position to place images at the center, left and right and cycle them.
< br / > Use the links at the top to cycle, or click on the images on the left and right.
< br / > Note how the images are repositioned when resizing the window.
< br / > Warning: Doesn't currently work inside the demo viewer; open in a new window instead!< / p >
< / div > <!-- End demo - description -->
< / body >
< / html >
