Added skin css files back to the main project

Fixed a bug in addSlide when autoinit is set to false (the slide array to add new slides to had not been initialized at this point)
MarcelloDiSimone · Dec 22, 2012 · 8504969 · 8504969
1 parent 861fee2
commit 8504969
Show file tree

Hide file tree

Showing 9 changed files with 305 additions and 22 deletions.
diff --git a/src/css/skins/debug/jquery.jqslider.skin.css b/src/css/skins/debug/jquery.jqslider.skin.css
@@ -0,0 +1,42 @@
+/**************************/
+/****** DEBUG STYLE *******/
+/**************************/
+.jqslider {
+  overflow: visible;
+}
+.jqs-container {
+  overflow: visible;
+}
+.jqs-list {
+  overflow: visible;
+  background-color: #777;
+}
+.jqs-slide {
+  overflow: visible;
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.5, transparent), to(transparent));
+  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.2) 50%, transparent 50%, transparent);
+  background-image: -o-linear-gradient(rgba(255, 255, 255, 0.2) 50%, transparent 50%, transparent);
+  background-image: linear-gradient(rgba(255, 255, 255, 0.2) 50%, transparent 50%, transparent);
+  -webkit-background-size: 50px 50px;
+  -moz-background-size: 50px 50px;
+  background-size: 50px 50px;
+}
+.jqs-next {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+.jqs-handler {
+  background-color: #bbb;
+}
+/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */
+/*.jqslider:before,*/
+/*.jqslider:after,*/
+/*.jqslider .jqs-container:before,*/
+/*.jqslider .jqs-container:after,*/
+/*.jqslider .jqs-container ul:before,*/
+/*.jqslider .jqs-container ul:after { content: ""; display: table; }*/
+/*.jqslider:after,*/
+/*.jqslider .jqs-container:after,*/
+/*.jqslider .jqs-container ul:after { clear: both; }*/
+/*.jqslider,*/
+/*.jqslider .jqs-container,*/
+/*.jqslider .jqs-container ul { zoom: 1; }*/
diff --git a/src/css/skins/debug/jquery.jqslider.skin.less b/src/css/skins/debug/jquery.jqslider.skin.less
@@ -0,0 +1,44 @@
+/**************************/
+/****** DEBUG STYLE *******/
+/**************************/
+
+.jqslider {
+    overflow: visible;
+}
+.jqs-container {
+    overflow: visible;
+}
+.jqs-list {
+    overflow: visible;
+    background-color: #777;
+}
+.jqs-slide {
+    overflow: visible;
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
+    background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
+    background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
+    background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
+    -webkit-background-size: 50px 50px;
+    -moz-background-size: 50px 50px;
+    background-size: 50px 50px;
+}
+.jqs-next {
+    background-color: rgba(255,255,255,.2);
+}
+.jqs-handler {
+    background-color: #bbb;
+}
+
+/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */
+/*.jqslider:before,*/
+/*.jqslider:after,*/
+/*.jqslider .jqs-container:before,*/
+/*.jqslider .jqs-container:after,*/
+/*.jqslider .jqs-container ul:before,*/
+/*.jqslider .jqs-container ul:after { content: ""; display: table; }*/
+/*.jqslider:after,*/
+/*.jqslider .jqs-container:after,*/
+/*.jqslider .jqs-container ul:after { clear: both; }*/
+/*.jqslider,*/
+/*.jqslider .jqs-container,*/
+/*.jqslider .jqs-container ul { zoom: 1; }*/
diff --git a/src/css/skins/default/jquery.jqslider.skin.css b/src/css/skins/default/jquery.jqslider.skin.css
@@ -0,0 +1,52 @@
+.jqs-container {
+  -moz-box-shadow: 0 0 30px #AAAAAA;
+  -webkit-box-shadow: 0 0 30px #AAAAAA;
+  box-shadow: 0 0 30px #AAAAAA;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
+  background: -webkit-gradient(linear, 0% 0%, 0% 100%, to(#e1e1e1), from(#ffffff));
+  background: -webkit-linear-gradient(top, #ffffff, #e1e1e1);
+  background: -moz-linear-gradient(top, #ffffff, #e1e1e1);
+  background: -ms-linear-gradient(top, #ffffff, #e1e1e1);
+  background: -o-linear-gradient(top, #ffffff, #e1e1e1);
+}
+.jqs-handler {
+  position: absolute;
+  display: block;
+  z-index: 10000;
+  cursor: pointer;
+  top: 50%;
+  background: #777;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 20px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  text-decoration: none;
+  color: #FFF;
+  padding: 10px;
+}
+.jqs-handler-next {
+  right: 10px;
+}
+.jqs-handler-prev {
+  left: 10px;
+}
+.jqs-vertical .jqs-handler {
+  position: absolute;
+  display: block;
+  z-index: 10000;
+  cursor: pointer;
+  top: auto;
+  left: 50%;
+  right: auto;
+}
+.jqs-vertical .jqs-handler-next {
+  bottom: 10px;
+}
+.jqs-vertical .jqs-handler-prev {
+  top: 10px;
+}
+h1,
+h2 {
+  text-shadow: 0px 2px 0px #111;
+}
diff --git a/src/css/skins/default/jquery.jqslider.skin.less b/src/css/skins/default/jquery.jqslider.skin.less
@@ -0,0 +1,60 @@
+.jqs-container {
+    -moz-box-shadow: 0 0 30px #AAAAAA;
+    -webkit-box-shadow: 0 0 30px #AAAAAA;
+    box-shadow: 0 0 30px #AAAAAA;
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    border-radius: 10px;
+    background: -webkit-gradient(linear, 0% 0%, 0% 100%, to(#e1e1e1), from(#FFFFFF));
+    background: -webkit-linear-gradient(top, #FFFFFF, #e1e1e1);
+    background: -moz-linear-gradient(top, #FFFFFF, #e1e1e1);
+    background: -ms-linear-gradient(top, #FFFFFF, #e1e1e1);
+    background: -o-linear-gradient(top, #FFFFFF, #e1e1e1);
+}
+
+.jqs-handler {
+    position: absolute;
+    display: block;
+    z-index: 10000;
+    cursor: pointer;
+    top: 50%;
+    background: #777;
+    background: rgba(0,0,0,.5);
+    border-radius: 20px;
+    box-shadow: 0 0 10px rgba(0,0,0,.5);
+    text-decoration: none;
+    color: #FFF;
+    padding: 10px;
+}
+
+.jqs-handler-next {
+    right: 10px;
+}
+
+.jqs-handler-prev {
+    left: 10px;
+}
+
+.jqs-vertical {
+    .jqs-handler {
+        position: absolute;
+        display: block;
+        z-index: 10000;
+        cursor: pointer;
+        top: auto;
+        left: 50%;
+        right: auto;
+    }
+    .jqs-handler-next {
+        bottom: 10px;
+    }
+    .jqs-handler-prev {
+        top: 10px;
+    }
+}
+
+h1,
+h2 {
+    text-shadow: 0px 2px 0px #111;
+}
+
diff --git a/src/css/skins/presentation/images/arrow_left.png b/src/css/skins/presentation/images/arrow_left.png
diff --git a/src/css/skins/presentation/images/arrow_right.png b/src/css/skins/presentation/images/arrow_right.png
diff --git a/src/css/skins/presentation/jquery.jqslider.skin.css b/src/css/skins/presentation/jquery.jqslider.skin.css
@@ -0,0 +1,47 @@
+.jqslider {
+  background: #ffffff;
+  /* Old browsers */
+
+  background: -moz-radial-gradient(center, ellipse cover, #ffffff 57%, #f2f2f2 100%);
+  /* FF3.6+ */
+
+  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(57%, #ffffff), color-stop(100%, #f2f2f2));
+  /* Chrome,Safari4+ */
+
+  background: -webkit-radial-gradient(center, ellipse cover, #ffffff 57%, #f2f2f2 100%);
+  /* Chrome10+,Safari5.1+ */
+
+  background: -o-radial-gradient(center, ellipse cover, #ffffff 57%, #f2f2f2 100%);
+  /* Opera 12+ */
+
+  background: -ms-radial-gradient(center, ellipse cover, #ffffff 57%, #f2f2f2 100%);
+  /* IE10+ */
+
+  background: radial-gradient(center, ellipse cover, #ffffff 57%, #f2f2f2 100%);
+  /* W3C */
+
+  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2', GradientType=1);
+  /* IE6-9 fallback on horizontal gradient */
+
+}
+.jqs-handler {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 40px;
+  background: url('images/arrow_left.png') no-repeat center center rgba(0, 0, 0, 0.1);
+  text-decoration: none;
+  vertical-align: middle;
+}
+.jqs-handler.jqs-inactive {
+  display: none;
+}
+.jqs-handler:hover {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+.jqs-handler-next {
+  background: url('images/arrow_right.png') no-repeat center center rgba(0, 0, 0, 0.1);
+  left: auto;
+  right: 0;
+}
diff --git a/src/css/skins/presentation/jquery.jqslider.skin.less b/src/css/skins/presentation/jquery.jqslider.skin.less
@@ -0,0 +1,35 @@
+.jqslider {
+    background: #ffffff; /* Old browsers */
+    background: -moz-radial-gradient(center, ellipse cover, #ffffff 57%, #f2f2f2 100%); /* FF3.6+ */
+    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(57%, #ffffff), color-stop(100%, #f2f2f2)); /* Chrome,Safari4+ */
+    background: -webkit-radial-gradient(center, ellipse cover, #ffffff 57%, #f2f2f2 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-radial-gradient(center, ellipse cover, #ffffff 57%, #f2f2f2 100%); /* Opera 12+ */
+    background: -ms-radial-gradient(center, ellipse cover, #ffffff 57%, #f2f2f2 100%); /* IE10+ */
+    background: radial-gradient(center, ellipse cover, #ffffff 57%, #f2f2f2 100%); /* W3C */
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#f2f2f2', GradientType = 1); /* IE6-9 fallback on horizontal gradient */
+}
+
+.jqs-handler {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 40px;
+    background: url('images/arrow_left.png') no-repeat center center rgba(0, 0, 0, .1);
+    text-decoration: none;
+    vertical-align: middle;
+}
+
+.jqs-handler.jqs-inactive {
+    display: none;
+}
+
+.jqs-handler:hover {
+    background-color: rgba(0, 0, 0, .2);
+}
+
+.jqs-handler-next {
+    background: url('images/arrow_right.png') no-repeat center center rgba(0, 0, 0, .1);
+    left: auto;
+    right: 0;
+}
diff --git a/src/js/jquery.jqslider.js b/src/js/jquery.jqslider.js
@@ -71,6 +71,28 @@
          */
         this._tmpl = '<' + this.o.slideTag + '/>';
 
+	    /**
+	     * reference of the slider container
+	     * @property _container
+	     * @type Object
+	     * @private
+	     */
+	    this._container = this.$el.children( this.o.containerSelector );
+	    /**
+	     * reference of the slider list element
+	     * @property _list
+	     * @type Object
+	     * @private
+	     */
+	    this._list = this._container.children( this.o.listSelector );
+	    /**
+	     * jQuery set of all slide elements
+	     * @property _slides
+	     * @type Object
+	     * @private
+	     */
+	    this._slides = this._list.children( this.o.slideTag );
+
         if ( this.o.autoinit !== false ) {
             this.init();
         }
@@ -358,28 +380,9 @@
         },
 
         _initSlider:function(){
-
-            /**
-             * reference of the slider container
-             * @property _container
-             * @type Object
-             * @private
-             */
-            this._container = this.$el.children( this.o.containerSelector ).addClass('jqs-container');
-            /**
-             * reference of the slider list element
-             * @property _list
-             * @type Object
-             * @private
-             */
-            this._list = this._container.children( this.o.listSelector ).addClass( 'jqs-list' );
-            /**
-             * jQuery set of all slide elements
-             * @property _slides
-             * @type Object
-             * @private
-             */
-            this._slides = this._list.children( this.o.slideTag ).addClass( 'jqs-slide' );
+            this._container.addClass('jqs-container');
+            this._list.addClass( 'jqs-list' );
+            this._slides.addClass( 'jqs-slide' );
 
             var current = this._slides.filter('[class*="jqs-current"]').index();
             /**