Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
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...
commit baef37193a4162f07322e9df2223d88bedbba7c8 1 parent 8735da3
Glavan Dumitru authored
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,16 +43,12 @@
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 {
@@ -59,49 +56,59 @@
$(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.
Please sign in to comment.
Something went wrong with that request. Please try again.