Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 95 lines (66 sloc) 3.529 kb
2740237 @tjvantoll Listing the methods in the docs
authored
1 # PictureCube
2
9bf3749 @tjvantoll Removing duplicate documentation
authored
3 Create a 3D interactive cube with an image on all 6 sides. For a full explanation of the creation of this file and a full demo of all of the functionality see http://tjvantoll.com/2012/02/27/Making-a-3D-Picture-Cube-with-CSS3/. [All browsers that support CSS 3D transforms](http://caniuse.com/#feat=transforms3d) are supported.
2740237 @tjvantoll Listing the methods in the docs
authored
4
5 ## Usage
6
f37d7d1 @tjvantoll Adding the js and css files in the docs
authored
7 Include the CSS and JS files.
8
318ff9b @tjvantoll Updating the cube to allow title attributes on the <img /> tags and supp...
authored
9 <link rel="stylesheet" href="/PictureCube.css" />
10 <script src="/PictureCube.js"></script>
11
12 Call the constructor anytime after the appropriate DOM node that will contain the cube has been created.
13
14 * node `String`: The DOM node or the `id` of the DOM node to turn into the PictureCube.
15 * images `Array`: An array of `Object`s. Each `Object` should have `src` and `id` attributes which will applied to the `<img />` tags created.
16 * options `Object`: An optional set of options to configure the cube. Right now only an `onchange` event is available.
17
18 Example:
19
20 <div id="cube"></div>
21
22 <script>
23 var cube = new PictureCube('cube',
24 [
25 { src: '1.jpg', title: 'Picture 1' },
26 { src: '2.jpg', title: 'Picture 2' },
27 { src: '3.jpg', title: 'Picture 3' },
28 { src: '4.jpg', title: 'Picture 4' },
29 { src: '5.jpg', title: 'Picture 5' },
30 { src: '6.jpg', title: 'Picture 6' }
31 ],
32 {
33 onchange: function(number, image, cube) {
34 console.log('Side # ' + number + ' is now showing');
35 }
36 }
37 );
38 </script>
39
40
8a5fbee @tjvantoll adding information about Modernizr feature detection and an updated link...
authored
41 Since PictureCube depends on CSS 3D transforms, you can use [Modernizr](http://modernizr.com) to detect support...
42
318ff9b @tjvantoll Updating the cube to allow title attributes on the <img /> tags and supp...
authored
43 if (Modernizr.csstransforms3d) {
44 new PictureCube('', []);
45 }
46
097ce59 @tjvantoll missed an ellipsis
authored
47 ...but there's really no harm in calling PictureCube blindly. Browsers that don't support 3D transforms will just get a box with the first image in the array passed in.
318ff9b @tjvantoll Updating the cube to allow title attributes on the <img /> tags and supp...
authored
48
2740237 @tjvantoll Listing the methods in the docs
authored
49 ## Methods
50
51 goto - Go to a particular side of the cube using a 3D transformation.
52
318ff9b @tjvantoll Updating the cube to allow title attributes on the <img /> tags and supp...
authored
53 /**
54 * @param side {number} The number of the side to change the cube to (1 - 6).
55 */
56 cube.goto(2);
57
2740237 @tjvantoll Listing the methods in the docs
authored
58 cycle - Create an interval to cycle through the sides of the cube.
59
318ff9b @tjvantoll Updating the cube to allow title attributes on the <img /> tags and supp...
authored
60 /**
61 * @param interval {number} The number of milliseconds between each image transition
62 */
63 cube.cycle(2000);
64
2740237 @tjvantoll Listing the methods in the docs
authored
65 clearCycle - Clear the interval created by cycle.
66
318ff9b @tjvantoll Updating the cube to allow title attributes on the <img /> tags and supp...
authored
67 cube.clearCycle();
68
69 ## Events
70
71 #### onchange
72
73 If you pass an `onchange` `function` to the constructor it will be invoked everytime the side of the cube displaying changes. The `function` will be passed the following parameters.
74
75 * number `Number`: The side number displaying (1 - 6).
76 * image `DOMNode`: The `<img />` tag currently displaying.
77 * cube `PictureCube`: A reference to the `PictureCube` instance.
2740237 @tjvantoll Listing the methods in the docs
authored
78
79 ## Extendable
80
81 The following technique can be used to extend PictureCube. This example creates an AwesomeCube that inherits the base methods from PictureCube's prototype.
82
318ff9b @tjvantoll Updating the cube to allow title attributes on the <img /> tags and supp...
authored
83 AwesomeCube = function(node, images) {
84 PictureCube.apply(this, [node, images]);
85 };
86 AwesomeCube.prototype = new PictureCube();
87 AwesomeCube.prototype.newMethod = function() {
88 //this.cube, this.images, this.goto, this.cycle
89 //and this.clearCycle are available to the new
90 //function.
91 };
2740237 @tjvantoll Listing the methods in the docs
authored
92
93 ## Limitations
94
95 Currently the cube will be 100px x 100px and will resize the images provided to be the same size. Look for the size to be configurable in a future update.
Something went wrong with that request. Please try again.