Skip to content

Commit d36b3f4

Browse files
author
Chris Coyier
committed
first commit
0 parents  commit d36b3f4

18 files changed

+732
-0
lines changed

‎README.markdown

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
### Usage
2+
3+
$("#anything).circulate({
4+
5+
speed: 400, // Speed of each quarter segment of animation, 1000 = 1 second
6+
height: 200, // Distance vertically to travel
7+
width: 200, // Distance horizontally to travel
8+
sizeAdjustment: 100, // Percentage to grow or shrink
9+
loop: false, // Circulate continuously
10+
zIndexValues: [1, 1, 1, 1] // Sets z-index value at each stop of animation
11+
12+
});
13+
14+
### Keyboard Navigation
15+
16+
There is a file in the /js/ folder called `slider-noplugin-withkeyboard.js` which is the original non-plugin
17+
version of this. It's not as easy to have multiple sliders on the page this way, but it does include
18+
keyboard navigation. If anyone feels like working on this, moving the keyboard nav into the plugin would
19+
be awesome.

‎css/style.css

+111
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
6+
body {
7+
font: 11px Helvetica, Arial, sans-serif;
8+
}
9+
10+
#wrapper {
11+
width: 800px;
12+
margin: 25px auto;
13+
}
14+
15+
#intro {
16+
padding-bottom: 10px;
17+
}
18+
19+
.slider {
20+
width: 800px;
21+
margin: 0 auto;
22+
position: relative;
23+
border: 10px solid #ccc;
24+
}
25+
26+
.scroll {
27+
overflow: hidden;
28+
width: 800px;
29+
margin: 0 auto;
30+
position: relative;
31+
}
32+
33+
.scrollContainer {
34+
position: relative;
35+
}
36+
37+
.scrollContainer div.panel {
38+
padding: 10px;
39+
width: 274px;
40+
height: 318px;
41+
}
42+
43+
.left-shadow {
44+
position: absolute;
45+
top: 0;
46+
left: 0;
47+
width: 12px;
48+
bottom: 0;
49+
background: url(../images/leftshadow.png) repeat-y;
50+
}
51+
52+
.right-shadow {
53+
position: absolute;
54+
top: 0;
55+
right: 0;
56+
width: 12px;
57+
bottom: 0;
58+
background: url(../images/rightshadow.png) repeat-y;
59+
}
60+
61+
.inside {
62+
padding: 10px;
63+
border: 1px solid #999;
64+
}
65+
66+
.inside img {
67+
display: block;
68+
border: 1px solid #666;
69+
margin: 0 0 10px 0;
70+
width: 250px;
71+
}
72+
73+
.inside h2 {
74+
font-weight: normal;
75+
color: #111;
76+
font-size: 16px;
77+
margin: 0 0 8px 0;
78+
}
79+
80+
.inside p {
81+
font-size: 11px;
82+
color: #ccc;
83+
}
84+
85+
a {
86+
color: #999;
87+
text-decoration: none;
88+
border-bottom: 1px dotted #ccc;
89+
}
90+
91+
a:hover {
92+
border-bottom: 1px solid #999;
93+
}
94+
95+
.scrollButtons {
96+
position: absolute;
97+
top: 127px;
98+
cursor: pointer;
99+
}
100+
101+
.scrollButtons.left {
102+
left: -45px;
103+
}
104+
105+
.scrollButtons.right {
106+
right: -45px;
107+
}
108+
109+
.hide {
110+
display: none;
111+
}

‎design/mockup.psd

1.18 MB
Binary file not shown.

‎images/1.jpg

31.8 KB
Loading

‎images/2.jpg

37.1 KB
Loading

‎images/3.jpg

28.1 KB
Loading

‎images/4.jpg

29.2 KB
Loading

‎images/5.jpg

31 KB
Loading

‎images/leftarrow.png

577 Bytes
Loading

‎images/leftshadow.png

153 Bytes
Loading

‎images/movingboxes.png

3.7 KB
Loading

‎images/rightarrow.png

568 Bytes
Loading

‎images/rightshadow.png

147 Bytes
Loading

‎index.html

+157
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2+
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3+
4+
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
5+
<head>
6+
<meta http-equiv="Content-type" content="text/html; charset=us-ascii" />
7+
8+
<title>Moving Boxes</title>
9+
<link type="text/css" href="css/style.css" media="screen" charset="utf-8" rel="stylesheet" />
10+
<script type="text/javascript" src="js/jquery-1.4.2.min.js" charset="utf-8"></script>
11+
<script type="text/javascript" src="js/jquery.movingboxes.min.js" charset="utf-8"></script>
12+
<script type="text/javascript">
13+
$(function(){
14+
$('.slider').movingBoxes({ startPanel: 3 });
15+
16+
// Example of how to move the panel from outside the plugin, only works on first on called.
17+
// $('.slider').data('movingBoxes').currentPanel(1); // 1 = move to first panel, blank = return current panel
18+
19+
})
20+
</script>
21+
</head>
22+
23+
<body>
24+
<div id="wrapper">
25+
<img src="images/movingboxes.png" alt="moving boxes" />
26+
27+
<!-- Slider #1 -->
28+
<div class="slider" id="slider-one">
29+
<img class="scrollButtons left" src="images/leftarrow.png" />
30+
31+
<div style="overflow: hidden;" class="scroll">
32+
<div class="scrollContainer">
33+
<div class="panel">
34+
<div class="inside">
35+
<img src="images/1.jpg" alt="picture" />
36+
37+
<h2>News Heading</h2>
38+
39+
<p>A very shot exerpt goes here... <a href="http://flickr.com/photos/justbcuz/112479862/">more link</a></p>
40+
</div>
41+
</div>
42+
43+
<div class="panel">
44+
<div class="inside">
45+
<img src="images/2.jpg" alt="picture" />
46+
47+
<h2>News Heading</h2>
48+
49+
<p>A very shot exerpt goes here... <a href="http://flickr.com/photos/joshuacraig/2698975899/">more link</a></p>
50+
</div>
51+
</div>
52+
53+
<div class="panel">
54+
<div class="inside">
55+
<img src="images/3.jpg" alt="picture" />
56+
57+
<h2>News Heading</h2>
58+
59+
<p>A very shot exerpt goes here... <a href="http://flickr.com/photos/ruudvanleeuwen/468309897/">more link</a></p>
60+
</div>
61+
</div>
62+
63+
<div class="panel">
64+
<div class="inside">
65+
<img src="images/4.jpg" alt="picture" />
66+
67+
<h2>News Heading</h2>
68+
69+
<p>A very shot exerpt goes here... <a href="http://flickr.com/photos/emikohime/294092478/">more link</a></p>
70+
</div>
71+
</div>
72+
73+
<div class="panel">
74+
<div class="inside">
75+
<img src="images/5.jpg" alt="picture" />
76+
77+
<h2>News Heading</h2>
78+
79+
<p>A very shot exerpt goes here... <a href="http://flickr.com/photos/fensterbme/499006584/">more link</a></p>
80+
</div>
81+
</div>
82+
</div>
83+
84+
<div class="left-shadow"></div>
85+
86+
<div class="right-shadow"></div>
87+
</div><img class="scrollButtons right" src="images/rightarrow.png" />
88+
</div>
89+
90+
<br><br><br>
91+
92+
<!-- Slider #2 (images of slider #1 reversed) -->
93+
<div class="slider" id="slider-two">
94+
<img class="scrollButtons left" src="images/leftarrow.png" />
95+
96+
<div style="overflow: hidden;" class="scroll">
97+
<div class="scrollContainer">
98+
<div class="panel">
99+
<div class="inside">
100+
<img src="images/5.jpg" alt="picture" />
101+
102+
<h2>News Heading</h2>
103+
104+
<p>A very shot exerpt goes here... <a href="http://flickr.com/photos/justbcuz/112479862/">more link</a></p>
105+
</div>
106+
</div>
107+
108+
<div class="panel">
109+
<div class="inside">
110+
<img src="images/4.jpg" alt="picture" />
111+
112+
<h2>News Heading</h2>
113+
114+
<p>A very shot exerpt goes here... <a href="http://flickr.com/photos/joshuacraig/2698975899/">more link</a></p>
115+
</div>
116+
</div>
117+
118+
<div class="panel">
119+
<div class="inside">
120+
<img src="images/3.jpg" alt="picture" />
121+
122+
<h2>News Heading</h2>
123+
124+
<p>A very shot exerpt goes here... <a href="http://flickr.com/photos/ruudvanleeuwen/468309897/">more link</a></p>
125+
</div>
126+
</div>
127+
128+
<div class="panel">
129+
<div class="inside">
130+
<img src="images/2.jpg" alt="picture" />
131+
132+
<h2>News Heading</h2>
133+
134+
<p>A very shot exerpt goes here... <a href="http://flickr.com/photos/emikohime/294092478/">more link</a></p>
135+
</div>
136+
</div>
137+
138+
<div class="panel">
139+
<div class="inside">
140+
<img src="images/1.jpg" alt="picture" />
141+
142+
<h2>News Heading</h2>
143+
144+
<p>A very shot exerpt goes here... <a href="http://flickr.com/photos/fensterbme/499006584/">more link</a></p>
145+
</div>
146+
</div>
147+
</div>
148+
149+
<div class="left-shadow"></div>
150+
151+
<div class="right-shadow"></div>
152+
</div><img class="scrollButtons right" src="images/rightarrow.png" />
153+
</div>
154+
155+
</div>
156+
</body>
157+
</html>

0 commit comments

Comments
 (0)