Cleaning things up for merging

13 years ago · 54d980db4d
6 changed files with 58 additions and 48 deletions
--- a/demo/example.css
+++ b/demo/example.css
--- a/demo/demo.html
+++ b/demo/demo.html
@ -9,20 +9,22 @@
  <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
-    });
+    $(function () {
+
+      // Slideshow 1
+      $("#slides1").responsiveSlides({
+        maxwidth: 800
+      });
+
+      // Slideshow 4
+      $("#slides2").responsiveSlides({
+        auto: true,
+        pagination: true,
+        fade: 300,
+        maxwidth: 540
+      });

-    // Slideshow 4
-    $("#slides2").responsiveSlides({
-      auto: true,
-      pagination: true,
-      fade: 300,
-      maxwidth: 540
    });
-  });
  </script>
 </head>
 <body>
--- a/demo/themes/img/psd/arrows.psd
+++ b/demo/themes/img/psd/arrows.psd
--- a/demo/themes/css/styles.css
+++ b/demo/themes/css/styles.css
@ -25,10 +25,16 @@ body {
  }

 h1 {
-  font: 600 24px/32px sans-serif;
+  font: 600 28px/36px sans-serif;
  margin: 50px 0;
  }

+h3 {
+  font: 600 18px/24px sans-serif;
+  color: #999;
+  margin: 0 0 20px;
+  }
+
 .rslides {
  margin: 0 auto;
  }
@ -51,7 +57,7 @@ h1 {
  text-decoration: none;
  height: 61px;
  width: 38px;
-  background: transparent url(../img/arrows.gif) no-repeat left top;
+  background: transparent url("themes.gif") no-repeat left top;
  margin-top: -45px;
  }

@ -94,7 +100,7 @@ h1 {
  top: 0;
  bottom: 0;
  left: 0;
-  background: #000 url(../img/arrows.gif) no-repeat left 50%;
+  background: #000 url("themes.gif") no-repeat left 50%;
  width: 38px;
  }

--- a/demo/themes/img/arrows.gif
+++ b/demo/themes/img/arrows.gif
--- a/demo/themes/demo_themes.html
+++ b/demo/themes/demo_themes.html
@ -2,48 +2,50 @@
 <html lang="en">
 <head>
  <meta charset="utf-8" />
-  <title>Alternative pagination styles</title>
+  <title>ResponsiveSlides.js &middot; Alternative themes</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="css/styles.css" />
+  <link rel="stylesheet" href="themes.css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="../../responsiveslides.js"></script>
  <script>
-  jQuery(function() {
-    // Slideshow 1
-    $("#slides1").responsiveSlides({
-      auto: false,
-      pagination: true,
-      nav: true,
-      fade: 300,
-      maxwidth: 800
-    });
+    $(function () {
+
+      // Slideshow 1
+      $("#slides1").responsiveSlides({
+        auto: false,
+        pagination: true,
+        nav: true,
+        fade: 300,
+        maxwidth: 800
+      });
+
+      // Slideshow 2
+      $("#slides2").responsiveSlides({
+        auto: false,
+        pagination: true,
+        nav: true,
+        fade: 300,
+        maxwidth: 800
+      });
+
+      // Slideshow 3
+      $("#slides3").responsiveSlides({
+        auto: false,
+        pagination: false,
+        nav: true,
+        fade: 300,
+        maxwidth: 800
+      });

-    // Slideshow 2
-    $("#slides2").responsiveSlides({
-      auto: false,
-      pagination: true,
-      nav: true,
-      fade: 300,
-      maxwidth: 800
-    });
-    
-    // Slideshow 3
-    $("#slides3").responsiveSlides({
-      auto: false,
-      pagination: false,
-      nav: true,
-      fade: 300,
-      maxwidth: 800
    });
-  });
  </script>
 </head>
 <body>
  <div id="wrapper">
-    <h1>Alternative pagination styles</h1>
+    <h1>Three different ways to use next/prev buttons</h1>

-    <!-- Slideshow 1 -->
+    <h3>Vertically centered on both sides</h3>
    <div class="rslides_container">
      <ul id="slides1">
        <li><img src="../1.jpg" alt="" /></li>
@ -52,7 +54,7 @@
      </ul>
    </div>

-    <!-- Slideshow 2 -->
+    <h3>Transparent buttons over the left and right side</h3>
    <div class="rslides_container">
      <ul id="slides2">
        <li><img src="../1.jpg" alt="" /></li>
@ -60,8 +62,8 @@
        <li><img src="../3.jpg" alt="" /></li>
      </ul>
    </div>
-    
-    <!-- Slideshow 3 -->
+
+    <h3>100% height with vertically centered icons</h3>
    <div class="rslides_container">
      <ul id="slides3">
        <li><img src="../1.jpg" alt="" /></li>