Viljami S
13 years ago
6 changed files with 181 additions and 0 deletions
|
After Width: | Height: | Size: 87 KiB |
|
After Width: | Height: | Size: 71 KiB |
|
After Width: | Height: | Size: 83 KiB |
|
After Width: | Height: | Size: 50 KiB |
@ -0,0 +1,51 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8" /> |
||||
<title>ResponsiveSlides.js · Responsive jQuery Slideshow</title> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> |
||||
<link rel="stylesheet" href="../responsiveslides.css" /> |
||||
<link rel="stylesheet" href="example.css" /> |
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> |
||||
<script src="../responsiveslides.min.js"></script> |
||||
<script> |
||||
jQuery(function() { |
||||
// Slideshow 1 |
||||
$("#slides1").responsiveSlides({ |
||||
maxwidth: 800 |
||||
}); |
||||
|
||||
// Slideshow 4 |
||||
$("#slides2").responsiveSlides({ |
||||
auto: true, |
||||
pagination: true, |
||||
fade: 300, |
||||
maxwidth: 540 |
||||
}); |
||||
}); |
||||
</script> |
||||
</head> |
||||
<body> |
||||
<div id="wrapper"> |
||||
<h1>ResponsiveSlides.js v1.1</h1> |
||||
<h2>Responsive jQuery Slideshow plugin that weights under 1kb</h2> |
||||
|
||||
<!-- Slideshow 1 --> |
||||
<ul id="slides1"> |
||||
<li><img src="1.jpg" alt="" /></li> |
||||
<li><img src="2.jpg" alt="" /></li> |
||||
<li><img src="3.jpg" alt="" /></li> |
||||
</ul> |
||||
|
||||
<!-- Slideshow 2 --> |
||||
<ul id="slides2"> |
||||
<li><a href="#"><img src="1.jpg" alt="" /></a></li> |
||||
<li><a href="#"><img src="2.jpg" alt="" /></a></li> |
||||
<li><a href="#"><img src="3.jpg" alt="" /></a></li> |
||||
</ul> |
||||
|
||||
<a href="http://responsive-slides.viljamis.com/" id="download">See the documentation</a> |
||||
<p class="footer">ResponsiveSlides.js is created by <a href="http://viljamis.com">@viljamis</a>. It's released under the MIT license. If you have any questions or feedback you can use the <a href="https://github.com/viljami/ResponsiveSlides.js">GitHub project page</a>.</p> |
||||
</div> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,130 @@
|
||||
* { |
||||
margin: 0; |
||||
padding: 0; |
||||
} |
||||
|
||||
html { |
||||
background: #222 url("bg.png") repeat; |
||||
} |
||||
|
||||
body { |
||||
_width: 70%; |
||||
color: #888; |
||||
font: 14px/20px Helvetica, Arial, sans-serif; |
||||
margin: 20px auto 0; |
||||
max-width: 800px; |
||||
text-align: center; |
||||
text-shadow: 0 -2px 1px #000; |
||||
-webkit-font-smoothing: antialiased; |
||||
} |
||||
|
||||
h1 { |
||||
font: 40px/60px "Helvetica Neue", Helvetica, Arial, sans-serif; |
||||
color: #fff; |
||||
font-weight: 200; |
||||
} |
||||
|
||||
h2 { |
||||
font: 16px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; |
||||
margin-bottom: 40px; |
||||
} |
||||
|
||||
#wrapper { |
||||
padding: 20px; |
||||
} |
||||
|
||||
p,h3,h4,pre { |
||||
text-align: left; |
||||
max-width: 540px; |
||||
margin: 0 auto 20px; |
||||
} |
||||
|
||||
.rslides { |
||||
box-shadow: 0 0 20px #000; |
||||
-moz-box-shadow: 0 0 20px #000; |
||||
-webkit-box-shadow: 0 0 20px #000; |
||||
margin: 0 auto 40px; |
||||
} |
||||
|
||||
#slides2 { |
||||
box-shadow: none; |
||||
-moz-box-shadow: none; |
||||
-webkit-box-shadow: none; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.rslides_tabs { |
||||
background: rgba(0,0,0,.25); |
||||
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); |
||||
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0); |
||||
font-size: 18px; |
||||
list-style: none; |
||||
margin: 0 auto 50px; |
||||
max-width: 540px; |
||||
padding: 10px 0; |
||||
text-align: center; |
||||
width: 100%; |
||||
} |
||||
|
||||
.rslides_tabs li { |
||||
display: inline; |
||||
float: none; |
||||
margin-right: 1px; |
||||
} |
||||
|
||||
.rslides_tabs a { |
||||
width: auto; |
||||
line-height: 20px; |
||||
padding: 9px 20px; |
||||
height: auto; |
||||
background: transparent; |
||||
display: inline; |
||||
} |
||||
|
||||
.rslides_tabs li:first-child { |
||||
margin-left: 0; |
||||
} |
||||
|
||||
.rslides_tabs .rslides_here a { |
||||
background: rgba(255,255,255,.1); |
||||
color: #fff; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
a { |
||||
color: #fff; |
||||
text-decoration: none; |
||||
} |
||||
|
||||
#download { |
||||
background: #333; |
||||
background: rgba(255,255,255,.1); |
||||
border: 1px solid rgba(255,255,255,.1); |
||||
border-radius: 5px; |
||||
-moz-border-radius: 5px; |
||||
-webkit-border-radius: 5px; |
||||
box-shadow: 0 0 10px #000; |
||||
-moz-box-shadow: 0 0 10px #000; |
||||
-webkit-box-shadow: 0 0 10px #000; |
||||
display: block; |
||||
font-size: 20px; |
||||
font-weight: bold; |
||||
margin: 60px auto; |
||||
max-width: 500px; |
||||
padding: 20px; |
||||
} |
||||
|
||||
#download:hover { |
||||
background: rgba(255,255,255,.15); |
||||
} |
||||
|
||||
.footer { |
||||
font-size: 11px; |
||||
} |
||||
|
||||
@media screen and (max-width: 600px) { |
||||
h1 { |
||||
font: 24px/50px "Helvetica Neue", Helvetica, Arial, sans-serif; |
||||
} |
||||
} |
||||
Loading…
Reference in new issue