Permalink
Browse files

packing for deployment, working on readme

  • Loading branch information...
1 parent bb2756d commit 47bcdd4c7776b3a8e276df529295607ed9543369 @Johnrae Johnrae committed Mar 22, 2016
Showing with 242 additions and 10,043 deletions.
  1. +29 −0 Readme.md
  2. +12 −17 app/css/main.css
  3. +1 −1 app/css/main.css.map
  4. +13 −0 app/css/turntable.css
  5. +16 −4 app/index.html
  6. 0 app/js/height.js
  7. +1 −9,921 app/js/main.js
  8. +1 −1 app/js/main.js.map
  9. +82 −0 app/js/turntable.js
  10. +2 −2 gulpfile.js
  11. +80 −67 js/main.js
  12. +3 −11 sass/main.scss
  13. +1 −18 spec/tests.js
  14. +1 −1 spec/tests.js.map
View
@@ -0,0 +1,29 @@
+# Turntable jQuery Plugin
+This plugin will let you spin images (provided you have some to use)
+
+###Usage
+***
+All image sources need to be included in a data attribute on the li, and the img tags will be dynamically added. Make sure it is called data-img-src, followed by the tag.
+
+#####HTML
+
+```html
+<div id="myTurntable" class="turntable">
+ <ul>
+ <li data-img-src="./images/0.jpg"></li>
+ <li data-img-src="./images/1.jpg"></li>
+ <li data-img-src="./images/2.jpg"></li>
+ <li data-img-src="./images/3.jpg"></li>
+ <li data-img-src="./images/4.jpg"></li>
+ <li data-img-src="./images/5.jpg"></li>
+ </ul>
+</div>
+```
+#####Javascript
+
+```javascript
+ $('#myTurntable').turntable());
+```
+###Settings
+***
+The
View
@@ -1,18 +1,13 @@
-body {
- background: #E5998C; }
-
.turntable {
- max-width: 1000px;
- margin: 0 auto; }
- .turntable ul {
- padding: 0px;
- margin: 0px; }
- .turntable ul li {
- list-style-type: none;
- display: none; }
- .turntable ul li img {
- width: 100%; }
- .turntable ul li.active {
- display: block; }
-
-/*# sourceMappingURL=main.css.map */
+ display: inline-block;
+ margin: 0px; }
+.turntable ul {
+ padding: 0px;
+ margin: 0px; }
+.turntable ul li {
+ list-style-type: none;
+ display: none; }
+.turntable ul li img {
+ width: 100%; }
+.turntable ul li.active {
+ display: block; }
@@ -1 +1 @@
-{"version":3,"file":"main.css","sources":["main.scss"],"sourcesContent":["// Put any @imports here\n// See Readme for a list of supported ones\n\nbody {\n background: #E5998C;\n}\n\n.turntable {\n\n max-width: 1000px;\n margin: 0 auto;\n\n ul {\n\n padding: 0px;\n margin: 0px;\n\n li {\n\n list-style-type: none;\n display: none;\n\n img {\n \n width: 100%;\n\n }\n }\n\n li.active {\n display: block;\n }\n }\n}"],"mappings":"AAGA,IAAI,CAAC;EACH,UAAU,EAAE,OAAQ,GACrB;;AAED,UAAU,CAAC;EAET,SAAS,EAAE,MAAO;EAClB,MAAM,EAAE,MAAO,GAuBhB;EA1BD,UAAU,CAKR,EAAE,CAAC;IAED,OAAO,EAAE,GAAI;IACb,MAAM,EAAE,GAAI,GAiBb;IAzBH,UAAU,CAKR,EAAE,CAKA,EAAE,CAAC;MAED,eAAe,EAAE,IAAK;MACtB,OAAO,EAAG,IAAK,GAOhB;MApBL,UAAU,CAKR,EAAE,CAKA,EAAE,CAKA,GAAG,CAAC;QAEF,KAAK,EAAE,IAAK,GAEb;IAnBP,UAAU,CAKR,EAAE,CAiBA,EAAE,AAAA,OAAO,CAAC;MACR,OAAO,EAAE,KAAM,GAChB","names":[],"sourceRoot":"/source/"}
+{"version":3,"file":"main.css","sources":["main.scss"],"sourcesContent":[".turntable{\n display: inline-block;\n max-width: 1000px;\n margin: 0px;\n ul {\n\n padding: 0px;\n margin: 0px;\n\n li {\n\n list-style-type: none;\n display: none;\n\n img {\n \n width: 100%;\n\n }\n }\n\n li.active {\n display: block;\n }\n }\n}"],"mappings":"AAAA,UAAU,CAAA;EACR,OAAO,EAAE,YAAa;EACtB,SAAS,EAAE,MAAO;EAClB,MAAM,EAAE,GAAI,GAsBb;EAzBD,UAAU,CAIR,EAAE,CAAC;IAED,OAAO,EAAE,GAAI;IACb,MAAM,EAAE,GAAI,GAiBb;IAxBH,UAAU,CAIR,EAAE,CAKA,EAAE,CAAC;MAED,eAAe,EAAE,IAAK;MACtB,OAAO,EAAG,IAAK,GAOhB;MAnBL,UAAU,CAIR,EAAE,CAKA,EAAE,CAKA,GAAG,CAAC;QAEF,KAAK,EAAE,IAAK,GAEb;IAlBP,UAAU,CAIR,EAAE,CAiBA,EAAE,AAAA,OAAO,CAAC;MACR,OAAO,EAAE,KAAM,GAChB","names":[],"sourceRoot":"/source/"}
View
@@ -0,0 +1,13 @@
+.turntable {
+ display: inline-block;
+ margin: 0px; }
+.turntable ul {
+ padding: 0px;
+ margin: 0px; }
+.turntable ul li {
+ list-style-type: none;
+ display: none; }
+.turntable ul li img {
+ width: 100%; }
+.turntable ul li.active {
+ display: block; }
View
@@ -2,12 +2,12 @@
<html>
<head>
<title>Hello, World</title>
- <link rel="stylesheet" type="text/css" href="css/normalize.css">
- <link rel="stylesheet" type="text/css" href="css/main.css">
+<!-- <link rel="stylesheet" type="text/css" href="css/normalize.css">
+ --> <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
-
- <div class="turntable" data-axis="">
+
+ <div id="turntable" class="turntable">
<ul>
<li data-img-src="./images/0.jpg"></li>
<li data-img-src="./images/1.jpg"></li>
@@ -27,9 +27,21 @@
<li data-img-src="./images/15.jpg"></li>
<li data-img-src="./images/16.jpg"></li>
<li data-img-src="./images/17.jpg"></li>
+ <li data-img-src="./images/0.jpg"></li>
</ul>
</div>
+ <!-- jQuery CDN -->
+ <script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
+ <!-- Turntable jQuery Plugin -->
<script src="js/main.js"></script>
+
+ <!-- Plugin Use Case -->
+ <script type="text/javascript">
+
+ $('#turntable').turntable({axis: 'x'});
+
+ </script>
+
</body>
</html>
View
No changes.
Oops, something went wrong.

0 comments on commit 47bcdd4

Please sign in to comment.