Viljami S
13 years ago
3 changed files with 167 additions and 0 deletions
|
After Width: | Height: | Size: 50 KiB |
@ -0,0 +1,45 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="utf-8" /> |
||||||
|
<title>AdaptiveSlides.js · Adaptive jQuery Slideshow</title> |
||||||
|
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" /> |
||||||
|
<link rel="stylesheet" href="styles.css" /> |
||||||
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> |
||||||
|
<script src="../adaptiveslides.pack.js"></script> |
||||||
|
<script> |
||||||
|
jQuery(function() { |
||||||
|
|
||||||
|
// Slideshow 1 |
||||||
|
$("#slides").adaptiveSlides({ maxwidth:800 }); |
||||||
|
|
||||||
|
// Slideshow 2 |
||||||
|
$("#slides2").adaptiveSlides({ fade:300, auto:false, maxwidth:540, namespace: 'anotherslideshow' }); |
||||||
|
|
||||||
|
}); |
||||||
|
</script> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div id="wrapper"> |
||||||
|
<h1>AdaptiveSlides.js</h1> |
||||||
|
<h2>Adaptive jQuery Slideshow plugin that weights just ~1kb</h2> |
||||||
|
|
||||||
|
<!-- Slideshow 1 --> |
||||||
|
<div id="slides"> |
||||||
|
<img src="1.jpg" alt="" /> |
||||||
|
<img src="2.jpg" alt="" /> |
||||||
|
<img src="3.jpg" alt="" /> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- Slideshow 2 --> |
||||||
|
<div id="slides2"> |
||||||
|
<img src="1.jpg" alt="" /> |
||||||
|
<img src="2.jpg" alt="" /> |
||||||
|
<img src="3.jpg" alt="" /> |
||||||
|
</div> |
||||||
|
|
||||||
|
<a href="http://adaptiveslides.viljamis.com/" id="download">See the documentation</a> |
||||||
|
<p class="footer">AdaptiveSlides.js is created by <a href="http://viljamis.com">@viljamis</a>. It's released under the MIT license. If you have questions you can use the <a href="https://github.com/viljami/AdaptiveSlides.js">GitHub project page</a>.</p> |
||||||
|
</div> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,122 @@ |
|||||||
|
* { |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
|
||||||
|
html { |
||||||
|
background: #222 url("bg.png") repeat; |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
-webkit-font-smoothing: antialiased; |
||||||
|
font: 14px/20px Helvetica, Arial, sans-serif; |
||||||
|
text-shadow: 0 -2px 1px #000; |
||||||
|
color: #888; |
||||||
|
text-align: center; |
||||||
|
_width: 70%; |
||||||
|
max-width: 800px; |
||||||
|
margin: 20px auto 0; |
||||||
|
} |
||||||
|
|
||||||
|
#wrapper { |
||||||
|
padding: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
#slides { |
||||||
|
-webkit-box-shadow: 0 0 20px #000; |
||||||
|
-moz-box-shadow: 0 0 20px #000; |
||||||
|
box-shadow: 0 0 20px #000; |
||||||
|
margin-bottom: 40px !important; |
||||||
|
} |
||||||
|
|
||||||
|
#slides2 { |
||||||
|
margin: 0 auto; |
||||||
|
} |
||||||
|
|
||||||
|
p { |
||||||
|
text-align: left; |
||||||
|
max-width: 500px; |
||||||
|
margin: 0 auto 20px; |
||||||
|
} |
||||||
|
|
||||||
|
h1 { |
||||||
|
font: 36px/50px "Helvetica Neue", Helvetica, Arial, sans-serif; |
||||||
|
color: #fff; |
||||||
|
font-weight: 200; |
||||||
|
} |
||||||
|
|
||||||
|
h2 { |
||||||
|
font: 16px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; |
||||||
|
margin-bottom: 40px; |
||||||
|
} |
||||||
|
|
||||||
|
a { |
||||||
|
text-decoration: none; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
a:hover { |
||||||
|
border-bottom: 1px solid #666; |
||||||
|
} |
||||||
|
|
||||||
|
a:active { |
||||||
|
opacity: .7; |
||||||
|
} |
||||||
|
|
||||||
|
.anotherslideshow_tabs { |
||||||
|
font-size: 18px; |
||||||
|
margin: 0 auto 50px; |
||||||
|
padding: 10px 0; |
||||||
|
list-style: none; |
||||||
|
width: 100%; |
||||||
|
max-width: 540px; |
||||||
|
text-align: center; |
||||||
|
background: rgba(0,0,0,.25); |
||||||
|
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0); |
||||||
|
-moz-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0); |
||||||
|
box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0); |
||||||
|
} |
||||||
|
|
||||||
|
.anotherslideshow_tabs li { |
||||||
|
display: inline; |
||||||
|
margin-left: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
.anotherslideshow_tabs li:first-child { |
||||||
|
margin-left: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.anotherslideshow_tabs a { |
||||||
|
color: #666; |
||||||
|
} |
||||||
|
|
||||||
|
.anotherslideshow_tabs .active a { |
||||||
|
color: #fff; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
|
||||||
|
#download { |
||||||
|
-webkit-box-shadow: 0 0 10px #000; |
||||||
|
-moz-box-shadow: 0 0 10px #000; |
||||||
|
box-shadow: 0 0 10px #000; |
||||||
|
background: #333; |
||||||
|
background: rgba(255,255,255,.1); |
||||||
|
border: 1px solid rgba(255,255,255,.1); |
||||||
|
-webkit-border-radius: 5px; |
||||||
|
-moz-border-radius: 5px; |
||||||
|
border-radius: 5px; |
||||||
|
font-size: 20px; |
||||||
|
font-weight: bold; |
||||||
|
margin: 60px auto; |
||||||
|
display: block; |
||||||
|
max-width: 500px; |
||||||
|
padding: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
#download:hover { |
||||||
|
background: rgba(255,255,255,.15); |
||||||
|
} |
||||||
|
|
||||||
|
.footer { |
||||||
|
font-size: 11px; |
||||||
|
} |
||||||
Loading…
Reference in new issue