playground
/
ResponsiveSlides.js
mirror of https://github.com/viljamis/ResponsiveSlides.js
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Adding better support for cases when JavaScript isn't available.

rewrite v1.25
Viljami S 13 years ago
parent
3691d2323f
commit
05ebd95451
4 changed files with 31 additions and 22 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      demo/demo.css
  2. 18
      demo/demo.html
  3. 18
      demo/themes/themes.html
  4. 9
      responsiveslides.css

8
demo/demo.css
Unescape View File

@ -40,13 +40,10 @@ p,h3,h4,pre {
} }
.rslides { .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; margin: 0 auto 40px;
} }
#slides2 { .rslides2 {
box-shadow: none; box-shadow: none;
-moz-box-shadow: none; -moz-box-shadow: none;
-webkit-box-shadow: none; -webkit-box-shadow: none;
@ -106,9 +103,6 @@ a {
border-radius: 5px; border-radius: 5px;
-moz-border-radius: 5px; -moz-border-radius: 5px;
-webkit-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; display: block;
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;

18
demo/demo.html
Unescape View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" class="no-js">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>ResponsiveSlides.js &middot; Responsive jQuery slideshow</title> <title>ResponsiveSlides.js &middot; Responsive jQuery slideshow</title>
@ -10,15 +10,19 @@
<script src="../responsiveslides.min.js"></script> <script src="../responsiveslides.min.js"></script>
<script> <script>
$(function () { $(function () {
// If you aren't using Modernizr you might want to add no-js class
// to html and use that to support cases when JavaScript isn't available
$("html").removeClass("no-js");
// Slideshow 1 // Slideshow 1
$("#slides1").responsiveSlides({ $(".rslides1").responsiveSlides({
maxwidth: 800, maxwidth: 800,
speed: 800 speed: 800
}); });
// Slideshow 2 // Slideshow 2
$("#slides2").responsiveSlides({ $(".rslides2").responsiveSlides({
auto: false, auto: false,
pager: true, pager: true,
speed: 300, speed: 300,
@ -26,7 +30,7 @@
}); });
// Slideshow 3 // Slideshow 3
$("#slides3").responsiveSlides({ $(".rslides3").responsiveSlides({
auto: false, auto: false,
pager: false, pager: false,
nav: true, nav: true,
@ -52,14 +56,14 @@
<h2>Simple &amp; lightweight responsive slideshow plugin (in 1kb)</h2> <h2>Simple &amp; lightweight responsive slideshow plugin (in 1kb)</h2>
<!-- Slideshow 1 --> <!-- Slideshow 1 -->
<ul id="slides1"> <ul class="rslides rslides1">
<li><img src="1.jpg" alt="" /></li> <li><img src="1.jpg" alt="" /></li>
<li><img src="2.jpg" alt="" /></li> <li><img src="2.jpg" alt="" /></li>
<li><img src="3.jpg" alt="" /></li> <li><img src="3.jpg" alt="" /></li>
</ul> </ul>
<!-- Slideshow 2 --> <!-- Slideshow 2 -->
<ul id="slides2"> <ul class="rslides rslides2">
<li><a href="#"><img src="1.jpg" alt="" /></a></li> <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="2.jpg" alt="" /></a></li>
<li><a href="#"><img src="3.jpg" alt="" /></a></li> <li><a href="#"><img src="3.jpg" alt="" /></a></li>
@ -67,7 +71,7 @@
<!-- Slideshow 2 --> <!-- Slideshow 2 -->
<div class="callbacks_container"> <div class="callbacks_container">
<ul id="slides3"> <ul class="rslides rslides3">
<li> <li>
<img src="1.jpg" alt="" /> <img src="1.jpg" alt="" />
<p class="caption">This is a caption</p> <p class="caption">This is a caption</p>

18
demo/themes/themes.html
Unescape View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" class="no-js">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>ResponsiveSlides.js &middot; Alternative themes</title> <title>ResponsiveSlides.js &middot; Alternative themes</title>
@ -11,8 +11,12 @@
<script> <script>
$(function () { $(function () {
// If you aren't using Modernizr you might want to add no-js class
// to html and use that to support cases when JavaScript isn't available
$("html").removeClass("no-js");
// Slideshow 1 // Slideshow 1
$("#slides1").responsiveSlides({ $(".rslides1").responsiveSlides({
auto: false, auto: false,
pager: true, pager: true,
nav: true, nav: true,
@ -21,7 +25,7 @@
}); });
// Slideshow 2 // Slideshow 2
$("#slides2").responsiveSlides({ $(".rslides2").responsiveSlides({
auto: false, auto: false,
pager: true, pager: true,
nav: true, nav: true,
@ -30,7 +34,7 @@
}); });
// Slideshow 3 // Slideshow 3
$("#slides3").responsiveSlides({ $(".rslides3").responsiveSlides({
auto: false, auto: false,
pager: false, pager: false,
nav: true, nav: true,
@ -47,7 +51,7 @@
<h3>Vertically centered on both sides</h3> <h3>Vertically centered on both sides</h3>
<div class="rslides_container"> <div class="rslides_container">
<ul id="slides1" class="rslides"> <ul class="rslides rslides1">
<li><img src="../1.jpg" alt="" /></li> <li><img src="../1.jpg" alt="" /></li>
<li><img src="../2.jpg" alt="" /></li> <li><img src="../2.jpg" alt="" /></li>
<li><img src="../3.jpg" alt="" /></li> <li><img src="../3.jpg" alt="" /></li>
@ -56,7 +60,7 @@
<h3>Transparent buttons over the left and right side</h3> <h3>Transparent buttons over the left and right side</h3>
<div class="rslides_container"> <div class="rslides_container">
<ul id="slides2" class="rslides"> <ul class="rslides rslides2">
<li><img src="../1.jpg" alt="" /></li> <li><img src="../1.jpg" alt="" /></li>
<li><img src="../2.jpg" alt="" /></li> <li><img src="../2.jpg" alt="" /></li>
<li><img src="../3.jpg" alt="" /></li> <li><img src="../3.jpg" alt="" /></li>
@ -65,7 +69,7 @@
<h3>100% height with vertically centered icons</h3> <h3>100% height with vertically centered icons</h3>
<div class="rslides_container"> <div class="rslides_container">
<ul id="slides3" class="rslides"> <ul class="rslides rslides3">
<li><img src="../1.jpg" alt="" /></li> <li><img src="../1.jpg" alt="" /></li>
<li><img src="../2.jpg" alt="" /></li> <li><img src="../2.jpg" alt="" /></li>
<li><img src="../3.jpg" alt="" /></li> <li><img src="../3.jpg" alt="" /></li>

9
responsiveslides.css
Unescape View File

@ -1,4 +1,4 @@
/*! http://responsiveslides.com v1.24 by @viljamis */ /*! http://responsiveslides.com v1.25 by @viljamis */
.rslides { .rslides {
position: relative; position: relative;
@ -11,11 +11,18 @@
.rslides li { .rslides li {
position: absolute; position: absolute;
display: none;
width: 100%; width: 100%;
left: 0; left: 0;
top: 0; top: 0;
} }
.no-js .rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img { .rslides img {
display: block; display: block;
height: auto; height: auto;

Write Preview
Loading…
Cancel
Save