Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Added with_animations

  • Loading branch information...
commit 14709f04aae53d30ac0f2ec064203e56677db0f7 1 parent 26a5ff4
Thiago Silva Ferreira authored
57 css/skitter.styles.css
View
@@ -1,59 +1,72 @@
/* =Skitter styles
----------------------------------------------- */
.box_skitter {position:relative;width:800px;height:300px;background:#000;}
+.box_skitter img { max-width:none; } /* Tip for stildv */
.box_skitter ul {display:none;}
.box_skitter .container_skitter {overflow:hidden;position:relative;}
.box_skitter .image {overflow:hidden;}
.box_skitter .image img {display:none;}
+/* =Box clone
+-------------------------------------------------------------- */
.box_skitter .box_clone {position:absolute;top:0;left:0;width:100px;overflow:hidden;display:none;z-index:20;}
.box_skitter .box_clone img {position:absolute;top:0;left:0;z-index:20;}
+/* =Navigation
+-------------------------------------------------------------- */
.box_skitter .prev_button {position:absolute;top:50%;left:35px;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(../images/prev.png) no-repeat left top;}
.box_skitter .next_button {position:absolute;top:50%;right:35px;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(../images/next.png) no-repeat left top;}
+/* =Numbers
+-------------------------------------------------------------- */
.box_skitter .info_slide {position:absolute;top:15px;left:15px;z-index:100;background:#000;color:#fff;font:bold 11px arial;padding:5px 0 5px 5px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;opacity:0.75;}
.box_skitter .info_slide .image_number {background:#333;float:left;padding:2px 10px;margin:0 5px 0 0;cursor:pointer;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;}
.box_skitter .info_slide .image_number_select {background:#cc0000;float:left;padding:2px 10px;margin:0 5px 0 0;}
-.box_skitter .container_thumbs {position:relative;overflow:hidden;height:50px;}
-.box_skitter .info_slide_thumb {-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;overflow:hidden;height:45px;top:auto;bottom:-5px;left:-5px;padding:5px;opacity:1.0;}
-.box_skitter .info_slide_thumb .image_number {overflow:hidden;width:70px;height:40px;position:relative;}
-.box_skitter .info_slide_thumb .image_number img {position:absolute;top:-50px;left:-50px}
-
-.box_skitter .box_scroll_thumbs {padding:0 10px;}
-.box_skitter .box_scroll_thumbs .scroll_thumbs {position:absolute;bottom:60px;left:50px;background:#ccc;background:-moz-linear-gradient(-90deg, #555, #fff);background:-webkit-gradient(linear, left top, left bottom, from(#555), to(#fff));width:200px;height:10px;overflow:hidden;text-indent:-9999em;z-index:101;-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;cursor:pointer;border:1px solid #333;}
+/* =Thumbs
+ Change width and height to customization dimension thumb
+-------------------------------------------------------------- */
+.box_skitter .container_thumbs { position:relative;overflow:hidden;height:50px; }
+.box_skitter .info_slide_thumb { height:50px;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;overflow:hidden;top:auto;top:0;left:0;padding:0 !important;opacity:1.0; }
+.box_skitter .info_slide_thumb .image_number { overflow:hidden;width:100px;height:50px;position:relative;margin:0 !important; padding:0 !important; -moz-border-radius:0 !important;-webkit-border-radius:0 !important;border-radius:0 !important;}
+.box_skitter .info_slide_thumb .image_number img { position:absolute;top:-30px;left:-30px;height:100px;}
+.box_skitter .box_scroll_thumbs { padding:0; }
+.box_skitter .box_scroll_thumbs .scroll_thumbs { position:absolute;bottom:60px;left:50px;background:#ccc;background:-moz-linear-gradient(-90deg, #555, #fff);background:-webkit-gradient(linear, left top, left bottom, from(#555), to(#fff));width:200px;height:10px;overflow:hidden;text-indent:-9999em;z-index:101; cursor:pointer;border:0px solid #333; }
+/* =Dots
+-------------------------------------------------------------- */
.box_skitter .info_slide_dots {position:absolute;bottom:-40px;z-index:151;padding:5px 0 5px 5px;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;}
.box_skitter .info_slide_dots .image_number {background:#333;float:left;margin:0 5px 0 0;cursor:pointer;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;width:18px;height:18px;text-indent:-9999em;overflow:hidden;}
.box_skitter .info_slide_dots .image_number_select {background:#cc0000;float:left;margin:0 5px 0 0;}
-.box_skitter .label_skitter {z-index:150;position:absolute;bottom:0px;left:0px;display:none;}
-
+/* =Loading
+-------------------------------------------------------------- */
.loading {position:absolute; top:50%; right:50%; z-index:10000; margin:-16px -16px;color:#fff;text-indent:-9999em;overflow:hidden;background:url(../images/ajax-loader.gif) no-repeat left top;width:32px;height:32px;}
-.label_skitter {z-index:150;position:absolute;bottom:0px;left:0px;color:#fff;display:none;opacity:0.8;background:#000;}
-.label_skitter p {padding:10px;margin:0;font:normal 22px arial,tahoma;letter-spacing:-1px;}
-.info_slide * {font-family:Consolas,arial,tahoma !important;}
-
-.box_skitter .progressbar { background:#000; position:absolute; top:5px;left:15px;height:5px; width: 200px; z-index:99; border-radius:20px; }
+/* =Label
+-------------------------------------------------------------- */
+.box_skitter .label_skitter { z-index:150;position:absolute;bottom:0px;left:0px;display:none; }
+.box_skitter .label_skitter { z-index:150;position:absolute;bottom:0px;left:0px;color:#fff;display:none;opacity:0.8;background:#000; }
+.box_skitter .label_skitter p { padding:10px;margin:0;font:normal 22px arial,tahoma;letter-spacing:-1px; }
+.box_skitter .info_slide * { font-family:Consolas,arial,tahoma !important; }
+.box_skitter .progressbar { background:#000; position:absolute; top:5px;left:15px;height:5px; width: 200px; z-index:99; border-radius:20px; }
/* =Preview slide
------------------------------------------------ */
-#preview_slide { display:none; position:absolute; z-index:152; bottom:30px; left:-40px; width:100px; height:100px; background:#fff; border:1px solid #222; -moz-box-shadow:rgba(0,0,0,0.7) 2px 2px 5px; -webkit-box-shadow:rgba(0,0,0,0.7) 2px 2px 5px; box-shadow:rgba(0,0,0,0.7) 2px 2px 5px; overflow:hidden; }
-#preview_slide ul { height:100px; overflow:hidden; margin:0; list-style:none; display:block; position:absolute; top:0; left:0; }
-#preview_slide ul li { width:100px; height:100px; overflow:hidden; float:left; margin:0; padding:0; position:relative; display:block; }
-#preview_slide ul li img { position:absolute; top:0; left:0; height:150px; width:auto; }
+-------------------------------------------------------------- */
+.box_skitter .preview_slide { display:none; position:absolute; z-index:152; bottom:30px; left:-40px; width:100px; height:100px; background:#fff; border:1px solid #222; -moz-box-shadow:rgba(0,0,0,0.7) 2px 2px 5px; -webkit-box-shadow:rgba(0,0,0,0.7) 2px 2px 5px; box-shadow:rgba(0,0,0,0.7) 2px 2px 5px; overflow:hidden; }
+.box_skitter .preview_slide ul { height:100px; overflow:hidden; margin:0; list-style:none; display:block; position:absolute; top:0; left:0; }
+.box_skitter .preview_slide ul li { width:100px; height:100px; overflow:hidden; float:left; margin:0; padding:0; position:relative; display:block; }
+.box_skitter .preview_slide ul li img { position:absolute; top:0; left:0; height:150px; width:auto; }
/* =Focus
------------------------------------------------ */
+-------------------------------------------------------------- */
#overlay_skitter { position:absolute; top:0; left:0; width:100%; z-index:9998; opacity:1; background:#000; }
.box_skitter .focus_button {position:absolute;top:50%;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(../images/focus-button.png) no-repeat left top;opacity:0;}
.box_skitter .play_pause_button {position:absolute;top:50%;z-index:151;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(../images/pause-button.png) no-repeat left top;opacity:0;}
.box_skitter .play_pause_button.play_button {background:url(../images/play-button.png) no-repeat left top;}
-/* =Example for dimenions:
------------------------------------------------ */
+/* =Example for dimenions
+-------------------------------------------------------------- */
.box_skitter_large {width:800px;height:300px;}
.box_skitter_small {width:200px;height:100px;}
267 css/styles.css
View
@@ -1,112 +1,161 @@
-/** Global
- ********************************************************** */
-* {font-family:'Rosario',consolas, deja vu, arial, tahoma;margin:0;border:0;padding:0;}
-body {margin:20px;background:url(../images/background.gif) repeat top right #e1e1e1;}
-a {outline:none;color:#004488;}
-a img, img {border:0}
-
-p {margin:0 0 10px 0;letter-spacing:-1px;font-size:14px;}
-h2 {letter-spacing:-2px;margin:15px 0 10px 0;color:#333;font-weight:normal;}
-
-/** Page
- ********************************************************** */
-#page {background:url(../images/this-is-a-free-plugin.png) no-repeat top right;min-width:1050px;}
-
-/** Header
- ********************************************************** */
-#header {float:left;width:100%;}
-#header h1 {margin:0 0 10px 0;letter-spacing:2px;text-decoration:underline;
-background:url(../images/logo.png) no-repeat left top;width:320px;height:105px;overflow:hidden;text-indent:-9999em;margin-left:-15px;float:left;}
-#header h1 a {width:320px;height:105px;overflow:hidden;text-indent:-9999em;float:left;}
-#header p {font-weight:bold;font-size:30px;float:left;padding:23px ;letter-spacing:0;font-family:'Gloria Hallelujah';}
-
-/** Content
- ********************************************************** */
-#content {float:left;width:100%;}
-
-.border_box {background:#000;padding:1px;
- box-shadow:#000 0 0 5px;
- -o-box-shadow:#000 0 0 5px;
- -moz-box-shadow:#000 0 0 5px;
- -webkit-box-shadow:#000 0 0 5px;
- margin:0 0 10px 0;
- width:800px;
- height:300px;
-}
+* { margin:0; padding:0; list-style:none; }
+
+body { background:url(../images/bg-page.png) repeat left top; font-family:'Mako',arial,tahoma; }
+
+a, a img { border:none; outline:none; color:#004499; }
+
+.content-width { width:980px; margin:0 auto; }
+.clear { clear:both; }
+
+#page { background:url(../images/bg-header-repeat.png) repeat-x left top; margin-bottom:50px; }
-#examples {background:#fff;padding:5px;border:1px solid #999;}
-#examples h2 {margin:0 0 5px 0;font-weight:bold;font-size:20px;letter-spacing:-1px;background:#eee;padding:5px;color:#003366;}
-#examples h3 {float:left;width:120px;height:90px;margin:0 0 0 5px;font-weight:normal;font-size:16px;color:#993300;letter-spacing:-1px;}
-
-#cube {background:url(../images/thumb-1.gif) no-repeat left bottom;}
-#tube {background:url(../images/thumb-2.gif) no-repeat left bottom;}
-#block {background:url(../images/thumb-3.gif) no-repeat left bottom;}
-#cubeStop {background:url(../images/thumb-4.gif) no-repeat left bottom;}
-#cubeHide {background:url(../images/thumb-5.gif) no-repeat left bottom;}
-#cubeSize {background:url(../images/thumb-6.gif) no-repeat left bottom;}
-#horizontal {background:url(../images/thumb-7.gif) no-repeat left bottom;}
-
-#skitter_fixed {position:fixed;right:20px;top:20px;padding:5px;background:#000;z-index:1000;color:#fff;}
-
-#download {margin:10px 0 20px 0;height:55px;}
-#botao_download {float:left;margin:0 20px 0 -6px;}
-#botao_wp {float:left;margin:0 20px 0 -6px;}
-#botao_helper {float:left;margin:0 20px 0 -6px;}
-#donate {float:left;}
-
-#options h3 {font-weight:bold;font-size:26px;color:#000;}
-#options dt {font-weight:bold;font-size:18px;border-bottom:1px dashed #333;margin:10px 0 5px 0;color:#004499;}
-#options dd {font-size:12px;padding:0 0 0 10px;margin:0 0 4px 0;}
-#options dd.description {font-size:14px;}
-#options dd.default {color:#555;font-style:italic;padding:0 0 0 20px;}
-#options dd.example {color:#cc0000;padding:0 0 0 20px;}
-#options dd.example span {border:1px solid #003300;background:#007744;color:#fff;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;padding:1px 5px;}
-
-#options table {width:100%;border-collapse:collapse;border:1px solid #333;margin:20px 0;}
-#options table th {background:#333;color:#fff;padding:10px;text-align:left;}
-#options table th:nth-child(2n) { background:#222; }
-#options table td {padding:5px;background:#fff;font-size:14px;}
-#options table tr:nth-child(2n) td { background:#ddd; }
-#options table td:nth-child(3) {font-style:italic;color:#555;}
-#options table td span.code {color:#000;}
-
-#examples-animations {float:left;width:100%;margin-top:10px;}
-#examples-animations div {width:800px;}
-#examples-animations a {background:#ccc;float:left;margin:0 5px 5px 0;padding:5px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;text-decoration:none;border:1px solid #bbb;color:#000;}
-#examples-animations a:hover {position:relative;background:#aaa;border:1px solid #777;}
-#examples-animations a.selected {background:#333;color:#fff;border:1px solid #000;background:#333;text-shadow:none;}
-#examples-animations a .new_animation {font:bold 11px arial,tahoma;color:#fff;padding:2px 5px;border:1px solid #000; background:#cc0000; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; float:right;margin-left:5px;}
-
-#styles_navigation {height:100px;}
-#styles_navigation h2 {}
-#styles_navigation ul {list-style:none;}
-#styles_navigation ul li {float:left;position:relative;}
-#styles_navigation ul li a {background:#ccc;float:left;margin:0 15px 15px 0;padding:5px 15px;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;text-decoration:none;border:1px solid #bbb;color:#000;font-weight:bold;font-size:26px;letter-spacing:-2px;}
-
-#styles_navigation ul li a:hover {background:#aaa;border:1px solid #777;}
-#styles_navigation ul li a.selected {background:#333; font-weight:normal; color:#fff; border:1px solid #000; }
-
-span.new {position:absolute;top:-5px;right:-10px;font:bold 11px arial,tahoma;color:#fff;padding:2px 5px;border:1px solid #000; background:#cc0000; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; z-index:1; }
-
-span.update {position:absolute;top:-5px;right:-25px;font:bold 11px arial,tahoma;color:#fff;padding:2px 5px;border:1px solid #000; background:#006600; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
-
-#updatelog {background:#fff;padding:0 10px 10px 10px ;border-top:5px solid #333;}
-#updatelog dl dt {border-bottom:1px solid #ccc;font-weight:bold;font-size:18px;margin:10px 0 5px 0;}
-#updatelog dl dt {font-weight:normal;font-size:14px;}
-#updatelog dl dt.through {text-decoration:line-through;color:#555;}
-
-.highlight *, .code {font-family:Consolas,arial,tahoma !important;}
-
-#box_share {}
-
-#donate-banner {position:absolute;bottom:400px;left:679px;width:336px;height:310px;background:#ddd;border-radius:5px;box-shadow:#333 0 0 3px;padding:10px;
- background:-moz-linear-gradient(-90deg, #ddd, #f1f1f1);
- background:-webkit-linear-gradient(-90deg, #ddd, #f1f1f1);
+#header { height:110px; background:url(../images/bg-header.png) no-repeat center top; margin:0 auto; margin-bottom:20px; }
+#header h1 a { width:220px; height:90px; float:left; margin:0px 0 0 0; overflow:hidden; text-indent:-9999em; background:url(../images/logo.png) no-repeat center top; }
+
+#header nav { float:right; margin:30px 0 0 0; }
+#header nav a { color:#fff; padding:10px 25px; -moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px; float:left; margin:0 15px 0 0; text-decoration:none; text-shadow:#000 1px 1px 0;
+ -moz-transition:all ease-out 0.3s;
+ -webkit-transition:all ease-out 0.3s;
+ transition:all ease-out 0.3s;
+ position:relative;
+ z-index:5;
}
-#donate-banner h3 {font-size:18px;font-weight:bold;margin-bottom:5px;font-style:italic;text-shadow:#fff 1px 1px 0;}
-/** Footer
- ********************************************************** */
-#footer {clear:both;margin-top:20px;}
-#footer p {text-indent:-9999em;overflow:hidden;}
-#footer p a {background:url(../images/logo-thiago.png) no-repeat left top;width:50px;height:40px;float:right;}
+#header nav a:hover, #header nav a.active { background:#000; /*box-shadow:rgba(255,255,255,0.3) 0 0 10px;*/ }
+
+#bt-lang { width:40px; height:40px; position:absolute; overflow:hidden; text-indent:-9999em; background:url(../images/bt-lang.png) no-repeat center top; right:0; top:0; -moz-transition:opacity 0.2s; }
+#bt-lang:hover { opacity:0.7; }
+
+#box-languages { position:absolute; top:40px; right:0; background:#000; width:40px; z-index:250; -moz-border-radius:0 0 0 3px;-webkit-border-radius:0 0 0 3px;border-radius:0 0 0 3px; display:none; }
+#box-languages ul { float:left; margin-top:3px; width:40px; padding:0; }
+#box-languages ul li { float:left; margin-bottom:0px; width:40px; text-align:center; padding:0; }
+#box-languages ul li a { float:left; margin-left:4px; }
+#box-languages ul li a img { float:left; }
+
+#content {}
+
+/* =Pages
+-------------------------------------------------------------- */
+.page { display:none; }
+.page.active { display:block; }
+
+.page h1 { font-size:36px; margin-bottom:20px; letter-spacing:-2px; }
+.page h2 { margin-bottom:20px; color:#777; }
+.page h3 { margin-bottom:20px; color:#999; }
+
+/* =Configurations
+-------------------------------------------------------------- */
+
+#box-bts-config { position:relative; }
+
+.bt-config { background:url(../images/bt-config.png) no-repeat center top; width:120px; height:120px; text-align:center; position:relative; z-index:5; text-indent:-9999em; overflow:hidden; display:block; margin:0 auto; }
+
+#box-config { background:url(../images/bg-config.jpg) repeat left top; margin-top:-60px; padding-bottom:10px; color:#fff; float:left; width:100%; display:none; }
+
+#nav-config { float:left; margin:60px 0 20px 190px; }
+#nav-config a { float:left; padding:10px 20px; border-bottom:5px solid #333; color:#fff; text-decoration:none; text-shadow:none;
+ -moz-transition:all 0.2s;
+}
+#nav-config a:hover { text-shadow:#000 0 0 5px; border-color:#555; }
+#nav-config a.active { border-color:#228822; }
+
+.back-nav { background:#000; position:absolute; z-index:4; }
+
+#box-all-config { float:left; width:100%; position:relative; margin-bottom:10px; }
+#box-all-config .item-config { display:none; position:absolute; top:0; left:0; }
+#box-all-config .item-config.active { display:block !important; }
+#box-animations {}
+
+#bt-apply { position:absolute; top:32px; right:0px; text-indent:-9999em; overflow:hidden; width:64px; height:64px; background:url(../images/bt-apply.png) no-repeat left top; display:none; }
+#bt-apply:hover { background:url(../images/bt-apply-over.png) no-repeat left top; }
+
+#box-your-code {}
+#box-your-code pre { background:#111; padding:30px; -moz-border-radius:3px;-webkit-border-radius:33px;border-radius:3px; font:14px consolas,'courier new'; padding-left:80px; }
+
+#bt-up { position:fixed; top: 50%; right:50px; width:100px; height:100px; opacity:0.2; background:url(../images/bt-up.png) no-repeat left top; text-indent:-9999em; overflow:hidden; cursor:pointer; }
+
+/* =Buttons
+-------------------------------------------------------------- */
+.list-buttons {}
+.list-buttons li { position:relative; float:left; }
+.list-buttons li a { float:left; padding:10px 20px; background:#111; color:#fff; text-decoration:none; font-size:14px; -moz-border-radius:3
+px;-webkit-border-radius:3px;border-radius:3px; margin:0 10px 10px 0; }
+.list-buttons li a:hover { background:#000; }
+.list-buttons li a.new { background:#991100; }
+.list-buttons li a.new:hover { background:#aa1100; }
+
+.list-buttons li a.active { background:#228822; }
+.list-buttons li a.active:hover { background:#009922; }
+
+.list-select { display:none; position:absolute; top:0; left:0; -moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px; padding:3px 0; background:#111; z-index:10; border:1px solid #000; box-shadow:#333 0 0 5px; width:120px; }
+.list-select li { width:120px; }
+.list-select li a { padding:5px 10px; width:100px; margin:0; -moz-border-radius:0px;-webkit-border-radius:0px;border-radius:0px; }
+
+/* =Footer
+-------------------------------------------------------------- */
+#footer { position:fixed; bottom:0; left:0; width:100%;height:50px; z-index:200; }
+#credits { float:left; margin:2px 0 0 5px; text-indent:-9999em; overflow:hidden; width:42px; height:42px; background:url(../images/logo-thiago.png) no-repeat left top; position:relative; z-index:10; }
+#footer section { float:right; margin:15px 15px 0 0; position:relative; z-index:10; }
+#back-footer { position:absolute; z-index:9; background:url(../images/bg-page.png) repeat left top;opacity:0.8; width:100%; height:50px; }
+
+/* =Skitter
+-------------------------------------------------------------- */
+.border-skitter { margin:0px auto; border:1px solid #000; width:800px; height:300px; background:#333; margin-bottom:40px; -moz-box-shadow:rgba(0,0,0,0.5) 0 0 10px; }
+
+/* =Documentation
+-------------------------------------------------------------- */
+#page-documentation {}
+#page-documentation dl { margin-bottom:30px; float:left; width:100%; }
+#page-documentation dl dt { font-size:26px; color:#cc3333; font-weight:bold; }
+#page-documentation dl dd p.definition-description { font-size:16px; margin-bottom:10px; }
+#page-documentation dl dd p { font-size:14px; margin-bottom:2px; float:left; width:100%; }
+#page-documentation dl dd p strong { float:left; width:60px; background:#333; color:#fff; padding:2px 5px; margin-right:10px; -moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px; font-weight:normal; font-size:12px; text-align:right; }
+
+#page-documentation dl dd p span { margin-left:85px; display:block; }
+
+#page-documentation dl dd p.dd-default { }
+#page-documentation dl dd p.dd-accept { }
+#page-documentation dl dd p.dd-code { font-family:consolas,'courier new'; font-size:12px; }
+
+/* =Updatelog
+-------------------------------------------------------------- */
+#box-updatelog { }
+#box-updatelog dl { float:left; width:100%; margin-top:-30px; }
+#box-updatelog dl dt { font-size:26px; color:#cc3333; font-weight:bold; margin-top:30px; }
+#box-updatelog dl dd { font-size:14px; margin-bottom:2px; }
+
+/* =Download
+-------------------------------------------------------------- */
+#box-download { margin:0 auto; width:580px; margin-top:50px; }
+#box-download a { -moz-transition:color 0.2s; }
+#box-download a:hover { color:#999; text-decoration:underline; }
+
+.bt-download-big { width:200px; text-align:center; float:left; margin:0 50px; }
+.bt-download-big a { font-size:18px; font-weight:bold; color:#000; text-decoration:none; position:relative; }
+
+.bt-download-small { width:140px; text-align:center; float:left; margin-top:30px; }
+.bt-download-small a { font-size:14px; color:#000; text-decoration:none; position:relative; }
+
+#bt-download-wp { width:140px; height:140px; background:url(../images/bt-download-wp.png) no-repeat left top; text-indent:-9999em; overflow:hidden; cursor:pointer; float:left; }
+
+#bt-download-helper { width:140px; height:140px; background:url(../images/bt-download-helper.png) no-repeat left top; text-indent:-9999em; overflow:hidden; cursor:pointer; float:left; }
+
+#bt-download-stable { width:200px; height:200px; background:url(../images/bt-download-stable.png) no-repeat left top; text-indent:-9999em; overflow:hidden; cursor:pointer; float:left; }
+
+#box-banner-help { float:left; width:100%; }
+#banner-help { width:728px; margin:0 auto; /*margin-top:100px;*/ margin-top:50px; }
+#banner-help p { font-size:14px; color:#000; margin-bottom:5px; }
+#banner-help div { /*background:#000;*/ width:728px; height:90px; }
+
+/* =Comments
+-------------------------------------------------------------- */
+#box-comments { }
+
+/* =Multiple
+-------------------------------------------------------------- */
+#page-multiple {}
+#page-multiple .border_box { margin-bottom:50px; }
+
+/* =Donate
+-------------------------------------------------------------- */
+#box-donate { float: left; width: 100%; text-align: center; margin: 40px 0 0 0; }
109 js/jquery.skitter.js
View
@@ -3,9 +3,9 @@
* @name jquery.skitter.js
* @description Slideshow
* @author Thiago Silva Ferreira - http://thiagosf.net
- * @version 3.8
+ * @version 3.9
* @date August 04, 2010
- * @update February 02, 2011
+ * @update April 07, 2012
* @copyright (c) 2010 Thiago Silva Ferreira - http://thiagosf.net
* @license Dual licensed under the MIT or GPL Version 2 licenses
* @example http://thiagosf.net/projects/jquery/skitter/
@@ -77,6 +77,10 @@
elapsedTime: 0,
stop_over: true,
enable_navigation_keys: false,
+ with_animations: [],
+ mouseOverButton: function() { $(this).stop().animate({opacity:0.5}, 200); },
+ mouseOutButton: function() { $(this).stop().animate({opacity:1}, 200); },
+ auto_play: true,
structure: '<a href="#" class="prev_button">prev</a>'
+ '<a href="#" class="next_button">next</a>'
+ '<span class="info_slide"></span>'
@@ -140,13 +144,11 @@
if (this.settings.velocity >= 2) this.settings.velocity = 1.3;
if (this.settings.velocity <= 0) this.settings.velocity = 1;
- if (!this.settings.numbers && !this.settings.thumbs && !this.settings.dots) this.box_skitter.find('.info_slide').hide();
- if (!this.settings.label) this.box_skitter.find('.label_skitter').hide();
- if (!this.settings.navigation) {
- this.box_skitter.find('.prev_button').hide();
- this.box_skitter.find('.next_button').hide();
- }
-
+ this.box_skitter.find('.info_slide').hide();
+ this.box_skitter.find('.label_skitter').hide();
+ this.box_skitter.find('.prev_button').hide();
+ this.box_skitter.find('.next_button').hide();
+
this.box_skitter.find('.container_skitter').width(this.settings.width_skitter);
this.box_skitter.find('.container_skitter').height(this.settings.height_skitter);
@@ -223,22 +225,20 @@
if (self.settings.thumbs && !self.settings.fullscreen)
{
// New animation
- self.settings.animateNumberOut = {opacity:0.2, width:'70px'};
- self.settings.animateNumberOver = {opacity:0.5, width:'70px'};
- self.settings.animateNumberActive = {opacity:1.0, width:'70px'};
+ self.settings.animateNumberOut = {opacity:0.3};
+ self.settings.animateNumberOver = {opacity:0.5};
+ self.settings.animateNumberActive = {opacity:1};
self.box_skitter.find('.info_slide').addClass('info_slide_thumb');
- var width_info_slide = u * 55 + 75;
+ var width_info_slide = (u + 1) * self.box_skitter.find('.info_slide_thumb .image_number').width();
self.box_skitter.find('.info_slide_thumb').width(width_info_slide);
- self.box_skitter.css({height:self.box_skitter.height() + self.box_skitter.find('.info_slide').height() + 5});
- self.settings.label = false;
+ self.box_skitter.css({height:self.box_skitter.height() + self.box_skitter.find('.info_slide').height()});
self.box_skitter.append('<div class="container_thumbs"></div>');
var copy_info_slide = self.box_skitter.find('.info_slide').clone();
self.box_skitter.find('.info_slide').remove();
self.box_skitter.find('.container_thumbs')
.width(self.settings.width_skitter)
- .height(50)
.append(copy_info_slide);
// Scrolling with mouse movement
@@ -251,18 +251,14 @@
y_value = self.box_skitter.offset().top;
info_slide_thumb.find('.image_number').each(function(){
- width_image += $(this).width()
- + parseInt($(this).css('marginLeft'))
- + parseInt($(this).css('marginRight'))
- + parseInt($(this).css('paddingLeft'))
- + parseInt($(this).css('paddingRight'));
+ width_image += $(this).outerWidth();
});
info_slide_thumb.width(width_image+'px');
w_info_slide_thumb = info_slide_thumb.width();
- width_valor = this.settings.width_skitter;
+ width_value = this.settings.width_skitter;
- width_valor = width_skitter - 100;
+ width_value = width_skitter - 100;
if (width_info_slide > self.settings.width_skitter) {
self.box_skitter.mousemove(function(e){
@@ -272,11 +268,11 @@
x = x - x_value;
y = y - y_value;
- novo_width = w_info_slide_thumb - width_valor;
- new_x = -((novo_width * x) / width_valor);
+ novo_width = w_info_slide_thumb - width_value;
+ new_x = -((novo_width * x) / width_value);
if (new_x > 0) new_x = 0;
- if (new_x < -(w_info_slide_thumb - width_skitter - 5)) new_x = -(w_info_slide_thumb - width_skitter - 5);
+ if (new_x < -(w_info_slide_thumb - width_skitter)) new_x = -(w_info_slide_thumb - width_skitter);
if (y > height_skitter) {
info_slide_thumb.css({left: new_x});
@@ -373,8 +369,8 @@
return false;
});
- self.box_skitter.find('.next_button, .prev_button').bind('mouseover', self.mouseOverButton);
- self.box_skitter.find('.next_button, .prev_button').bind('mouseleave', self.mouseOutButton);
+ self.box_skitter.find('.next_button, .prev_button').bind('mouseover', self.settings.mouseOverButton);
+ self.box_skitter.find('.next_button, .prev_button').bind('mouseleave', self.settings.mouseOutButton);
this.box_skitter.find('.image_number').hover(function() {
if ($(this).attr('class') != 'image_number image_number_select') {
@@ -397,10 +393,10 @@
this.box_skitter.find('.image_number').css(self.settings.animateNumberOut);
this.box_skitter.find('.image_number:eq(0)').css(self.settings.animateNumberActive);
- // Preview
+ // Preview with dots
if (self.settings.preview && self.settings.dots)
{
- var preview = $('<div id="preview_slide"><ul></ul></div>');
+ var preview = $('<div class="preview_slide"><ul></ul></div>');
for (var i = 0; i < this.settings.images_links.length; i++) {
var li = $('<li></li>');
@@ -420,15 +416,15 @@
var _left_preview = (_left_image - _left_info) - 43;
var rel = parseInt($(this).attr('rel'));
- var image_current_preview = self.box_skitter.find('#preview_slide_current img').attr('src');
+ var image_current_preview = self.box_skitter.find('.preview_slide_current img').attr('src');
var _left_ul = -(rel * 100);
- self.box_skitter.find('#preview_slide').find('ul').animate({left: _left_ul}, {duration:200, queue: false, easing: 'easeOutSine'});
- self.box_skitter.find('#preview_slide').fadeTo(1,1).animate({left: _left_preview}, {duration:200, queue: false});
+ self.box_skitter.find('.preview_slide').find('ul').animate({left: _left_ul}, {duration:200, queue: false, easing: 'easeOutSine'});
+ self.box_skitter.find('.preview_slide').fadeTo(1,1).animate({left: _left_preview}, {duration:200, queue: false});
});
self.box_skitter.find(class_info).mouseleave(function() {
- $('#preview_slide').animate({opacity: 'hide'}, {duration: 200, queue: false});
+ $('.preview_slide').animate({opacity: 'hide'}, {duration: 200, queue: false});
});
}
}
@@ -444,7 +440,7 @@
}
// Progressbar
- if (self.settings.progressbar) {
+ if (self.settings.progressbar && self.settings.auto_play) {
self.addProgressBar();
}
@@ -502,6 +498,14 @@
{
var self = this;
var init_pause = false;
+
+ if (this.settings.numbers || this.settings.thumbs) this.box_skitter.find('.info_slide').fadeIn(500);
+ if (this.settings.dots) this.box_skitter.find('.info_slide_dots').fadeIn(500);
+ if (this.settings.label) this.box_skitter.find('.label_skitter').show();
+ if (this.settings.navigation) {
+ this.box_skitter.find('.prev_button').fadeIn(500);
+ this.box_skitter.find('.next_button').fadeIn(500);
+ }
self.startTime();
self.windowFocusOut();
@@ -515,7 +519,9 @@
self.setValueBoxText();
self.showBoxText();
- self.stopOnMouseOver();
+ if (self.settings.auto_play) {
+ self.stopOnMouseOver();
+ }
var mouseOverInit = function() {
if (self.settings.stop_over) {
@@ -530,7 +536,9 @@
self.box_skitter.find('.next_button').mouseover(mouseOverInit);
if (self.settings.images_links.length > 1 && !init_pause) {
- self.timer = setTimeout(function() { self.nextImage(); }, self.settings.interval);
+ if (self.settings.auto_play) {
+ self.timer = setTimeout(function() { self.nextImage(); }, self.settings.interval);
+ }
}
else {
self.box_skitter.find('.loading, .image_loading, .image_number, .next_button, .prev_button').remove();
@@ -600,7 +608,7 @@
'swapBars',
'swapBarsBack'
];
-
+
if (self.settings.progressbar) self.hideProgressBar();
animation_type = (this.settings.animation == '' && this.settings.images_links[this.settings.image_i][2]) ?
@@ -623,6 +631,17 @@
var random_id = parseInt(Math.random() * animations_functions.length);
animation_type = animations_functions[random_id];
}
+ // Specific animations
+ else if (self.settings.with_animations.length > 0)
+ {
+ var total_with_animations = self.settings.with_animations.length;
+ if (this.settings._i_animation == undefined) {
+ this.settings._i_animation = 0;
+ }
+ animation_type = self.settings.with_animations[this.settings._i_animation];
+ ++this.settings._i_animation;
+ if (this.settings._i_animation >= total_with_animations) this.settings._i_animation = 0;
+ }
switch (animation_type)
{
@@ -2043,7 +2062,7 @@
var _vleft = (width_box * i);
var _vtop_image = 0;
var _vleft_image = -(width_box * i);
-
+
var box_clone = this.getBoxCloneImgOld(image_old);
box_clone.css({left:_vleft+'px', top:_vtop+'px', width:width_box, height:height_box});
box_clone.find('img').css({left:_vleft_image, top:_vtop_image});
@@ -2531,17 +2550,7 @@
this.box_skitter.find('.focus_button').hide();
this.box_skitter.find('.play_pause_button').hide();
},
-
- // Animation mouse over
- mouseOverButton: function() {
- $(this).stop().animate({opacity:0.5}, 200);
- },
-
- // Animation mouse out
- mouseOutButton: function() {
- $(this).stop().animate({opacity:1}, 200);
- },
-
+
// Focus Skitter
focusSkitter: function() {
var self = this;
7 js/jquery.skitter.min.js
View
3 additions, 4 deletions not shown
Please sign in to comment.
Something went wrong with that request. Please try again.