Browse files

Messing around with touch events--soon to be overwritten.

  • Loading branch information...
1 parent 187df52 commit e89fd059e4f09eb270548bc856c9954b2b4e8997 @Wilto committed Jan 19, 2011
Showing with 69 additions and 49 deletions.
  1. +29 −1 demo.html
  2. +40 −48 plugin.js
View
30 demo.html
@@ -5,7 +5,6 @@
<title>Carousel Plugin</title>
<meta name="description" content="There are many like it, but this one is mine." />
- <link rel="stylesheet" href="css/style.css" media="screen" />
<style type="text/css" media="screen">
ul { margin: 0; padding: 0; list-style: none; }
a.disabled { color: #aaa; }
@@ -46,6 +45,35 @@
</ul>
</div>
+ <div class="slidewrap">
+ <ul class="slidecontrols">
+ <li><a href="#slider2" class="next">Next</a></li>
+ <li><a href="#slider2" class="prev">Prev</a></li>
+ </ul>
+ <ul class="slider" id="slider2">
+ <li class="slide">
+ <h2>First Slide</h2>
+ <p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget, scelerisque a libero.</p>
+ </li>
+ <li class="slide">
+ <h2>Second Slide</h2>
+ <p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien.</p>
+ </li>
+ <li class="slide">
+ <h2>Third Slide</h2>
+ <p>Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget.</p>
+ </li>
+ <li class="slide">
+ <h2>Fourth Slide</h2>
+ <p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio.</p>
+ </li>
+ <li class="slide">
+ <h2>Fif' Slide</h2>
+ <p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien.</p>
+ </li>
+ </ul>
+ </div>
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="plugin.js"></script>
<script type="text/javascript" charset="utf-8">
View
88 plugin.js
@@ -7,76 +7,68 @@
nextSlide: '.next',
speed: 500
},
- opt = $.extend(defaults, config);
- transitionSupport = document.body.style.webkitTransition !== undefined ||
- document.body.style.MozTransition !== undefined ||
- document.body.style.msTransition !== undefined ||
- document.body.style.OTransition !== undefined ||
- document.body.style.transition !== undefined;
+ opt = $.extend(defaults, config),
+ dStyle = document.body.style,
+ transitionSupport = dStyle.webkitTransition !== undefined ||
+ dStyle.MozTransition !== undefined ||
+ dStyle.msTransition !== undefined ||
+ dStyle.OTransition !== undefined ||
+ dStyle.transition !== undefined;
$(opt.prevSlide).addClass('disabled');
- function moveNext($slider) {
+ function move($slider, direction) {
var leftmargin = $slider.attr('style').match(/margin\-left: ?(.*)%;/) && parseFloat(RegExp.$1),
$slide = $slider.find(opt.slide);
- if (!$slider.is(":animated") && (-leftmargin) != (($slide.length - 1) * 100)) {
- leftmargin -= 100;
- if(transitionSupport) {
- $slider.css('marginLeft', leftmargin + "%");
+ if(!$slider.is(":animated")) {
+ if(direction == 'next') {
+ leftmargin -= 100;
} else {
- $slider.animate({ marginLeft: leftmargin + "%" }, opt.speed);
+ leftmargin += 100;
}
- if((-leftmargin) == ($slide.length - 1) * 100) {
- return false;
- }
- }
- }
-
- function movePrev($slider) {
- var leftmargin = $slider.attr('style').match(/margin\-left: ?(.*)%;/) && parseFloat(RegExp.$1);
-
- if(!$slider.is(":animated") && (leftmargin != 0)) {
- leftmargin += 100;
+
if(transitionSupport) {
$slider.css('marginLeft', leftmargin + "%");
} else {
$slider.animate({ marginLeft: leftmargin + "%" }, opt.speed);
- }
- if(leftmargin == 0) {
+ }
+
+ if((-leftmargin) == ($slide.length - 1) * 100 || leftmargin == 0) {
return false;
}
}
}
+
$(opt.nextSlide + ',' + opt.prevSlide).click(function(e) {
var $el = $(this),
link = $el.attr('href'),
$target = $(opt.slider).filter(link);
-// $target = $(opt.slider).filter("[data-slider='" + $el.attr('data-slider') + "']");
-
- $(opt.nextSlide).each(function() {
- if($(this)[0] == $el[0]) {
- if(moveNext($target) === false) {
- $el.addClass('disabled');
- };
- $(opt.prevSlide).filter(function() {
- return this.getAttribute('href') === link;
- }).removeClass('disabled');
- }
- });
-
- $(opt.prevSlide).each(function() {
- if($(this)[0] == $el[0]) {
- if(movePrev($target) === false) {
- $el.addClass('disabled');
- };
- $(opt.nextSlide).filter(function() {
- return this.getAttribute('href') === link;
- }).removeClass('disabled');
- }
- });
+
+ if(!$el.hasClass('disabled')) {
+ $(opt.nextSlide).each(function() {
+ if(this == $el[0]) {
+ if(move($target, 'next') === false) {
+ $el.addClass('disabled');
+ };
+ $(opt.prevSlide).filter(function() {
+ return this.getAttribute('href') === link;
+ }).removeClass('disabled');
+ }
+ });
+ $(opt.prevSlide).each(function() {
+ if(this == $el[0]) {
+ if(move($target, 'prev') === false) {
+ $el.addClass('disabled');
+ };
+ $(opt.nextSlide).filter(function() {
+ return this.getAttribute('href') === link;
+ }).removeClass('disabled');
+ }
+ });
+ }
e.preventDefault();
});

0 comments on commit e89fd05

Please sign in to comment.