updated to v1.3

jcobb · Oct 4, 2012 · e15b5ee · e15b5ee
1 parent 8071322
commit e15b5ee
Show file tree

Hide file tree

Showing 15 changed files with 896 additions and 509 deletions.
diff --git a/README b/README
@@ -1,5 +1,10 @@
 A simple jQuery slider plug-in. Very basic, simple to use and modify.
 
+Changes in v1.3
+- Entirely new codebase
+- Responsive functionality
+- Fixed caption bug when image is wrapped in a link
+
 Changes in v1.2
 - Fixed all minor bugs
 - Tidied code

diff --git a/bjqs.css b/bjqs.css
@@ -0,0 +1,13 @@
+/* Basic jQuery Slider essential styles */
+
+ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
+li.bjqs-slide{position:absolute; display:none;}
+ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}
+ul.bjqs-controls.v-centered li a{position:absolute;}
+ul.bjqs-controls.v-centered li.bjqs-next a{right:0;}
+ul.bjqs-controls.v-centered li.bjqs-prev a{left:0;}
+ol.bjqs-markers{list-style: none; padding: 0; margin: 0; width:100%;}
+ol.bjqs-markers.h-centered{text-align: center;}
+ol.bjqs-markers li{display:inline;}
+ol.bjqs-markers li a{display:inline-block;}
+p.bjqs-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;}
diff --git a/css/basic-jquery-slider.css b/css/basic-jquery-slider.css
diff --git a/demo.css b/demo.css
@@ -0,0 +1,72 @@
+/* Demo CSS - You do not need this css in your own slider */
+
+body{
+	font-family: "Open Sans", helvetica, arial;
+}
+
+pre{
+	font-family: "Source Code Pro", monospace;
+	display: block;
+	padding: 9.5px;
+	margin: 0 0 10px;
+	font-size: 13px;
+	line-height: 20px;
+	word-break: break-all;
+	word-wrap: break-word;
+	white-space: pre;
+	white-space: pre-wrap;
+	background-color: whiteSmoke;
+	border: 1px solid #CCC;
+	-webkit-border-radius: 4px;
+	-moz-border-radius: 4px;
+	border-radius: 4px;
+}
+
+h2{
+	font-size: 48px;
+}
+
+pre + h2{
+	margin-top: 80px;
+}
+
+#container{
+	max-width:620px;
+	margin:0 auto;
+	padding-bottom:80px;
+}
+
+#banner-fade,
+#banner-slide{
+	margin-bottom: 60px;
+}
+
+ul.bjqs-controls.v-centered li a{
+	display:block;
+	padding:10px;
+	background:#fff;
+	color:#000;
+	text-decoration: none;
+}
+
+ul.bjqs-controls.v-centered li a:hover{
+	background:#000;
+	color:#fff;
+}
+
+ol.bjqs-markers li a{
+	padding:5px 10px;
+	background:#000;
+	color:#fff;
+	margin:5px;
+	text-decoration: none;
+}
+
+ol.bjqs-markers li.active-marker a,
+ol.bjqs-markers li a:hover{
+	background: #999;
+}
+
+p.bjqs-caption{
+	background: rgba(255,255,255,0.5);
+}
diff --git a/img/.gitignore b/img/.gitignore
diff --git a/img/banner01.jpg b/img/banner01.jpg
diff --git a/img/banner02.jpg b/img/banner02.jpg
diff --git a/img/banner03.jpg b/img/banner03.jpg
diff --git a/index.html b/index.html
@@ -4,49 +4,103 @@
     <meta charset="utf-8">
 
     <title>Basic jQuery Slider - Demo</title>
-
-    <!-- Google Web Fonts for the demo -->
-    <link href='http://fonts.googleapis.com/css?family=Carter+One' rel='stylesheet' type='text/css'>
 
-    <!-- Basic Jquery Slider styles (This is the only essential css file) -->
-    <link rel="stylesheet" href="css/basic-jquery-slider.css">
+    <!-- bjqs.css contains the *essential* css needed for the slider to work -->
+    <link rel="stylesheet" href="bjqs.css">
+
+    <!-- some pretty fonts for this demo page - not required for the slider -->
+    <link href='http://fonts.googleapis.com/css?family=Source+Code+Pro|Open+Sans:300' rel='stylesheet' type='text/css'> 
+
+    <!-- demo.css contains additional styles used to set up this demo page - not required for the slider --> 
+    <link rel="stylesheet" href="demo.css">
+
+    <!-- load jQuery and the plugin -->
+    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+    <script src="js/bjqs-1.3.min.js"></script>
 
   </head>
 
   <body>
 
     <div id="container">
 
+      <h2>Fade Example</h2>
+
       <!--  Outer wrapper for presentation only, this can be anything you like -->
-      <div id="banner">
+      <div id="banner-fade">
+
         <!-- start Basic Jquery Slider -->
         <ul class="bjqs">
           <li><img src="img/banner01.jpg" title="Automatically generated caption"></li>
           <li><img src="img/banner02.jpg" title="Automatically generated caption"></li>
           <li><img src="img/banner03.jpg" title="Automatically generated caption"></li>
         </ul>
         <!-- end Basic jQuery Slider -->
+
+      </div>
+      <!-- End outer wrapper -->
+
+      <script class="secret-source">
+        jQuery(document).ready(function($) {
+
+          $('#banner-fade').bjqs({
+            height      : 320,
+            width       : 620,
+            responsive  : true
+          });
+
+        });
+      </script>
+
+      <h2>Slide Example</h2>
+
+      <!--  Outer wrapper for presentation only, this can be anything you like -->
+      <div id="banner-slide">
+
+        <!-- start Basic Jquery Slider -->
+        <ul class="bjqs">
+          <li><a href=""><img src="img/banner01.jpg" title="Automatically generated caption"></a></li>
+          <li><img src="img/banner02.jpg" title="Automatically generated caption"></li>
+          <li><img src="img/banner03.jpg" title="Automatically generated caption"></li>
+        </ul>
+        <!-- end Basic jQuery Slider -->
+
       </div>
       <!-- End outer wrapper -->
 
+      <!-- attach the plug-in to the slider parent element and adjust the settings as required -->
+      <script class="secret-source">
+        jQuery(document).ready(function($) {
+
+          $('#banner-slide').bjqs({
+            animtype      : 'slide',
+            height        : 320,
+            width         : 620,
+            responsive    : true,
+            randomstart   : true
+          });
+
+        });
+      </script>
+
     </div>
-
-    <!-- Load jQuery and the plug-in -->
-    <script src="js/libs/jquery-1.6.2.min.js"></script>
-    <script src="js/basic-jquery-slider.js"></script>
-
-    <!--  Attach the plug-in to the slider parent element and adjust the settings as required -->
+
+    <!-- 
+      The following script is not related to basic jQuery Slider 
+      It's used to create the code snippets in the demo.
+      https://github.com/maelstrom/SecretSource
+    -->
+    <script src="js/libs/jquery.secret-source.min.js"></script>
+
     <script>
-      $(document).ready(function() {
-
-        $('#banner').bjqs({
-          'animation' : 'slide',
-          'width' : 700,
-          'height' : 300
+    jQuery(function($) {
+
+        $('.secret-source').secretSource({
+            includeTag: false
         });
-        
-      });
+
+    });
     </script>
-  
+
   </body>
 </html>