Skip to content

Commit

Permalink
updated examples to reflect those from on-line documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
Wojciech Ryrych committed Dec 31, 2011
1 parent 7f4c4d5 commit f9a25ca
Show file tree
Hide file tree
Showing 12 changed files with 475 additions and 271 deletions.
26 changes: 20 additions & 6 deletions examples/ajax.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>rcarousel - load elements on demand</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" />
<style type="text/css">
#carousel {
Expand All @@ -11,13 +13,25 @@
</style>
</head>
<body>
<p>Loading elements on demand. May not work locally in some browsers.</p>
<div id="carousel">
<img src="images/001.jpg" />
<img src="images/002.jpg" />
<img src="images/003.jpg" />
<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>Loading elements on demand.</h1>

<div id="carousel">
<img src="images/001.jpg" />
<img src="images/002.jpg" />
<img src="images/003.jpg" />
</div>
<p><input type="button" name="but" id="but" value="load new elements from the server" /></p>

<p><em>May not work locally in some browsers.</em></p>
</div>
<p><input type="button" name="but" id="but" value="load new elements from the server" /></p>

<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>
Expand Down
44 changes: 28 additions & 16 deletions examples/auto_reverse.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@
<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 - auto reverse example</title>
<title>rcarousel – Auto mode</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" />
<style type="text/css">
#container {
Expand Down Expand Up @@ -43,22 +45,32 @@
</style>
</head>
<body>
<p>carousel with auto mode, custom interval between slides and reversed direction</p>
<div id="container">
<div id="carousel">
<img src="images/001.jpg" />
<img src="images/002.jpg" />
<img src="images/003.jpg" />
<img src="images/004.jpg" />
<img src="images/005.jpg" />
<img src="images/006.jpg" />
<img src="images/007.jpg" />
<img src="images/008.jpg" />
<img src="images/009.jpg" />
<img src="images/010.jpg" />
<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>carousel with Auto mode, custom interval between slides and reversed direction</h1>

<div id="container">
<div id="carousel">
<img src="images/001.jpg" />
<img src="images/002.jpg" />
<img src="images/003.jpg" />
<img src="images/004.jpg" />
<img src="images/005.jpg" />
<img src="images/006.jpg" />
<img src="images/007.jpg" />
<img src="images/008.jpg" />
<img src="images/009.jpg" />
<img src="images/010.jpg" />
</div>
<a href="#" id="ui-carousel-next"><span>next</span></a>
<a href="#" id="ui-carousel-prev"><span>prev</span></a>
</div>
<a href="#" id="ui-carousel-next"><span>next</span></a>
<a href="#" id="ui-carousel-prev"><span>prev</span></a>
</div>

<script type="text/javascript" src="../widget/lib/jquery-1.7.1.js"></script>
Expand Down
53 changes: 53 additions & 0 deletions examples/css/reset.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
29 changes: 29 additions & 0 deletions examples/css/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
body {
font: 16px/1.5 sans-serif;

}

#header {
background-color: #FF5C43;
color: #fff;
text-align: center;
padding: 20px;
margin-bottom: 20px;
}

#content {
margin: 20px;
}

h1 {
font-size: 2em;
margin-bottom: 30px;
}

a:link, a:visited, a:hover, a:active {
color: #fff;
}

em {
font-style: italic;
}
43 changes: 27 additions & 16 deletions examples/custom_step_and_visible.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@
<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 - custom step and visible example</title>
<title>rcarousel - custom step and visible</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" />
<style type="text/css">
#container {
Expand Down Expand Up @@ -43,22 +45,31 @@
</style>
</head>
<body>
<p>custom number of visible elements (5) and step (2)</p>
<div id="container">
<div id="carousel">
<img src="images/001.jpg" />
<img src="images/002.jpg" />
<img src="images/003.jpg" />
<img src="images/004.jpg" />
<img src="images/005.jpg" />
<img src="images/006.jpg" />
<img src="images/007.jpg" />
<img src="images/008.jpg" />
<img src="images/009.jpg" />
<img src="images/010.jpg" />
<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>custom number of visible elements (5) and step (2)</h1>
<div id="container">
<div id="carousel">
<img src="images/001.jpg" />
<img src="images/002.jpg" />
<img src="images/003.jpg" />
<img src="images/004.jpg" />
<img src="images/005.jpg" />
<img src="images/006.jpg" />
<img src="images/007.jpg" />
<img src="images/008.jpg" />
<img src="images/009.jpg" />
<img src="images/010.jpg" />
</div>
<a href="#" id="ui-carousel-next"><span>next</span></a>
<a href="#" id="ui-carousel-prev"><span>prev</span></a>
</div>
<a href="#" id="ui-carousel-next"><span>next</span></a>
<a href="#" id="ui-carousel-prev"><span>prev</span></a>
</div>

<script type="text/javascript" src="../widget/lib/jquery-1.7.1.js"></script>
Expand Down
42 changes: 27 additions & 15 deletions examples/gotopage.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@
<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 - go to page example</title>
<title>rcarousel – custom navigation</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" />
<style type="text/css">
#container {
Expand All @@ -27,21 +29,31 @@
</style>
</head>
<body>
<p>more advanced example: callbacks, custom navigation and auto mode</p>
<div id="container">
<div id="carousel">
<img src="images/001.jpg" />
<img src="images/002.jpg" />
<img src="images/003.jpg" />
<img src="images/004.jpg" />
<img src="images/005.jpg" />
<img src="images/006.jpg" />
<img src="images/007.jpg" />
<img src="images/008.jpg" />
<img src="images/009.jpg" />
<img src="images/010.jpg" />
<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>more advanced example: callbacks, custom navigation and auto mode</h1>

<div id="container">
<div id="carousel">
<img src="images/001.jpg" />
<img src="images/002.jpg" />
<img src="images/003.jpg" />
<img src="images/004.jpg" />
<img src="images/005.jpg" />
<img src="images/006.jpg" />
<img src="images/007.jpg" />
<img src="images/008.jpg" />
<img src="images/009.jpg" />
<img src="images/010.jpg" />
</div>
<div id="pages"></div>
</div>
<div id="pages"></div>
</div>

<script type="text/javascript" src="../widget/lib/jquery-1.7.1.js"></script>
Expand Down
Loading

0 comments on commit f9a25ca

Please sign in to comment.