fix demo pages, update skin pages

jssor · Apr 2, 2017 · 0c4ae07 · 0c4ae07
1 parent 663737e
commit 0c4ae07
Show file tree

Hide file tree

Showing 101 changed files with 684 additions and 767 deletions.
diff --git a/README.md b/README.md
@@ -15,11 +15,11 @@ Responsive Javascript Image/Text Slider/Carousel/Slideshow/Gallery/HTML5 Ad
 # Download from GitHub
 https://github.com/jssor/slider/archive/master.zip
 
-# Bower
-bower install jssor-slider --save
-
 # NPM
 npm install jssor-slider
+
+# Bower
+bower install jssor-slider --save
 ```
 
 --------------------------------------

diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
     "name": "jssor-slider",
     "description": "Responsive Javascript Image/Content Slider/Slideshow/Carousel/Gallery/Banner/HTML5 AD",
-    "version": "23.0.2",
+    "version": "23.0.3",
     "homepage": "http://www.jssor.com",
     "keywords": [
         "javascript",
@@ -31,8 +31,17 @@
         "js/jssor.slider.min.js"
     ],
     "ignore": [
-        "demos",
-        "examples",
+        "demos/",
+        "examples/",
+        "transitions/",
+
+        "img/alila/",
+        "img/landscape/",
+        "img/motor/",
+        "img/nested-thumb/",
+        "img/photography/",
+        "img/travel/",
+
         "img/1920",
         "img/ancient-lady",
         "img/appicon",

diff --git a/component.json b/component.json
@@ -2,7 +2,7 @@
     "name": "jssor-slider",
     "repo": "jssor/slider",
     "description": "Responsive Javascript Image/Content Slider/Slideshow/Carousel/Gallery/Banner/HTML5 AD",
-    "version": "23.0.1",
+    "version": "23.0.3",
     "homepage": "http://www.jssor.com",
     "keywords": [
         "javascript",

diff --git a/demos/banner-rotator-2.html b/demos/banner-rotator-2.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Banner Rotator Demo - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title></title>
 </head>
 <body style="background:#fff;">
     <!-- Jssor Slider Begin -->
@@ -214,7 +214,6 @@
         <!-- Arrow Right -->
         <span u="arrowright" class="jssora05r" style="top: 123px; right: 8px;">
         </span>
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
         <!-- Trigger -->
         <script>
             jssor_2_slider_init('slider2_container');

diff --git a/demos/banner-rotator.html b/demos/banner-rotator.html
@@ -164,7 +164,6 @@
         <!-- Arrow Navigator -->
         <span data-u="arrowleft" class="jssora05l" style="top:0px;left:8px;width:40px;height:40px;" data-autocenter="2"></span>
         <span data-u="arrowright" class="jssora05r" style="top:0px;right:8px;width:40px;height:40px;" data-autocenter="2"></span>
-        <a href="http://www.jssor.com" style="display:none">Bootstrap Carousel</a>
     </div>
     <script>
         jssor_1_slider_init();

diff --git a/demos/banner-slider.html b/demos/banner-slider.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Banner Slider Demo - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title></title>
 </head>
 <body style="background:#fff;">
     <!-- Jssor Slider Begin -->
@@ -87,7 +87,7 @@
         };
     </script>
     <!-- Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+
     <div id="jssor_2_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px; overflow: hidden; ">
 
         <!-- Loading Screen -->
@@ -215,7 +215,6 @@
         <!-- Arrow Right -->
         <span u="arrowright" class="jssora05r" style="top: 123px; right: 8px;">
         </span>
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
         <!-- Trigger -->
         <script>
             jssor_2_slider_init('jssor_2_container');

diff --git a/demos/carousel-slider.html b/demos/carousel-slider.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Carousel Demo - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title></title>
 </head>
 <body style="font-family:Arial, Verdana;background-color:#fff;">
     <!-- Jssor Slider Begin -->
@@ -186,7 +186,6 @@
         <span u="arrowright" class="jssora03r" style="top: 123px; right: 8px;">
         </span>
         <!--#endregion Arrow Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
         <!-- Trigger -->
         <script>
             jssor_slider1_starter('slider1_container');

diff --git a/demos/content-slider.html b/demos/content-slider.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Content Slider - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title></title>
 </head>
 <body style="padding: 0; margin: 0; font-family: Arial, Verdana; background-color: #fff;">
     <script type="text/javascript" src="../js/jssor.slider.min.js"></script>
@@ -273,99 +273,98 @@
                 </span>
                 <!--#endregion Arrow Navigator Skin End -->
 
-            <!--#region Thumbnail Navigator Skin Begin -->
-            <!-- Help: http://www.jssor.com/development/slider-with-thumbnail-navigator-no-jquery.html -->
-            <style>
-                /* jssor slider thumbnail navigator skin 04 css */
-                /*
-                .jssort04 .p            (normal)
-                .jssort04 .p:hover      (normal mouseover)
-                .jssort04 .pav          (active)
-                .jssort04 .pav:hover    (active mouseover)
-                .jssort04 .pdn          (mousedown)
-                */
-
-                .jssort04 {
-                    position: absolute;
-                    /* size of thumbnail navigator container */
-                    width: 600px;
-                    height: 60px;
-                }
+                <!--#region Thumbnail Navigator Skin Begin -->
+                <!-- Help: http://www.jssor.com/development/slider-with-thumbnail-navigator-no-jquery.html -->
+                <style>
+                    /* jssor slider thumbnail navigator skin 04 css */
+                    /*
+                    .jssort04 .p            (normal)
+                    .jssort04 .p:hover      (normal mouseover)
+                    .jssort04 .pav          (active)
+                    .jssort04 .pav:hover    (active mouseover)
+                    .jssort04 .pdn          (mousedown)
+                    */
 
-                    .jssort04 .p {
+                    .jssort04 {
                         position: absolute;
-                        top: 0;
-                        left: 0;
-                        width: 62px;
-                        height: 32px;
+                        /* size of thumbnail navigator container */
+                        width: 600px;
+                        height: 60px;
                     }
 
-                    .jssort04 .t {
-                        position: absolute;
-                        top: 0;
-                        left: 0;
-                        width: 100%;
-                        height: 100%;
-                        border: none;
-                    }
+                        .jssort04 .p {
+                            position: absolute;
+                            top: 0;
+                            left: 0;
+                            width: 62px;
+                            height: 32px;
+                        }
 
-                    .jssort04 .w, .jssort04 .pav:hover .w {
-                        position: absolute;
-                        width: 60px;
-                        height: 30px;
-                        border: #0099FF 1px solid;
-                        box-sizing: content-box;
-                    }
+                        .jssort04 .t {
+                            position: absolute;
+                            top: 0;
+                            left: 0;
+                            width: 100%;
+                            height: 100%;
+                            border: none;
+                        }
 
-                    .jssort04 .pdn .w, .jssort04 .pav .w {
-                        border-style: dashed;
-                    }
+                        .jssort04 .w, .jssort04 .pav:hover .w {
+                            position: absolute;
+                            width: 60px;
+                            height: 30px;
+                            border: #0099FF 1px solid;
+                            box-sizing: content-box;
+                        }
 
-                    .jssort04 .c {
-                        position: absolute;
-                        top: 0;
-                        left: 0;
-                        width: 62px;
-                        height: 32px;
-                        background-color: #000;
-                        filter: alpha(opacity=45);
-                        opacity: .45;
-                        transition: opacity .6s;
-                        -moz-transition: opacity .6s;
-                        -webkit-transition: opacity .6s;
-                        -o-transition: opacity .6s;
-                    }
+                        .jssort04 .pdn .w, .jssort04 .pav .w {
+                            border-style: dashed;
+                        }
 
-                    .jssort04 .p:hover .c, .jssort04 .pav .c {
-                        filter: alpha(opacity=0);
-                        opacity: 0;
-                    }
+                        .jssort04 .c {
+                            position: absolute;
+                            top: 0;
+                            left: 0;
+                            width: 62px;
+                            height: 32px;
+                            background-color: #000;
+                            filter: alpha(opacity=45);
+                            opacity: .45;
+                            transition: opacity .6s;
+                            -moz-transition: opacity .6s;
+                            -webkit-transition: opacity .6s;
+                            -o-transition: opacity .6s;
+                        }
 
-                    .jssort04 .p:hover .c {
-                        transition: none;
-                        -moz-transition: none;
-                        -webkit-transition: none;
-                        -o-transition: none;
-                    }
+                        .jssort04 .p:hover .c, .jssort04 .pav .c {
+                            filter: alpha(opacity=0);
+                            opacity: 0;
+                        }
 
-                    * html .jssort04 .w {
-                        width /**/: 62px;
-                        height /**/: 32px;
-                    }
-            </style>
-            <!-- thumbnail navigator container -->
-            <div u="thumbnavigator" class="jssort04" style="right: 0px; bottom: 0px;">
-                <!-- Thumbnail Item Skin Begin -->
-                <div u="slides" style="bottom: 25px; right: 30px; cursor: default;">
-                    <div u="prototype" class="p">
-                        <div class=w><div u="thumbnailtemplate" class="t"></div></div>
-                        <div class=c></div>
+                        .jssort04 .p:hover .c {
+                            transition: none;
+                            -moz-transition: none;
+                            -webkit-transition: none;
+                            -o-transition: none;
+                        }
+
+                        * html .jssort04 .w {
+                            width /**/: 62px;
+                            height /**/: 32px;
+                        }
+                </style>
+                <!-- thumbnail navigator container -->
+                <div u="thumbnavigator" class="jssort04" style="right: 0px; bottom: 0px;">
+                    <!-- Thumbnail Item Skin Begin -->
+                    <div u="slides" style="bottom: 25px; right: 30px; cursor: default;">
+                        <div u="prototype" class="p">
+                            <div class=w><div u="thumbnailtemplate" class="t"></div></div>
+                            <div class=c></div>
+                        </div>
                     </div>
+                    <!-- Thumbnail Item Skin End -->
                 </div>
-                <!-- Thumbnail Item Skin End -->
-            </div>
-            <!--#endregion Thumbnail Navigator Skin End -->
-                <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+                <!--#endregion Thumbnail Navigator Skin End -->
             </div>
             <!-- Trigger -->
             <script>

diff --git a/demos/different-size-photo-slider.html b/demos/different-size-photo-slider.html
@@ -3,9 +3,10 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Different Size Images Slider Example - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title></title>
 </head>
 <body style="background:#fff;">
+    <!-- Jssor Slider Begin -->
     <script type="text/javascript" src="../js/jssor.slider.min.js"></script>
     <script>
         jssor_slider1_starter = function (containerId) {
@@ -94,8 +95,6 @@
             //responsive code end
         };
     </script>
-    <!-- Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
     <div id="slider1_container" style="position: relative; width: 600px; height: 500px; background-color: #000; overflow: hidden; ">
 
         <!-- Loading Screen -->
@@ -180,7 +179,7 @@
             <div u="prototype"></div>
         </div>
         <!--#endregion Bullet Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             jssor_slider1_starter('slider1_container');

diff --git a/demos/full-width-slider.html b/demos/full-width-slider.html
@@ -135,7 +135,6 @@
                     <div style="position:absolute;top:60px;left:15px;width:500px;height:40px;z-index:0;font-size:22px;color:#000000;line-height:38px;">windows, android, mac</div>
                 </div>
             </div>
-            <a data-u="any" href="http://www.jssor.com" style="display:none">jQuery Slider</a>
             <div>
                 <img data-u="image" src="../img/full-width/windows.jpg" />
                 <div style="position:absolute;top:85px;left:100px;width:600px;height:120px;z-index:0;background-color:rgba(0,0,0,0.5);">

diff --git a/demos/grid-slider.html b/demos/grid-slider.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Grid Slider Demo - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title></title>
 </head>
 <body style="font-family:Arial, Verdana;background-color:#fff;">
     <!-- Jssor Slider Begin -->
@@ -123,7 +123,6 @@
     </style>
     <!-- sliderh style end -->
 
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
     <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 809px; height: 456px; overflow: hidden; ">
             <!-- Slides Container -->
             <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 809px; height: 456px;

diff --git a/demos/html5-ad.html b/demos/html5-ad.html
@@ -8,8 +8,6 @@
 <body style="padding:0px; margin:0px; background-color:#fff;font-family:Arial, sans-serif">
 
     <!-- #region Jssor Slider Begin -->
-    <!-- Source: http://www.jssor.com/demos/html5-ad.slider/=edit -->
-    <!-- Generator: Jssor Slider Maker -->
     <script type="text/javascript" src="../js/jssor.slider.min.js"></script>
     <script>
         jssor_html5_AdWords_slider_init = function() {