Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
255 additions
and
185 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Original file line | Diff line number | Diff line change |
---|---|---|---|
@@ -1,59 +1,72 @@ | |||
/* =Skitter styles | /* =Skitter styles | ||
----------------------------------------------- */ | ----------------------------------------------- */ | ||
.box_skitter {position:relative;width:800px;height:300px;background:#000;} | .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 ul {display:none;} | ||
.box_skitter .container_skitter {overflow:hidden;position:relative;} | .box_skitter .container_skitter {overflow:hidden;position:relative;} | ||
.box_skitter .image {overflow:hidden;} | .box_skitter .image {overflow:hidden;} | ||
.box_skitter .image img {display:none;} | .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 {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;} | .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 .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;} | .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 {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 {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 .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;} | /* =Thumbs | ||
.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;} | Change width and height to customization dimension thumb | ||
.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 .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 .box_scroll_thumbs {padding:0 10px;} | .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 .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;} | .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 {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 {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 .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;} | .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 | ||
.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 .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 .progressbar { background:#000; position:absolute; top:5px;left:15px;height:5px; width: 200px; z-index:99; border-radius:20px; } | .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 | ||
----------------------------------------------- */ | -------------------------------------------------------------- */ | ||
#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 { 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; } | .box_skitter .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; } | .box_skitter .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 ul li img { position:absolute; top:0; left:0; height:150px; width:auto; } | ||
|
|
||
/* =Focus | /* =Focus | ||
----------------------------------------------- */ | -------------------------------------------------------------- */ | ||
#overlay_skitter { position:absolute; top:0; left:0; width:100%; z-index:9998; opacity:1; background:#000; } | #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 .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 {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;} | .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_large {width:800px;height:300px;} | ||
.box_skitter_small {width:200px;height:100px;} | .box_skitter_small {width:200px;height:100px;} |
Oops, something went wrong.