Changed folder structure and added responsive feature

Gruntfile.coffee

@@ -2,11 +2,6 @@ module.exports = ( grunt ) ->
 
     grunt.initConfig
 
-        #  Path constants
-        #
-        PRO_PATH : "dist/src"
-        DEV_PATH : "src"
-
         pkg : grunt.file.readJSON "package.json"
 
         #  Banner we want to show above the minified js files.
@@ -29,22 +24,24 @@ module.exports = ( grunt ) ->
         #
         copy :
 
-            dist :
+            docs :
 
                 files : [
-                    { expand: true, cwd: "<%= DEV_PATH %>",    src: "images/**/*", dest: "<%= PRO_PATH %>" }
-                    { expand: true, cwd: "<%= DEV_PATH %>",    src: "css/**/*",    dest: "<%= PRO_PATH %>" }
-                    { expand: true, cwd: "node_modules/baijs", src: "css/**/*",    dest: "<%= PRO_PATH %>" }
-                    { expand: true, cwd: "node_modules/baijs", src: "js/**/*",     dest: "<%= PRO_PATH %>" }
-                    { expand: true, cwd: "<%= DEV_PATH %>",    src: "js/**/*",     dest: "<%= PRO_PATH %>" }
-                    { expand: true, cwd: "<%= DEV_PATH %>",    src: "index.html",  dest: "<%= PRO_PATH %>" }
+                    { expand: true, cwd: "docs", src: "images/**/*", dest: "dist/docs" }
+                    { expand: true, cwd: "docs", src: "css/**/*",    dest: "dist/docs" }
+                    { expand: true, cwd: "node_modules/baijs", src: "css/**/*",    dest: "dist/docs" }
+                    { expand: true, cwd: "node_modules/baijs", src: "js/**/*",     dest: "dist/docs" }
+                    { expand: true, cwd: "docs", src: "js/**/*",     dest: "dist/docs" }
+                    { expand: true, cwd: "lib",  src: "**/*",        dest: "dist/docs/js" }
+                    { expand: true, cwd: "docs", src: "index.html",  dest: "dist/docs" }
                 ]
 
             examples :
 
                 files : [
-                    { expand: true, cwd: "<%= DEV_PATH %>", src: "examples/**/*",              dest: "<%= PRO_PATH %>" }
-                    { expand: true, cwd: "<%= DEV_PATH %>", src: "js/jquery.<%= pkg.name %>*", dest: "<%= PRO_PATH %>/examples/simple" }
+                    { expand: true, cwd: "examples", src: "**/*",                     dest: "dist/examples" }
+                    { expand: true, cwd: "lib", src: "jquery.<%= pkg.name %>*", dest: "dist/examples/simple" }
+                    { expand: true, cwd: "lib", src: "jquery.<%= pkg.name %>*", dest: "dist/examples/responsive" }
                 ]
 
         #  Validate javascript files with jsHint.
@@ -56,15 +53,15 @@ module.exports = ( grunt ) ->
                 jshintrc : ".jshintrc"
 
             all : [
-                "<%= DEV_PATH %>/js/jquery.<%= pkg.name %>.js"
-                #"<%= DEV_PATH %>/js/<%= pkg.name %>.js"
+                "lib/jquery.<%= pkg.name %>.js"
+                "lib/<%= pkg.name %>.js"
             ]
 
         #  Minify the javascript.
         #
         uglify :
 
-            dist :
+            lib :
 
                 options :
 
@@ -73,9 +70,7 @@ module.exports = ( grunt ) ->
 
                 files :
 
-                    "<%= PRO_PATH %>/js/jquery.<%= pkg.name %>.min.js" : ["<%= PRO_PATH %>/js/jquery.<%= pkg.name %>.js"]
-                    #"<%= PRO_PATH %>/js/<%= pkg.name %>.min.js"        : ["<%= PRO_PATH %>/js/<%= pkg.name %>.js"]
-
+                    "lib/jquery.<%= pkg.name %>.min.js" : ["lib/jquery.<%= pkg.name %>.js"]
 
         #  Replace image file paths in css and correct css path in the index.
         #
@@ -84,8 +79,8 @@ module.exports = ( grunt ) ->
             dist :
 
                 src : [
-                    "<%= PRO_PATH %>/index.html"
-                    "<%= PRO_PATH %>/examples/**/*.html"
+                    "dist/docs/index.html"
+                    "dist/examples/**/*.html"
                 ]
                 overwrite     : true
                 replacements  : [
@@ -98,51 +93,68 @@ module.exports = ( grunt ) ->
                         to   : ""
                     }
                     {
-                        from : /..\/..\/js\//ig
+                        from : /..\/..\/lib\//ig
+                        to   : ""
+                    }
+                    {
+                        from : /..\/lib\//ig
                         to   : "js/"
                     }
+
                 ]
 
         #  Make a zipfile from the dist and examples.
         #
         compress :
 
-            dist :
+            docs :
 
                 options :
 
-                    archive: "dist/dist-<%= pkg.version %>.zip"
+                    archive: "dist/<%= pkg.name %>-<%= pkg.version %>-docs.zip"
 
                 expand : true
-                cwd    : "<%= PRO_PATH %>"
+                cwd    : "dist/docs"
                 src    : ["**/*"]
                 dest   : "."
 
             examples :
 
                 options :
 
-                    archive: "<%= PRO_PATH %>/<%= pkg.name %>-<%= pkg.version %>.zip"
+                    archive: "dist/<%= pkg.name %>-<%= pkg.version %>.zip"
 
                 expand : true
-                cwd    : "<%= PRO_PATH %>/examples"
+                cwd    : "dist/examples"
                 src    : ["**/*"]
                 dest   : "."
 
         #  Deploy plugin to baijs.com
         #
         "ftp-deploy" :
 
-            dist :
+            docs :
+
+                auth :
+
+                    host    : "ftp.baijs.nl"
+                    port    : 21
+                    authKey : "<%= pkg.name %>"
+
+                src  : "dist/docs"
+                dest : "/"
+
+            examples :
 
                 auth :
 
                     host    : "ftp.baijs.nl"
                     port    : 21
                     authKey : "<%= pkg.name %>"
 
-                src  : "<%= PRO_PATH %>"
+                src  : "dist/"
                 dest : "/"
+                exclusions: ["docs", "<%= pkg.name %>-<%= pkg.version %>-docs.zip"]
 
     #  Load all the task modules we need.
     #
@@ -161,11 +173,11 @@ module.exports = ( grunt ) ->
         [
             "jshint"
             "clean:dist"
-            "copy:dist"
-            "uglify:dist"
+            "copy:docs"
+            "uglify:lib"
             "copy:examples"
             "replace:dist"
-            "compress:dist"
+            "compress:docs"
             "compress:examples"
         ]
     )
@@ -176,6 +188,7 @@ module.exports = ( grunt ) ->
         "ftp"
         [
             "default"
-            "ftp-deploy:dist"
+            "ftp-deploy:docs"
+            "ftp-deploy:examples"
         ]
     )

src/index.html → docs/index.html

@@ -31,7 +31,7 @@
         <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
 
         <!-- Add tinycarousel JS -->
-        <script type="text/javascript" src="js/jquery.tinycarousel.js"></script>
+        <script type="text/javascript" src="../lib/jquery.tinycarousel.js"></script>
 
         <!-- Next files are only for this website! -->
         <script type="text/javascript" src="../node_modules/baijs/js/prettify.js"></script>
@@ -88,6 +88,7 @@ <h2>Features</h2>
                             <li>Animation time can be set in milliseconds or to 'instant'</li>
                             <li>A interval can be set to slide automatically every given milliseconds</li>
                             <li>Loops infinitely over its slides.</li>
+                            <li>Responsive</li>
                             <li>Easy customizable</li>
                             <li>Lightweight</li>
                             <li><a href="https://github.com/wieringen/tinycarousel">Source is on GitHub</a></li>
@@ -96,6 +97,7 @@ <h2>Features</h2>
                     <!-- google_ad_section_end -->
 
                     <h2>Examples</h2>
+                    <p>If you need some more (advanced) examples you can find them <a href="examples">here</a>.</p>
 
                     <div class="block advert">
                         <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
@@ -111,7 +113,7 @@ <h2>Examples</h2>
                     </div>
 
                     <div id="slider1">
-                        <a class="buttons prev" href="#"><</a>
+                        <a class="buttons prev" href="#">&#60;</a>
                         <div class="viewport">
                             <ul class="overview">
                                 <li><img src="images/picture1.jpg" alt="image 1" /></li>
@@ -121,7 +123,7 @@ <h2>Examples</h2>
                                 <li><img src="images/picture7.jpg" alt="image 7" /></li>
                             </ul>
                         </div>
-                        <a class="buttons next" href="#">></a>
+                        <a class="buttons next" href="#">&#62;</a>
 
                         <script type="text/javascript">
                             $(document).ready(function()
@@ -140,7 +142,7 @@ <h2>Examples</h2>
                     </code></pre>
 
                     <div id="slider3">
-                        <a class="buttons prev" href="#"><</a>
+                        <a class="buttons prev" href="#">&#60;</a>
                         <div class="viewport">
                             <ul class="overview">
                                 <li><img src="images/picture7.jpg" alt="image 7" /></li>
@@ -151,7 +153,7 @@ <h2>Examples</h2>
                                 <li><img src="images/picture2.jpg" alt="image 2" /></li>
                             </ul>
                         </div>
-                        <a class="buttons next" href="#">></a>
+                        <a class="buttons next" href="#">&#62;</a>
                         <ul class="bullets">
                             <li><a href="#" class="bullet active" data-slide="0">1</a></li>
                             <li><a href="#" class="bullet" data-slide="1">2</a></li>
@@ -250,7 +252,7 @@ <h2>Examples</h2>
                     </code></pre>
 
                     <div id="slider7">
-                        <a class="buttons prev" href="#"><</a>
+                        <a class="buttons prev" href="#">&#60;</a>
                         <div class="viewport">
                             <ul class="overview">
                                 <li><img src="images/picture7.jpg" alt="image 7" /></li>
@@ -261,7 +263,7 @@ <h2>Examples</h2>
                                 <li><img src="images/picture2.jpg" alt="image 2" /></li>
                             </ul>
                         </div>
-                        <a class="buttons next" href="#">></a>
+                        <a class="buttons next" href="#">&#62;</a>
 
                         <script type="text/javascript">
                             $(document).ready(function()

src/examples/simple/index.html → examples/responsive/index.html

@@ -4,10 +4,10 @@
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 	<title>Tiny Carousel: A lightweight jQuery plugin</title>
-	<link rel="stylesheet" href="css/website.css" type="text/css" media="screen"/>
+	<link rel="stylesheet" href="tinycarousel.css" type="text/css" media="screen"/>
 
 	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
-	<script type="text/javascript" src="../../js/jquery.tinycarousel.js"></script>
+	<script type="text/javascript" src="../../lib/jquery.tinycarousel.js"></script>
 	<script type="text/javascript">
 		$(document).ready(function()
 		{
@@ -18,7 +18,7 @@
 </head>
 <body>
 	<div id="slider1">
-		<a class="buttons prev" href="#"><</a>
+		<a class="buttons prev" href="#">&#60;</a>
 		<div class="viewport">
 			<ul class="overview">
 				<li><img src="images/picture6.jpg" /></li>
@@ -29,7 +29,7 @@
 				<li><img src="images/picture1.jpg" /></li>
 			</ul>
 		</div>
-		<a class="buttons next" href="#">></a>
+		<a class="buttons next" href="#">&#62;</a>
 	</div>
 </body>
 </html>

examples/responsive/tinycarousel.css

@@ -0,0 +1,31 @@
+/* Tiny Carousel */
+#slider1 { height: 1%; margin: 30px 0 0; overflow:hidden; position: relative; padding: 0 50px 10px;   }
+#slider1 .viewport { height: 125px; overflow: hidden; position: relative; }
+#slider1 .buttons {
+    background: #C01313;
+    border-radius: 35px;
+    display: block;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 35px;
+    height: 35px;
+    color: #fff;
+    font-weight: bold;
+    text-align: center;
+    line-height: 35px;
+    text-decoration: none;
+    font-size: 22px;
+}
+#slider1 .next {
+    right: 0;
+    left: auto;
+    top: 50%;
+}
+#slider1 .buttons:hover{
+    color: #C01313;
+    background: #fff;
+}
+#slider1 .disable { visibility: hidden; }
+#slider1 .overview { list-style: none; position: absolute; padding: 0; margin: 0; width: 240px; left: 0 top: 0; }
+#slider1 .overview li{ float: left; margin: 0 20px 0 0; padding: 1px; height: 121px; border: 1px solid #dcdcdc; width: 236px;}

examples/simple/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
+
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+	<title>Tiny Carousel: A lightweight jQuery plugin</title>
+	<link rel="stylesheet" href="tinycarousel.css" type="text/css" media="screen"/>
+
+	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
+	<script type="text/javascript" src="../../lib/jquery.tinycarousel.js"></script>
+	<script type="text/javascript">
+		$(document).ready(function()
+		{
+			$('#slider1').tinycarousel();
+		});
+	</script>
+
+</head>
+<body>
+	<div id="slider1">
+		<a class="buttons prev" href="#">&#60;</a>
+		<div class="viewport">
+			<ul class="overview">
+				<li><img src="images/picture6.jpg" /></li>
+				<li><img src="images/picture5.jpg" /></li>
+				<li><img src="images/picture4.jpg" /></li>
+				<li><img src="images/picture3.jpg" /></li>
+				<li><img src="images/picture2.jpg" /></li>
+				<li><img src="images/picture1.jpg" /></li>
+			</ul>
+		</div>
+		<a class="buttons next" href="#">&#62;</a>
+	</div>
+</body>
+</html>