Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
tree: 24cb0ca5dc
Fetching contributors…

Cannot retrieve contributors at this time

127 lines (110 sloc) 4.221 kb
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>rcarousel – carousel with a lightbox</title>
<link type="text/css" rel="stylesheet" href="css/reset.css" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="../widget/css/rcarousel.css" />
<link type="text/css" rel="stylesheet" href="rlightbox/css/ui-lightness/jquery-ui-1.8.16.custom.css" />
<link type="text/css" rel="stylesheet" href="rlightbox/css/lightbox.css" />
<style type="text/css">
#container {
width: 480px;
}
#pages {
width: 69px;
height: 18px;
margin: 5px auto 0 auto;
}
.bullet {
background: url(images/page-off.png) center center no-repeat;
display: block;
width: 18px;
height: 18px;
margin: 0;
margin-right: 5px;
float: left;
}
</style>
</head>
<body>
<div id="header">
<p>
This is an example of <em>rcarousel</em> – a jQuery UI continuous carousel.
Go back to the <a href="http://ryrych.github.com/rcarousel/">documentation</a>
</p>
</div>
<div id="content">
<h1>rcarousel + <a href="http://ryrych.github.com/rlightbox2/">rlightbox</a>. Click on a thumb to see them in action.</h1>
<div id="container">
<div id="carousel">
<a href="images/lightbox/01.jpg" class="lb_gallery"><img src="images/lightbox/01_thumb.jpg" /></a>
<a href="images/lightbox/02.jpg" class="lb_gallery"><img src="images/lightbox/02_thumb.jpg" /></a>
<a href="images/lightbox/03.jpg" class="lb_gallery"><img src="images/lightbox/03_thumb.jpg" /></a>
<a href="images/lightbox/04.jpg" class="lb_gallery"><img src="images/lightbox/04_thumb.jpg" /></a>
<a href="images/lightbox/05.jpg" class="lb_gallery"><img src="images/lightbox/05_thumb.jpg" /></a>
<a href="images/lightbox/06.jpg" class="lb_gallery"><img src="images/lightbox/06_thumb.jpg" /></a>
<a href="images/lightbox/07.jpg" class="lb_gallery"><img src="images/lightbox/07_thumb.jpg" /></a>
</div>
<div id="pages"></div>
</div>
</div>
<script type="text/javascript" src="../widget/lib/jquery-1.7.1.js"></script>
<script type="text/javascript" src="../widget/lib/jquery.ui.core.js"></script>
<script type="text/javascript" src="../widget/lib/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../widget/lib/jquery.ui.rcarousel.js"></script>
<script type="text/javascript" src="rlightbox/lib/jquery.ui.rlightbox.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
function generatePages() {
var _total, i, _link;
_total = $( "#carousel" ).rcarousel( "getTotalPages" );
for ( i = 0; i < _total; i++ ) {
_link = $( "<a href='#'></a>" );
$(_link)
.bind("click", {page: i},
function( event ) {
$( "#carousel" ).rcarousel( "goToPage", event.data.page );
event.preventDefault();
}
)
.addClass( "bullet off" )
.appendTo( "#pages" );
}
// mark first page as active
$( "a:eq(0)", "#pages" )
.removeClass( "off" )
.addClass( "on" )
.css( "background-image", "url(images/page-on.png)" );
}
function pageLoaded( event, data ) {
$( "a.on", "#pages" )
.removeClass( "on" )
.css( "background-image", "url(images/page-off.png)" );
$( "a", "#pages" )
.eq( data.page )
.addClass( "on" )
.css( "background-image", "url(images/page-on.png)" );
}
$( ".lb_gallery" ).rlightbox();
$( "#carousel" ).rcarousel({
auto: {enabled: true},
start: generatePages,
pageLoaded: pageLoaded,
width: 160,
height: 120
});
$( ".bullet" )
.hover(
function() {
$( this ).css( "opacity", 0.7 );
},
function() {
$( this ).css( "opacity", 1.0 );
}
);
});
</script
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.