Simple jQuery Plugin For Content Swiping - dragend.js

dragend.js is a simple jQuery plugin that allows you to add mouse/finger swipe support to your webpage. It also supports using hammer.js for observing multi-touch gestures. With this plugin, you can create a Yahoo wether like page swiping.

Related Plugins:

• Lightweight Mobile Slider - Swipe

Basic Usage:

1. Create a swipable gallery on your webpage

<div id="gallery">
<ul>
<li>
<div class="item"> <img src="1.jpg" alt="" draggable="false"> </div>
</li>
<li>
<div class="item"> <img src="2.jpg" alt="" draggable="false"> </div>
</li>
<li>
<div class="item"> <img src="3.jpg" alt="" draggable="false"> </div>
</li>
</ul>
</div>

2. The CSS

#gallery {
list-style: none;
width: 320px;
height: 482px;
background: #111;
cursor: hand;
cursor: -moz-grab;
cursor: -webkit-grab;
cursor: grab;
}
#gallery li {
border-right: 5px solid #111;
}
#gallery .item {
height: 482px;
}
#gallery li:last-child {
border: 0;
}
#gallery .item img {
display: block;
height: 482px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-user-drag: none;
user-drag: none;
}

3. Include jQuery library and jQuery dragend.js on the page

<script type="text/javascript" src="jquery-1.9.1.min.js"></script> 
<script type="text/javascript" src="jquery.dragend-0.1.2.min.js"></script> 

4. Include jquery hammer for gestures support

<script type="text/javascript" src="jquery.hammer-1.0.5.min.js"></script> 

5. The javascript

<script>

    $(function() {
      $("#gallery").dragend({
        borderBetweenPages: 5,
        onDrag: function( activeElement, gesture, overscroll ) {
          var deltaX = parseInt( - gesture.deltaX / 2 );

          if ( overscroll ) {
            deltaX = deltaX / 5;
          }

          $(activeElement).prev().find("img").css("margin-left", deltaX + 160 );
          $(activeElement).find("img").css("margin-left", deltaX);
          $(activeElement).next().find("img").css("margin-left", deltaX - 160 );
        },
        onDragEnd: function( activeElement ) {
          $(activeElement).prev().find("img").animate({
            "margin-left": 160
          }, 300);
          $(activeElement).find("img").animate({
            "margin-left": 0
          }, 300);
          $(activeElement).next().find("img").animate({
            "margin-left": - 160
          }, 300);
        }
      });

      $(document).on("dragstart", function(event) {
        if (event.target.nodeName.toUpperCase() == "IMG") {
          return false;
        }
      });
    });

  </script>

Change log:

v0.1.3 (2013-06-15)

• fixed bug when adding new pages and updating the instance
• add simple demo

---

This awesome jQuery plugin is developed by Stereobit. For more Advanced Usages, please check the demo page or visit the official website.