Merge branch 'rleeson-master'

snake-345 · Feb 7, 2016 · efed338 · efed338
2 parents c53c063 + b97c0cb
commit efed338
Show file tree

Hide file tree

Showing 8 changed files with 218 additions and 6 deletions.
diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "jcarouselSwipe",
   "main": "./dist/jquery.jcarousel-swipe.js",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "authors": [
     "Evgeniy Pelmenev <[email protected]>"
   ],

diff --git a/dist/jquery.jcarousel-swipe.js b/dist/jquery.jcarousel-swipe.js
@@ -1,4 +1,4 @@
-/*! jсarouselSwipe - v0.2.1 - 2015-12-10
+/*! jсarouselSwipe - v0.2.0 - 2015-12-10
 * Copyright (c) 2015 Evgeniy Pelmenev; Licensed MIT */
 (function($) {
     'use strict';
@@ -23,7 +23,6 @@
                 .css('user-select', 'none')
                 .on('dragstart', function(event) { event.preventDefault() });
 
-
             this._destroy();
 
             if (this._instance.items().length > this._instance.fullyvisible().length) {

diff --git a/examples/README.md b/examples/README.md
@@ -8,6 +8,7 @@ The source code including examples can be downloaded from the
 * [Connected Carousels](connected-carousels/)
 * [Carousel using CSS3 Transitions](transitions/)
 * [Responsive Carousel](responsive/)
+* [Responsive Carousel with Item Links](responsive-item-links/)
 * [Carousel using data-* attributes for initialization and configuration](data-attributes/)
 * [Ajax Carousel](ajax/)
 * [Carousel Skeleton](skeleton/)
diff --git a/examples/responsive-item-links/index.html b/examples/responsive-item-links/index.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Responsive Carousel with Item Links - jCarousel Examples</title>
+
+        <!-- Shared assets -->
+        <link rel="stylesheet" type="text/css" href="../_shared/css/style.css">
+
+        <!-- Example assets -->
+        <link rel="stylesheet" type="text/css" href="jcarousel.responsive.css">
+
+        <script type="text/javascript" src="../../bower_components/jquery/dist/jquery.min.js"></script>
+        <script type="text/javascript" src="../../bower_components/jcarousel/dist/jquery.jcarousel.min.js"></script>
+        <script type="text/javascript" src="../../dist/jquery.jcarousel-swipe.js"></script>
+        <script type="text/javascript" src="jcarousel.responsive.js"></script>
+    </head>
+    <body>
+        <div class="wrapper">
+            <h1>Responsive Carousel with Item Links</h1>
+            <p>This example shows how to implement a responsive carousel which has inner items wrapped in links. Resize the browser window to see the effect.</p>
+            <div class="jcarousel-wrapper">
+                <div class="jcarousel">
+                    <ul>
+                        <li><a href="../_shared/img/img1.jpg"><img src="../_shared/img/img1.jpg" alt="Image 1"></a></li>
+                        <li><a href="../_shared/img/img2.jpg"><img src="../_shared/img/img2.jpg" alt="Image 2"></a></li>
+                        <li><a href="../_shared/img/img3.jpg"><img src="../_shared/img/img3.jpg" alt="Image 3"></a></li>
+                        <li><a href="../_shared/img/img4.jpg"><img src="../_shared/img/img4.jpg" alt="Image 4"></a></li>
+                        <li><a href="../_shared/img/img5.jpg"><img src="../_shared/img/img5.jpg" alt="Image 5"></a></li>
+                        <li><a href="../_shared/img/img6.jpg"><img src="../_shared/img/img6.jpg" alt="Image 6"></a></li>
+                        <li><a href="../_shared/img/img1.jpg"><img src="../_shared/img/img1.jpg" alt="Image 1"></a></li>
+                        <li><a href="../_shared/img/img2.jpg"><img src="../_shared/img/img2.jpg" alt="Image 2"></a></li>
+                        <li><a href="../_shared/img/img3.jpg"><img src="../_shared/img/img3.jpg" alt="Image 3"></a></li>
+                        <li><a href="../_shared/img/img4.jpg"><img src="../_shared/img/img4.jpg" alt="Image 4"></a></li>
+                    </ul>
+                </div>
+                <a href="#" class="jcarousel-control-prev">&lsaquo;</a>
+                <a href="#" class="jcarousel-control-next">&rsaquo;</a>
+                <p class="jcarousel-pagination"></p>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/examples/responsive-item-links/jcarousel.responsive.css b/examples/responsive-item-links/jcarousel.responsive.css
@@ -0,0 +1,117 @@
+.jcarousel-wrapper {
+    margin: 20px auto;
+    position: relative;
+    border: 10px solid #fff;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    -webkit-box-shadow: 0 0 2px #999;
+    -moz-box-shadow: 0 0 2px #999;
+    box-shadow: 0 0 2px #999;
+}
+
+/** Carousel **/
+
+.jcarousel {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+}
+
+.jcarousel ul {
+    width: 20000em;
+    position: relative;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.jcarousel li {
+    width: 200px;
+    float: left;
+    border: 1px solid #fff;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.jcarousel img {
+    display: block;
+    max-width: 100%;
+    height: auto !important;
+}
+
+/** Carousel Controls **/
+
+.jcarousel-control-prev,
+.jcarousel-control-next {
+    position: absolute;
+    top: 50%;
+    margin-top: -15px;
+    width: 30px;
+    height: 30px;
+    text-align: center;
+    background: #4E443C;
+    color: #fff;
+    text-decoration: none;
+    text-shadow: 0 0 1px #000;
+    font: 24px/27px Arial, sans-serif;
+    -webkit-border-radius: 30px;
+    -moz-border-radius: 30px;
+    border-radius: 30px;
+    -webkit-box-shadow: 0 0 4px #F0EFE7;
+    -moz-box-shadow: 0 0 4px #F0EFE7;
+    box-shadow: 0 0 4px #F0EFE7;
+}
+
+.jcarousel-control-prev {
+    left: 15px;
+}
+
+.jcarousel-control-next {
+    right: 15px;
+}
+
+/** Carousel Pagination **/
+
+.jcarousel-pagination {
+    position: absolute;
+    bottom: -40px;
+    left: 50%;
+    -webkit-transform: translate(-50%, 0);
+    -ms-transform: translate(-50%, 0);
+    transform: translate(-50%, 0);
+    margin: 0;
+}
+
+.jcarousel-pagination a {
+    text-decoration: none;
+    display: inline-block;
+
+    font-size: 11px;
+    height: 10px;
+    width: 10px;
+    line-height: 10px;
+
+    background: #fff;
+    color: #4E443C;
+    border-radius: 10px;
+    text-indent: -9999px;
+
+    margin-right: 7px;
+
+
+    -webkit-box-shadow: 0 0 2px #4E443C;
+    -moz-box-shadow: 0 0 2px #4E443C;
+    box-shadow: 0 0 2px #4E443C;
+}
+
+.jcarousel-pagination a.active {
+    background: #4E443C;
+    color: #fff;
+    opacity: 1;
+
+    -webkit-box-shadow: 0 0 2px #F0EFE7;
+    -moz-box-shadow: 0 0 2px #F0EFE7;
+    box-shadow: 0 0 2px #F0EFE7;
+}
diff --git a/examples/responsive-item-links/jcarousel.responsive.js b/examples/responsive-item-links/jcarousel.responsive.js
@@ -0,0 +1,52 @@
+(function($) {
+    $(function() {
+        var jcarousel = $('.jcarousel');
+
+        jcarousel
+            .on('jcarousel:reload jcarousel:create', function () {
+                var carousel = $(this),
+                    width = carousel.innerWidth();
+
+                if (width >= 600) {
+                    width = width / 3;
+                } else if (width >= 350) {
+                    width = width / 2;
+                }
+
+                carousel.jcarousel('items').css('width', Math.ceil(width) + 'px');
+            })
+            .jcarousel({
+                wrap: 'circular'
+            })
+            .jcarouselSwipe({
+                perSwipe: 3
+            });
+
+        $('.jcarousel-control-prev')
+            .jcarouselControl({
+                target: '-=1'
+            });
+
+        $('.jcarousel-control-next')
+            .jcarouselControl({
+                target: '+=1'
+            });
+
+        $('.jcarousel-pagination')
+            .on('jcarouselpagination:active', 'a', function() {
+                $(this).addClass('active');
+            })
+            .on('jcarouselpagination:inactive', 'a', function() {
+                $(this).removeClass('active');
+            })
+            .on('click', function(e) {
+                e.preventDefault();
+            })
+            .jcarouselPagination({
+                perPage: 1,
+                item: function(page) {
+                    return '<a href="#' + page + '">' + page + '</a>';
+                }
+            });
+    });
+})(jQuery);
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jcarouselSwipe",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "description": "Adds comfortable swipe gestures to jcarousel",
   "author": "Evgeniy Pelmenev <[email protected]>",
   "license": "MIT",

diff --git a/src/jquery.jcarousel-swipe.js b/src/jquery.jcarousel-swipe.js
@@ -1,4 +1,4 @@
-/*! jсarouselSwipe - v0.2.1 - 2015-12-10
+/*! jсarouselSwipe - v0.2.0 - 2015-12-10
 * Copyright (c) 2015 Evgeniy Pelmenev; Licensed MIT */
 (function($) {
     'use strict';
@@ -23,7 +23,6 @@
                 .css('user-select', 'none')
                 .on('dragstart', function(event) { event.preventDefault() });
 
-
             this._destroy();
 
             if (this._instance.items().length > this._instance.fullyvisible().length) {