Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

186 lines (160 sloc) 6.642 kb
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Slider Gallery</title>
<style type="text/css" media="screen">
<!--
body {
padding: 0;
font: 1em "Trebuchet MS", verdana, arial, sans-serif;
font-size: 100%;
background-color: #212121;
margin: 0;
}
h1 {
margin-bottom: 2px;
}
#container {
background-color: #fff;
width: 580px;
margin: 15px auto;
padding: 50px;
}
/* slider specific CSS */
.sliderGallery {
background: url(images/productbrowser_background_20070622.jpg) no-repeat;
overflow: hidden;
position: relative;
padding: 10px;
height: 160px;
width: 560px;
}
.sliderGallery UL {
position: absolute;
list-style: none;
overflow: none;
white-space: nowrap;
padding: 0;
margin: 0;
}
.sliderGallery UL LI {
display: inline;
}
.slider {
width: 542px;
height: 17px;
margin-top: 140px;
margin-left: 5px;
padding: 1px;
position: relative;
background: url(images/productbrowser_scrollbar_20070622.png) no-repeat;
}
.handle {
position: absolute;
cursor: move;
height: 17px;
width: 181px;
top: 0;
background: url(images/productbrowser_scroller_20080115.png) no-repeat;
z-index: 100;
}
.slider span {
color: #bbb;
font-size: 80%;
cursor: pointer;
position: absolute;
z-index: 110;
top: 3px;
}
.slider .slider-lbl1 {
left: 50px;
}
.slider .slider-lbl2 {
left: 107px;
}
.slider .slider-lbl3 {
left: 156px;
}
.slider .slider-lbl4 {
left: 280px;
}
.slider .slider-lbl5 {
left: 455px;
}
-->
</style>
<script type="text/javascript" src="../../../../jquery/jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../../source/ui.core.js"></script>
<script type="text/javascript" src="../../../source/ui.slider.js"></script>
<script type="text/javascript" charset="utf-8">
/**
* Note that we have to use window.onload because $(document).ready() fires before images are loaded
* and ul.innerWidth() - container.outerWidth(); doesn't give the correct width because the width
* of the UL hasn't expanded out until the images have finished rendering.
*/
window.onload = function () {
var container = $('div.sliderGallery');
var ul = $('ul', container);
var itemsWidth = ul.innerWidth() - container.outerWidth();
$('.slider', container).slider({
min: 0,
max: itemsWidth,
handle: '.handle',
stop: function (event, ui) {
ul.animate({'left' : ui.value * -1}, 500);
},
slide: function (event, ui) {
ul.css('left', ui.value * -1);
}
});
};
</script>
</head>
<body>
<div id="container">
<h1>Slider Gallery</h1>
<p>This shows a demonstration of a slider widget from the jQuery UI library used to create the same effect used on <a href="http://www.apple.com/mac/">Apple's web site</a>.</p>
<p><a href="http://jqueryfordesigners.com/slider-gallery">Read the article, and see the screencast this demonstration relates to</a></p>
<div class="sliderGallery">
<ul>
<li><img class="pb-airportexpress" src="images/pb_airport_express.jpg" /></li>
<li><img src="images/pb_airport_extreme.jpg" /></li>
<li><img src="images/pb_timecapsule_20080115.jpg" /></li>
<li><img src="images/pb_keyboards20070807.jpg" /></li>
<li><img src="images/pb_mighty_mouse.jpg" /></li>
<li><img src="images/pb_cinema_display20071026.jpg" /></li>
<li><img src="images/pb_mac_pro_20070622.jpg" /></li>
<li><img class="pb-macmini" src="images/pb_mac_mini.jpg" /></li>
<li><img src="images/pb_macbook20071026.jpg" /></li>
<li><img class="pb-macbookair" src="images/pb_macbookair_20080115.jpg" /></li>
<li><img class="pb-macbookpro" src="images/pb_macbook_pro20071026.jpg" /></li>
<li><img class="pb-imac" src="images/pb_imac20071026.jpg" /></li>
<li><img src="images/pb_macosx_20080115.jpg" /></li>
<li><img src="images/pb_ilife_20080115.jpg" /></li>
<li><img src="images/pb_dot_mac_20080115.jpg" /></li>
<li><img src="images/pb_iwork_20080115.jpg" /></li>
<li><img src="images/pb_quicktime.jpg" /></li>
<li><img src="images/pb_aperture20080212.jpg" /></li>
<li><img src="images/pb_final_cut_studio2_20080115.jpg" /></li>
<li><img src="images/pb_final_cut_express_20080115.jpg" /></li>
<li><img src="images/pb_logic_studio_20080115.jpg" /></li>
<li><img src="images/pb_logic_express_20080115.jpg" /></li>
<li><img src="images/pb_shake_20080115.jpg" /></li>
<li><img src="images/pb_apple_remote_desktop_20080115.jpg" /></li>
<li><img src="images/pb_xserve.jpg" /></li>
<li><img src="images/pb_xserve_raid.jpg" /></li>
<li><img class="pb-xsan" src="images/pb_xsan_20080115.jpg" /></li>
<li><img class="pb-macosxserver" src="images/pb_macosx_server20071016.jpg" /></li>
</ul>
<div class="slider">
<div class="handle"></div>
<span class="slider-lbl1">Wi-Fi</span>
<span class="slider-lbl3">Macs</span>
<span class="slider-lbl4">Applications</span>
<span class="slider-lbl5">Servers</span>
</div>
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.