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

13 years ago · 05ebd95451
4 changed files with 31 additions and 22 deletions
--- a/demo/demo.css
+++ b/demo/demo.css
@ -40,13 +40,10 @@ p,h3,h4,pre {
  }

 .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 {
+.rslides2 {
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
@ -106,9 +103,6 @@ a {
  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;
--- a/demo/demo.html
+++ b/demo/demo.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="no-js">
 <head>
  <meta charset="utf-8" />
  <title>ResponsiveSlides.js &middot; Responsive jQuery slideshow</title>
@ -10,15 +10,19 @@
  <script src="../responsiveslides.min.js"></script>
  <script>
    $(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
-      $("#slides1").responsiveSlides({
+      $(".rslides1").responsiveSlides({
        maxwidth: 800,
        speed: 800
      });

      // Slideshow 2
-      $("#slides2").responsiveSlides({
+      $(".rslides2").responsiveSlides({
        auto: false,
        pager: true,
        speed: 300,
@ -26,7 +30,7 @@
      });

      // Slideshow 3
-      $("#slides3").responsiveSlides({
+      $(".rslides3").responsiveSlides({
        auto: false,
        pager: false,
        nav: true,
@ -52,14 +56,14 @@
    <h2>Simple &amp; lightweight responsive slideshow plugin (in 1kb)</h2>

    <!-- Slideshow 1 -->
-    <ul id="slides1">
+    <ul class="rslides rslides1">
      <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">
+    <ul class="rslides rslides2">
      <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>
@ -67,7 +71,7 @@

    <!-- Slideshow 2 -->
    <div class="callbacks_container">
-      <ul id="slides3">
+      <ul class="rslides rslides3">
        <li>
          <img src="1.jpg" alt="" />
          <p class="caption">This is a caption</p>
--- a/demo/themes/themes.html
+++ b/demo/themes/themes.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="no-js">
 <head>
  <meta charset="utf-8" />
  <title>ResponsiveSlides.js &middot; Alternative themes</title>
@ -11,8 +11,12 @@
  <script>
    $(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
-      $("#slides1").responsiveSlides({
+      $(".rslides1").responsiveSlides({
        auto: false,
        pager: true,
        nav: true,
@ -21,7 +25,7 @@
      });

      // Slideshow 2
-      $("#slides2").responsiveSlides({
+      $(".rslides2").responsiveSlides({
        auto: false,
        pager: true,
        nav: true,
@ -30,7 +34,7 @@
      });

      // Slideshow 3
-      $("#slides3").responsiveSlides({
+      $(".rslides3").responsiveSlides({
        auto: false,
        pager: false,
        nav: true,
@ -47,7 +51,7 @@

    <h3>Vertically centered on both sides</h3>
    <div class="rslides_container">
-      <ul id="slides1" class="rslides">
+      <ul class="rslides rslides1">
        <li><img src="../1.jpg" alt="" /></li>
        <li><img src="../2.jpg" alt="" /></li>
        <li><img src="../3.jpg" alt="" /></li>
@ -56,7 +60,7 @@

    <h3>Transparent buttons over the left and right side</h3>
    <div class="rslides_container">
-      <ul id="slides2" class="rslides">
+      <ul class="rslides rslides2">
        <li><img src="../1.jpg" alt="" /></li>
        <li><img src="../2.jpg" alt="" /></li>
        <li><img src="../3.jpg" alt="" /></li>
@ -65,7 +69,7 @@

    <h3>100% height with vertically centered icons</h3>
    <div class="rslides_container">
-      <ul id="slides3" class="rslides">
+      <ul class="rslides rslides3">
        <li><img src="../1.jpg" alt="" /></li>
        <li><img src="../2.jpg" alt="" /></li>
        <li><img src="../3.jpg" alt="" /></li>
--- a/responsiveslides.css
+++ b/responsiveslides.css
@ -1,4 +1,4 @@
-/*! http://responsiveslides.com v1.24 by @viljamis */
+/*! http://responsiveslides.com v1.25 by @viljamis */

 .rslides {
  position: relative;
@ -11,11 +11,18 @@

 .rslides li {
  position: absolute;
+  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

+.no-js .rslides li:first-child {
+  position: relative;
+  display: block;
+  float: left;
+  }
+
 .rslides img {
  display: block;
  height: auto;