Permalink
Browse files

Replaced confusing img vars as the carousel can handle everything fro…

…m now on (not only images).

Added new demo slide with text.
Added new option stopOnHover that stops the carousel on mouseover and starts it again on mouseout.
  • Loading branch information...
1 parent 8735da3 commit baef37193a4162f07322e9df2223d88bedbba7c8 Glavan Dumitru committed Mar 16, 2011
Showing with 50 additions and 26 deletions.
  1. +2 −0 assets/carousel.css
  2. +40 −23 assets/jquery.doomCarousel.js
  3. +8 −3 demo.html
  4. BIN pics/chuck-norris.jpg
View
2 assets/carousel.css
@@ -1,4 +1,6 @@
#doom-carousel {
+ width: 500px;
+ overflow: hidden;
}
#doom-carousel a {
View
63 assets/jquery.doomCarousel.js
@@ -1,11 +1,11 @@
/**
* Doom Carousel
*
-* A sliding carousel for images.
+* A sliding carousel NOT only for images. :)
*
* @author Dumitru Glavan
* @link http://dumitruglavan.com
-* @version 1.1
+* @version 1.2
* @requires jQuery v1.3.2 or later
*
* Examples and documentation at: http://dumitruglavan.com/jquery-doom-carousel-plugin/
@@ -21,16 +21,17 @@
$.fn.doomCarousel = function (options) {
this.config = {leftBtn:'a.doom-carousel-left-btn',
rightBtn:'a.doom-carousel-right-btn',
- imgList:'ul.doom-carousel-list',
- imgListCnt: 'div.doom-carousel-cnt',
+ itemList:'ul.doom-carousel-list',
+ itemListCnt: 'div.doom-carousel-cnt',
transitionType:'slide',
slideSpeed:'800',
easing:'swing',
autoSlide:true,
slideDuration:3000,
- imgWidth:0,
+ itemWidth:0, // Deprecated
showNav:true,
showCaption:true,
+ stopOnHover:true,
onLoad:null
};
$.extend(this.config, options);
@@ -42,66 +43,72 @@
this.leftBtn = $(this.config.leftBtn + ':first', $self);
this.rightBtn = $(this.config.rightBtn + ':first', $self);
this.leftBtn.click(function () {
- if (self.slideInterval) {clearInterval(self.slideInterval);}
self.slideCarousel('left');
- self.setSlideInterval();
return false;
});
this.rightBtn.click(function () {
- if (self.slideInterval) {clearInterval(self.slideInterval);}
self.slideCarousel('right');
- self.setSlideInterval();
return false;
});
} else {
$(this.config.leftBtn, $self).remove();
$(this.config.rightBtn, $self).remove();
}
- this.imgListCnt = $(this.config.imgListCnt + ':first', $self);
- this.imgList = $(this.config.imgList + ':first', $self);
+ this.itemListCnt = $(this.config.itemListCnt + ':first', $self);
+ this.itemList = $(this.config.itemList + ':first', $self);
- var totalImages = $('li', $self);
- this.config.imgWidth = this.config.imgWidth || totalImages.width();
- this.imgList.width(totalImages.length * this.config.imgWidth);
+ var totalItems = $('li', $self);
+ this.config.itemWidth = this.config.itemWidth || totalItems.width();
+ this.itemList.width(totalItems.length * this.config.itemWidth);
if (this.config.showCaption) {
- this.imgLinks = $('a', self.imgListCnt);
- this.imgLinks.each(function (index, el) {
+ this.itemLinks = $('a', self.itemListCnt);
+ this.itemLinks.each(function (index, el) {
var title = $(el).attr('title').replace('{#', '<').replace('#}', '>').replace('!#', '"');
$(el).attr('title', title.replace(/(<([^>]+)>)/ig,""));
$('<div class="doom-pic-title">' + title + '</div>').appendTo(el);
});
}
+ this.itemListCnt.scrollLeft(0);
+
self.setSlideInterval();
$.isFunction(this.config.onLoad) && this.config.onLoad(this);
+ if (this.config.autoSlide && this.config.stopOnHover) {
+ $(this).mouseover(function () {
+ self.clearSlideInterval();
+ }).mouseout(function () {
+ self.setSlideInterval();
+ });
+ }
+
return this;
},
$.fn.slideCarousel = function (to) {
var self = this;
- var $imgListCnt = self.imgListCnt;
+ var $itemListCnt = self.itemListCnt;
to = typeof(to) !== 'string' ? 'right' : to;
to = to === 'left' ? '-' : '+';
- var moveSize = (self.imgList.width() === ($imgListCnt.scrollLeft() + self.config.imgWidth)) ? 0 : self.config.imgWidth;
+ var moveSize = (self.itemList.width() === ($itemListCnt.scrollLeft() + self.config.itemWidth)) ? 0 : self.config.itemWidth;
switch (self.config.transitionType) {
case 'slide':
moveSize = moveSize ? to + '=' + moveSize : moveSize;
- $imgListCnt.animate({'scrollLeft':moveSize}, self.config.slideSpeed, self.config.easing);
+ $itemListCnt.animate({'scrollLeft':moveSize}, self.config.slideSpeed, self.config.easing);
break;
case 'fade':
- moveSize = moveSize ? $imgListCnt.scrollLeft() + ~~(+ (to + moveSize)) : moveSize;
- self.imgList.fadeTo(self.config.easing, 0, function () {$imgListCnt.scrollLeft(moveSize);self.imgList.fadeTo(self.config.easing, 1)});
+ moveSize = moveSize ? $itemListCnt.scrollLeft() + ~~(+ (to + moveSize)) : moveSize;
+ self.itemList.fadeTo(self.config.easing, 0, function () {$itemListCnt.scrollLeft(moveSize);self.itemList.fadeTo(self.config.easing, 1)});
break;
default:
- moveSize = moveSize ? $imgListCnt.scrollLeft() + ~~(+ (to + moveSize)) : moveSize;
- $imgListCnt.scrollLeft(moveSize);
+ moveSize = moveSize ? $itemListCnt.scrollLeft() + ~~(+ (to + moveSize)) : moveSize;
+ $itemListCnt.scrollLeft(moveSize);
break;
}
},
@@ -110,6 +117,16 @@
if (this.config.autoSlide) {
var self = this;
self.slideInterval = setInterval(function () {self.slideCarousel('right');}, self.config.slideDuration);
+ return self.slideInterval;
+ }
+ return false;
+ },
+
+ $.fn.clearSlideInterval= function () {
+ if (this.slideInterval) {
+ var intId = this.slideInterval;
+ return clearInterval(intId);
}
+ return false;
}
})(jQuery);
View
11 demo.html
@@ -20,6 +20,7 @@
<li><a href="#" title="Article 3 {#br /#} by Chuck Norris"><img src="pics/3.jpg" alt="Car 3" class="doom-carousel-pic" /></a></li>
<li><a href="#" title="Article 4 {#br /#} by Chuck Norris"><img src="pics/4.jpg" alt="Car 4" class="doom-carousel-pic" /></a></li>
<li><a href="#" title="Article 5 {#br /#} by Chuck Norris"><img src="pics/5.jpg" alt="Car 5" class="doom-carousel-pic" /></a></li>
+ <li><p><img src="pics/chuck-norris.jpg" alt="Approved by Chuck Norris" class="doom-carousel-pic" /></p><p>From now on you can store text and images in your carousel!</p></li>
</ul>
</div>
<a href="#right" title="Right" class="doom-carousel-right-btn"><span>Next</span></a>
@@ -65,9 +66,9 @@
<dd>
Sets the timing for autosliding.
</dd>
- <dt><b>imgWidth</b> (0):</dt>
+ <dt><b>itemWidth</b> (0): (deprecated)</dt>
<dd>
- By default carousel tries to detect the img width automaticaly. It's good to set this if you encounter some problems with the slider.
+ By default carousel tries to detect the item width automaticaly. Normaly you don't need to specify it if you set it in CSS.
</dd>
<dt><b>showNav</b> (true):</dt>
<dd>
@@ -77,6 +78,10 @@
<dd>
Show title caption on slider.
</dd>
+ <dt><b>stopOnHover</b> (true):</dt>
+ <dd>
+ Stop carousel on mouseover so the user can view the slide content. Start the carousel on mouseout.
+ </dd>
<dt><b>onLoad</b> (null):</dt>
<dd>
Callback function that is called after the carousel is loaded and started.
@@ -117,7 +122,7 @@
<script type="text/javascript">
$(document).ready(function () {
- $('#doom-carousel').doomCarousel({easing:'easeInOutQuad', imgWidth:500});
+ $('#doom-carousel').doomCarousel({easing:'easeInOutQuad'});
});
</script>
View
BIN pics/chuck-norris.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit baef371

Please sign in to comment.