-
Notifications
You must be signed in to change notification settings - Fork 11
/
Copy pathindex.html
122 lines (114 loc) · 7.66 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html class="no-js">
<head>
<title>Overview - jQuery Rondell</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="content-language" content="en">
<meta name="keywords" content="jquery,tooltip,popup,plugin,css3,open-source,mit-license,extension,overlay">
<meta name="description" content="Sebastian Helzle's jQuery Rondell plugin">
<link rel="stylesheet" href="examples/screen.css" type="text/css" media="all" title="Screen">
<link rel="stylesheet" href="dist/jquery.rondell.css" type="text/css" media="all" title="Screen">
<script src="libs/modernizr-2.0.6.min.js"></script>
</head>
<body>
<div class="pageHeader hasShadow">
<h1 id="docustart">Rondell - Display images and other content in a nice way</h1>
<p><b>Version 1.1.0</b> - Created by <a href="http://www.sebastianhelzle.net" target="_blank" title="Sebastian Helzle IT-Consulting">Sebastian Helzle</a></p>
</div>
<div id="introduction" class="page hasShadow">
<div class="subnav centered">
<ul class="nav nav-pills">
<li class="active"><a href="index.html">Overview</a></li>
<li><a href="examples/installation.html">Installation</a></li>
<li><a href="examples/changelog.html">Changelog</a></li>
<li><a href="examples/options.html">Options</a></li>
<li><span class="spacer">|</span></li>
<li><a href="examples/carousel.html">Carousel</a></li>
<li><a href="examples/slider.html">Slider</a></li>
<li><a href="examples/scroller.html">Scroller</a></li>
<li><a href="examples/gallery.html">Gallery</a></li>
<li><a href="examples/thumbnails.html">Thumbnails</a></li>
<li><a href="examples/pages.html">Pages</a></li>
</ul><br class="clear">
</div>
<div id="introduction" class="column size1of2">
<h3 class="hidden">About</h3><p>This is a <a href="http://www.jquery.com" title="jQuery">jQuery</a> plugin for displaying galeries
and other content the way <em>you</em> want.</p>
<p>Checkout the different presets in the upper menu!
Especially the <a href="examples/gallery.html" title="Rondell Gallery preset">Gallery</a> and <a href="examples/thumbnails.html" title="Rondell Thumbnails preset">Thumbnails</a> preset.</p>
<p>The rondell demos can be controlled with your keyboard,
by clicking the controls or by clicking the rondell items.</p>
<p>Touching items and swiping on a phone or tablet computer will work too!</p>
<p>The plugin has been tested with and should work fine with:
IE 7-9, Firefox 3.6+, Chrome, Safari 4+, Opera 11+</p>
<p>Licensed under the <a href="http://www.opensource.org/licenses/mit-license.php" title="MIT licence">MIT license</a>.</p>
<p><a href="https://github.com/Sebobo/jquery.rondell/zipball/master" title="Rondell zip download" class="btn success">Download rondell now</a> <a href="https://github.com/Sebobo/jquery.rondell" title="Rondell source at github" class="btn">
Visit rondell at github
</a></p>
</div>
<div class="column size1of2"><img src="examples/images/preview.png" alt="Rondell preview" class="hideOnJS">
<div id="rondellTopDemo" class="showOnJS hidden"><a target="_blank" rel="rondell_1" href="examples/images/galery/band.jpg" title="My favourite band"><img src="examples/images/galery/band_small.jpg" alt="Band" title="My favourite band"></a><a target="_blank" rel="rondell_1" href="examples/images/galery/dog.jpg" title="My dog"><img src="examples/images/galery/dog_small.jpg" alt="Dog" title="My dog"></a><a target="_blank" rel="rondell_1" href="examples/images/galery/cat.jpg" title="My cat"><img src="examples/images/galery/cat_small.jpg" alt="Cat" title="My cat"></a><a target="_blank" rel="rondell_1" href="examples/images/galery/boar.jpg" title="Boar"><img src="examples/images/galery/boar_small.jpg" alt="Boar" title="Boar"></a><a target="_blank" rel="rondell_1" href="examples/images/galery/snow.jpg" title="Snow"><img src="examples/images/galery/snow_small.jpg" alt="Snow" title="Snow"></a><a target="_blank" rel="rondell_1" href="examples/images/galery/rabbit.jpg" title="Rabbit"><img src="examples/images/galery/rabbit_small.jpg" alt="Rabbit" title="Rabbit"></a><a target="_blank" rel="rondell_1" href="examples/images/galery/trash.jpg" title="Trash"><img src="examples/images/galery/trash_small.jpg" alt="Trash" title="Trash"></a></div>
</div><br class="clear"><br>
<div class="column">
<!-- Flattr button BEGIN--><a rev="flattr;button:compact;" href="http://sebobo.github.com/jquery.rondell" class="FlattrButton hidden"></a>
<noscript><a href="http://flattr.com/thing/460088/jQuery-Rondell-by-Sebastian-Helzle" target="_blank"><img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0"></a></noscript>
<!-- Flattr button END-->
</div>
<div class="column last"><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=TSN2TDYNKZHF4" title="Buy me a beer and support this project" target="_blank">Buy me a beer if you like this project :-)</a></div><br><br id="usage">
<div class="size1of2">
<h4>Usage</h4>
<pre><script type="text/javascript">
$('.myContainer > .myItem').rondell([options][, callback]);
</script>
</pre>
</div><br>
<div class="column size1of2">
<h5>Changelog</h5><a href="/examples/changelog.html" title="See changes in the last versions" class="showCode">Click here to see changes in the last versions</a><br><br>
<h5>Roadmap</h5>
<ul>
<li>More themes</li>
<li>CSS based controls</li>
<li>CSS animations</li>
<li>Full QUnit testsuite</li>
</ul><br>
</div>
<div class="column size1of2 last">
<h5>Dependencies</h5>
<ul>
<li><a href="http://www.jQuery.com" title="jQuery">jQuery</a> version 1.5.2 or better</li>
<li><a href="http://www.modernizr.com/" title="Modernizr library">Modernizr</a> for browser capability fallbacks.<br>The library is included in the plugins<i> lib</i> folder.</li>
</ul>
</div><br class="clear">
<hr><br>
<h4>Feedback is welcome!</h4>
<p>Please send me suggestions, ideas for improvement or anything else to <a href="mailto:[email protected]" title="Send me a mail">[email protected]</a> or <a href="http://twitter.com/#!/sebobo" target="_blank" title="Sebobo at twitter">@sebobo</a></p><br class="clear"><br>
<h4>Have fun and check out my other plugins</h4>
<p><a href="http://projects.sebastianhelzle.net/jquery.smallipop" title="smallipop - a better tooltip plugin" class="btn primary">
jQuery smallipop
</a></p><br>
<p>jQuery Rondell is powered by <a href="http://jashkenas.github.com/coffee-script/" target="_blank" title="Coffeescript">coffeescript</a>, <a href="http://sass-lang.com/" target="_blank" title="Sass">sass</a> and <a href="http://www.jquery.com" target="_blank" title="jQuery">jQuery</a>.</p><br>
</div><br>
<script src="libs/jquery-1.10.2.min.js"></script>
<script src="libs/jquery.mousewheel-3.0.6.min.js"></script>
<script src="dist/jquery.rondell.js"></script><script type="text/javascript">
(function() {
$("#rondellTopDemo").rondell({
preset: "carousel",
radius: {
x: 130
},
center: {
left: 200,
top: 110
},
itemProperties: {
size: {
width: 100,
height: 100
}
}
});
}).call(this);
</script>
</body>
</html>