Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 97 lines (51 sloc) 5.283 kB
0839c42 @addyosmani updating project gpl lic
authored
1 This project is copyright AddyOsmani.com 2010 with portions copyright
2 RadMenu. Released under the GPL for public use.
3
82d7454 @addyosmani readme formatting
authored
4 For further information about this plugin, please see AddyOsmani.com :)
5
08d673d @addyosmani readme formatting
authored
6 jQuery Roundrr
7 -----------------------------
82d7454 @addyosmani readme formatting
authored
8
08d673d @addyosmani readme formatting
authored
9 Roundrr is a plugin for plotting interactive image or multimedia content around a circle. It is based on RadMenu with an extended model for events occurring in the pre and post animation phases. It also contains further configuration for automated playback of a wheel of content and support for 'pick' interfaces which allow you to perform an action when an object falls between two other objects of fixed known position.
a64a685 @addyosmani adding documentation
authored
10
11
12 Usage
13 -----------------------------
14 As Roundrr supports quite an extensive collection of configuration parameters, I recommend taking a look at the source code to any of the demos for an example of how best to use it. This is often found in the /scripts/ui/app.js file.
15
16 Roundrr requires initialisation as follows:
17
18 jQuery("#roundrr_container").roundrrwheel({});
19
20 however, to get the most of it, I do recommend configuring as many of the options as possible to complete the level of user interaction you wish to provide.
21
22
23 Configuration
24 -----------------------------
25
26 Roundrr is highly customisable and if you intend on using more images with it than are displayed in the demos, I recommend checking out demo1 as this uses the 'standard' mode. This is ideal for image galleries.
27
28 The parameters for configuring Roundrr are as follows:
29
30 mode: can be either 'standard' or 'pick'. Standard mode allows you to include as many images as you would like in the wheel/circle whilst 'pick' mode is ideal if you want to use the user interface idea presented in the main index.html file. 'pick' mode tests against the elements beside an element to establish what element a user wishes to 'focus' in on.
31
32 autoplay: autoplay controls whether the wheel/circle plays automatically when the page finishes loading. It can either be set to true or false.
33
34 autoplayDirection: supports either 'clockwise' or 'anticlockwise'. This is the direction in which the autoplay will move when you have autoplay enabled.
35
36 autoplayDuration: This is the amount of time (in seconds) which Roundrr will wait before spinning to the next element.
37
38 centerClass: centerClass is the CSS class of the markup which will contain the central images used in Roundrr. You do not have to use a centralImage at all and if you wish to keep this area blank, you may comment out the line jQuery('.' + o.centerClass).wrapInner() in the Roundrr init function.
39
40 listClass: This is the CSS class of the UL element containing the list of items to be plotted
41
42 itemClass: This is the CSS class of the items in listClass to be plotted.
43
44 activeItemClass: The CSS class of the current active item. Note that 'pick' mode handles this manually through external jQuery code.
45
46 show(): Show items in Roundrr
47
48 hide(): Hide items (may be overridden)
49
50 next(): Moves Roundrr clockwise to the next element
51
52 prev(): Moves Roundrr anticlockwise to the previous element
53
54 onSelect: A function executed when an item has been selected
55
56 onImageFocus: A function executed when an image has appeared under the pick when in 'pick' mode
57
58 onImageBlur: A function that gets executed when an image is not under the pick when in 'pick' mode
59
60 onNextBegin: A function that gets executed before a .next() event is called on Roundrr.
61
62 onPrevBegin: A function that gets executed before a .prev() event is called on Roundrr.
63
64 radius: An integer representing the radius of the circle around which images are being plotted
65
66 animationEffect: Roundrr (as per RadMenu) supports internal animation effects. 1 = no effect. 5 = subtle shift, 10 = fireworks effect, 15 = subtle animation variation.
67
68 angleOffset: An integer representing the angle offset of the circle being plotted
69
70 centerX: An integer representing the X center of the circle
71
72 centerY: An integer representing the Y center of the circle
73
74 animSpeed: An integer representing the speed of the animation in Roundrr
75
76 onAnimationComplete: A function that gets executed once the animation has completed (eg. when next() or prev()) have been called
77
78 onShow: A function that gets executed when items are shown on the screen
79
80 OnHide: A function that gets executed when items are hidden on the screen.
81
82 Advanced
83 -------------------------------
84
85 requiredLeftA: ('pick' mode) A px string defining the necessary n-1's image's position (left) in order to further configure the 'pick' mode.
86
87 requiredTopA:('pick' mode) A px string defining the necessary n-1's image's position (top) in order to further configure the 'pick' mode.
88
89 requiredLeftB:('pick' mode) A px string defining the necessary n+1's image's position (left) in order to further configure the 'pick' mode.
90
91 requiredTopB:('pick' mode) A px string defining the necessary n+1's image's position (top) in order to further configure the 'pick' mode.
92
8c3f8f2 @addyosmani adding user-requested autoplay example
authored
93
94 Basic Rendering Tests
95 -------------------------------
96
97 Roundrr works consistently in all current major browsers and if you would like to take a look at examples of how it renders, see here: http://browsershots.org/http://addyosmani.com/resources/roundrr/
Something went wrong with that request. Please try again.