forked from cheeaun/the-sexy-curls-jquery-plugin
/
INSTALLATION.TXT
48 lines (35 loc) · 1.45 KB
/
INSTALLATION.TXT
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
Okay, so you want a sexy page turn like @elliottkember?
This is your chance.
Copy everything in this repository into the /turn/ folder in your public directory.
Now, in your HTML, insert an object like this:
<img id="target" src="turn/code.png">
↑
Take note, it has an ID. This is useful. The object does not have to be an image, but images look awesome.
For instance, I use a screenshot of my site's HTML code.
Then, in your HTML <head>, put:
<script type="text/javascript" src="turn/turn.js"></script>
<link rel="stylesheet" type="text/css" href="turn/turn.css">
<script type="text/javascript">
$(document).ready(function(){
$( '#target' ).fold({});
});
</script>
And your site should be awesome too.
Now, if you're a clever clogs and look at the code, you'll find this:
// Default awesomeness
var defaults = {
directory: 'turn', // The directory we're in
side: 'left', // change me to "right" if you want rightness
turnImage: 'fold.png', // The triangle-shaped fold image
maxHeight: 400, // The maximum height. Duh.
starting_width: 80, // The height and width
starting_height: 80 // with which to start
};
These are the default values, and you can specify them as you see fit in your HTML.
For instance, if you went like this:
$(document).ready(function(){
$( '#target' ).fold({
side: 'right' // Right! Whoa!
});
});
You'd get the page turning from the top-right... and that'd be awesome.