+
+
+ jQuery SilverTrack
+
+
+
+
+
+
+ Basic
+
+
+
+ 
+
+ Trailer 1
+
+ 
+
+ Trailer 2
+
+ 
+
+ Trailer 3
+
+ 
+
+ Trailer 4
+
+ 
+
+ Trailer 5
+
+ 
+
+ Trailer 6
+
+ 
+
+ Trailer 7
+
+ 
+
+ Trailer 8
+
+ 
+
+ Trailer 9
+
+
+
+
+
+
+ Cover 1
+
+
+
+ 
+
+
+
+
+ 
+
+
+ 
+
+
+
+
+ Carly Rose Takes on Bieber
+
+
+ The X Factor unplugged the Top 6 finalists and then had them take requests from the audience. At the top: Carly Rose Sonenclair with Justin Bieber's "As Long As You Love Me."
+
+
+
+
+ 
+
+
+ 
+
+
+
+
+ 
+
+
+ 
+
+
+
+
+ 
+
+
+ 
+
+
+
+
+ 
+
+
+ 
+
+
+
+
+ 
+
+
+
+
+
+
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..85203c2
--- /dev/null
+++ b/script.js
@@ -0,0 +1,16 @@
+jQuery(function() {
+
+ $(".slider-container").each(function() {
+ var example = $(this);
+ var hasCover = example.hasClass("big") || example.hasClass("huge");
+
+ var track = example.silverTrack({cover: hasCover});
+ track.install(new SilverTrack.Navigator({
+ prev: $("a.prev", example.parent().parent()),
+ next: $("a.next", example.parent().parent())
+ }));
+
+ track.start();
+ });
+
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..289e0f1
--- /dev/null
+++ b/style.css
@@ -0,0 +1,217 @@
+body {
+ margin: 0;
+ padding: 0;
+}
+
+h2 {
+ padding: 0;
+ margin: 0 0 10px 0;
+}
+
+.head {
+ padding: 30px 0;
+ width: 960px;
+ margin: auto;
+}
+
+.head h1 {
+ font-weight: 200;
+ font-family: Helvetica,Arial,Verdana,sans-serif;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
+ text-transform: uppercase;
+ color: #999;
+}
+
+.track {
+ width: 100%;
+ position: relative;
+}
+
+.view-port {
+ width: 946px;
+ overflow: hidden;
+ margin: auto;
+ margin-bottom: 30px;
+
+ background: #F1F1F1;
+ padding: 10px;
+ border-radius: 4px;
+}
+
+.view-port h2 {
+ font-weight: 200;
+ font-family: Helvetica,Arial,Verdana,sans-serif;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
+ text-transform: uppercase;
+ color: #999;
+}
+
+.view-port h2:hover {
+ color: #6A3;
+}
+
+.track a.prev, .track a.next {
+ display: block;
+ position: absolute;
+ top: 50%;
+ margin-top: -32px;
+ width: 64px;
+ height: 64px;
+ background: url("img/arrows.png");
+ background-repeat: no-repeat;
+}
+
+.track a.prev.disabled, .track a.next.disabled {
+ display: none;
+}
+
+.track a.prev {
+ left: 0;
+ background-position: 0 0;
+}
+
+.track a.prev:hover {
+ background-position: 0 -66px;
+}
+
+.track a.prev:active {
+ background-position: 0 -132px;
+}
+
+.track a.next {
+ right: 0;
+ background-position: -64px 0;
+}
+
+.track a.next:hover {
+ background-position: -64px -132px;
+}
+
+.track a.next:active {
+ background-position: -64px -198px;
+}
+
+.slider-container {
+ position: relative;
+ margin: 0;
+ padding: 0;
+
+ height: 150px;
+}
+
+.slider-container.big {
+ height: 288px;
+}
+
+.slider-container.huge {
+ height: 432px;
+}
+
+.slider-container .item {
+ position: absolute;
+
+ width: 224px;
+ height: 150px;
+
+ margin-right: 16px;
+ margin-bottom: 16px;
+}
+
+.slider-container .item img {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ border: 2px solid white;
+}
+
+.slider-container.big .item,
+.slider-container.big .item .img-area {
+ height: 288px;
+}
+
+.slider-contaiber.huge .item {
+ margin-bottom: 12px;
+}
+
+.slider-container .item p {
+ padding: 0;
+ margin: 0;
+}
+
+.slider-container .item.cover {
+ width: 940px;
+}
+
+.slider-container .item.cover-2 {
+ height: 432px;
+}
+
+.slider-container .item.cover img {
+ float: left;
+}
+
+.slider-container .item.cover-2 img {
+ float: none;
+}
+
+.slider-container .item.cover .img-area {
+ float: right;
+ margin-left: 16px;
+}
+
+.slider-container .item.cover-2 .img-area {
+ float: none;
+ margin-left: 0;
+ margin-top: 12px;
+}
+
+.slider-container .item.cover-2 .img-area .img-block:first-child {
+ margin-right: 14px;
+}
+
+.slider-container .item.cover .img-block {
+ height: 128px;
+}
+
+.slider-container .item.cover-2 .img-block {
+ float: left;
+}
+
+.img-block {
+ margin-bottom: 16px;
+}
+
+.editorial {
+ float: right;
+ width: 200px;
+
+ padding-right: 20px;
+ height: 272px;
+ background: white;
+}
+
+.editorial .title {
+ font-size: 24px;
+ margin: 20px 0 0 20px;
+}
+
+.editorial .desc {
+ font-size: 14px;
+ line-height: 18px;
+ padding-top: 8px;
+ margin-left: 20px;
+}
+
+.side-a, .side-b {
+ float: left;
+ width: 462px;
+}
+
+.side-a {
+ margin-right: 16px;
+}
+
+.side-a > img, .side-b > img {
+ width: 462px;
+ height: 272px;
+}
From 320220e40e3d335fdb6f137909f6b3999210e815 Mon Sep 17 00:00:00 2001
From: tulios
+
+
+ Cover 2
+
+
+
+
+
+ 
+
+
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+
+
+ 
+
+
+ 
+
+
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+
+
+ 
+
+
+ 
+
+
+ 
+
+ jQuery SilverTrack
Basic
Trailer 9
+ + +
diff --git a/script.js b/script.js
index 85203c2..b2bb7da 100644
--- a/script.js
+++ b/script.js
@@ -11,6 +11,11 @@ jQuery(function() {
}));
track.start();
+
+ $("a.reload", example.parent()).click(function(e) {
+ e.preventDefault();
+ track.restart();
+ });
});
});
diff --git a/style.css b/style.css
index 26a19a6..1c96583 100644
--- a/style.css
+++ b/style.css
@@ -38,6 +38,10 @@ h2 {
color: #999;
}
+.actions {
+ margin-top: 10px;
+}
+
.track {
width: 100%;
position: relative;
From 7287f7073e48d0585a5df58f8448bda4554ba648 Mon Sep 17 00:00:00 2001
From: tulios
Date: Sat, 15 Dec 2012 01:21:09 -0200
Subject: [PATCH 05/34] updating example page
---
script.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/script.js b/script.js
index b2bb7da..0d894a7 100644
--- a/script.js
+++ b/script.js
@@ -5,7 +5,7 @@ jQuery(function() {
var hasCover = example.hasClass("big") || example.hasClass("huge");
var track = example.silverTrack({cover: hasCover});
- track.install(new SilverTrack.Navigator({
+ track.install(new SilverTrack.Plugins.Navigator({
prev: $("a.prev", example.parent().parent()),
next: $("a.next", example.parent().parent())
}));
From a340dd84a07db2dd138c48fe949fbe8d46962321 Mon Sep 17 00:00:00 2001
From: tulios
Date: Tue, 18 Dec 2012 23:43:31 -0200
Subject: [PATCH 06/34] updating gh-pages
---
index.html | 4 ++++
script.js | 4 ++++
style.css | 29 +++++++++++++++++++++++++++++
3 files changed, 37 insertions(+)
diff --git a/index.html b/index.html
index 40c46b3..97d48cf 100644
--- a/index.html
+++ b/index.html
@@ -11,6 +11,7 @@
+
@@ -63,6 +64,7 @@
+
@@ -134,6 +136,7 @@ Basic
Trailer 9
Cover 1
+ @@ -239,6 +242,7 @@Cover 2
+ diff --git a/script.js b/script.js index 0d894a7..3b320d4 100644 --- a/script.js +++ b/script.js @@ -10,6 +10,10 @@ jQuery(function() { next: $("a.next", example.parent().parent()) })); + track.install(new SilverTrack.Plugins.BulletNavigator({ + container: $(".bullet-pagination", example.parent().parent()) + })); + track.start(); $("a.reload", example.parent()).click(function(e) { diff --git a/style.css b/style.css index 1c96583..19fbdee 100644 --- a/style.css +++ b/style.css @@ -235,3 +235,32 @@ h2 { width: 462px; height: 272px; } + +.bullet-pagination { + width: 100%; + text-align: center; + margin-top: 15px; +} + +.bullet { + display: inline-block; + background: #999; + padding: 4px; + border-radius: 6px; + margin-right: 5px; + opacity: 0.4; + + -webkit-transition: opacity 0.5s linear; + -moz-transition: opacity 0.5s linear; + -ms-transition: opacity 0.5s linear; + -o-transition: opacity 0.5s linear; + transition: opacity 0.5s linear; +} + +.bullet.active { + opacity: 1; +} + +.bullet:last-child { + margin-right: 0; +} From e9d5d9a0120192305d77648053b31fd22b74e685 Mon Sep 17 00:00:00 2001 From: tuliosjQuery SilverTrack
+ ++ This is a example page, for full documentation and details, see + The Github README file +
@@ -253,5 +262,20 @@
+
+