Here it is. The best jQuery carousel EVA!
We are very sorry for the inconvenience and the design. We have problems with the hosting and we hope that we’ll straight them out soon. Thank you for the understanding
After long time of struggling with bugs and procrastination, I finally finished the best carousel of all time! There are some custom and proprietary non open source plugins like this, but with limited functionality and custom implementation. Mine is easy to implement, highly customizable and works with images and DOM too.
Anyway i will start with an example of the plugin:
Here is how you implement it:
$('#carouselthreed').carousel3D({
speed: 900,
perspectiveZoom: 70,
sideOffset: 80,
topOffset:0,
secondaryOpacity: .35,
emClass:'tdc-element'
})
HTML:
<div id="carouselthreed">
<img class="tdc-element" src="img/fly.jpg" alt="">
<img class="tdc-element" src="img/gates.jpg" alt="">
<img class="tdc-element" src="img/penguins.jpg" alt="">
</div>
The settings object attributes are:
speed - Speed of animation in milliseconds (default 350)
perspectiveZoom - Percentage of secondary element's sizes relative to primary element (default 80)
sideOffset - Offset of secondary elements (default 70)
topOffset - Offset from top of secondary elements (default 0)
secondaryOpacity - Opacity of secondary elements (default 0.8)
emClass - CSS class of elements that will rotate (images/dom) (default "tdc-element")
Any of those attributes can be omitted and default values will be used. For reference, the second element in the container is taken, it is the central element and all other elements are resized relative to it. It works with unlimited number of elements.
You can download the plugin here and you only need the jquery library.
Enjoy!
18 Responses
to “Here it is. The best jQuery carousel EVA!”
1 Trackback(s)
- Mar 3, 2010: Webowe karuzele – rozeznanie. / … w naszym laboratorium
hi
font size in comment box is the same as background color
i cant read what I write.
how can I autorotated?
hi
cant read my text ….
how can i set it up that it does autorotating? for example it should rotate in 1 direction every 3 seconds?
thank you
bs
autorotation:
$(document).ready(function(){
$(’#carouselthreed’).carousel3D({
autorotate: false,
autorotatespeed: 3000,
speed: 4000,
perspectiveZoom: 50,
sideOffset: 20,
secondaryOpacity: .50,
emClass:’tdc-element’
})
});
add to JS file bevore the click function (I also changed to hover)
if(settings.autorotate) {
setInterval(function(){
if(mutex) {
return;
}
if(this === elements[0]) {
transit(false);
}
else {
transit(true)
}
}, settings.autorotatespeed);
}
also extend settings at the top:
var settings = $.extend({
autorotate: true,
autorotatespeed: 3000,
….
hi,
great pugin! but there is a problem: at first call of the page is nothing to see, I’ve to reload the page to see the carousel.
embed the JS code in the body
hi,
i embed the JS in the body like this
$(document).ready(function(){
$(’#carouselthreed’).carousel3D({
speed: 900,
perspectiveZoom: 80,
sideOffset: 180,
secondaryOpacity: .5,
emClass:’tdc-element’
})
});
but i still have to reload the every time to see the carousel, any idea ?
@jo The problem usually is the image loading. Try embedding the javascript on the bottom of
or set the initial css with a rule.@Josef I will post autorotating version very soon, with choice for the side and speed of autorotation. I might even move the blog before that.
@all Again. I am sooo sorry for the inconvenience. We have problems with the hosting and financial hole at the moment, but we are working on it and hope that we will resolve these issues fast. Thank you for your understanding.
what do you mean by setting a rule to the css ?
#carouselthreed{
height: 200px;
position: relative;
}
.tdc-element{
cursor: pointer;
position: absolute;
}
The initial style can be added before loading the plugin so that there is no lag. Open the carousel, let it load, inspect the images “tdc-element” and copy the style attribute. Then just paste it according to the image in each tdc-element in the DOM.
i tried many things what you said and more but still have to relaod.
Is possible to load pics before ?
@jo There are several jq plugins for preloading images and/or javascript. See if you can deffer the carousel function after image loading.
Try to put the plugin and the invocation at the bottom of the
.FYI i use your plugin with drupal.
Thanks for your time anyway.
hi dejan,
I have some special wishes, modifications that I need for this plugin.
I’ll pay for your work, so please contact me if you are interessted.
thx
daniel
Hi, I want to know if it’s possible that in the front image, we have an external link, only in the front image, calling to another page.. Thaks a lot, Melissa
bluuuurrrrre after half an hour or so i give up…
Firebug points this out to me…
ng[this.options.easing || (o.easing.swing ? "swing" : "linear")] is not a function
[Break on this error] (function(){var R=/((?:\((?:\([^()]+\)…,typeof K===”string”?K:K+”px”)}})})();