When I used the vertical scroll, the carousel was out of sync by a couple of pixels each time it rotates in IE 7.

I put a workaround on my site. You can find it here
http://marcellscarlett.com/post/2010/02/11/jCarousellite-in-IE-7.aspx

Hello, I have used jcarousel-lite in my portfolio website found here: http://bradcoker.co.uk

I’m using the external controls with btnGo. I was wondering if anyone could point me in the right direction on how to highlight the current button corresponding to the current image?

Thank you!

Is there a way to stop the animation after a configurable number of cycles?

Script has some bugs with content that contains HTML list tags (like ul, li, ol etc).
Fix:

replace
1. “var div = $(this), ul = $(“ul”, div), tLi = $(“li”, ul), tl = tLi.size(), v = o.visible;”
2. “var li = $(“li”, ul), itemLength = li.size(), curr = o.start;”

with
1. “var div = $(this), ul = $(this).children(“ul”), tLi = $(ul).children(“li”), tl = tLi.size(), v = o.visible;”
2. “var li = $(ul).children(“li”), itemLength = li.size(), curr = o.start;”

I tried to use “btnGo” navigation tool to scroll to some element. So, my script looks like:

$(function() {
var control = [];
control[0] = ‘.slider_control .r1’;
control[4] = ‘.slider_control .r2’;
control[8] = ‘.slider_control .r3’;
control[12] = ‘.slider_control .r4’;
control[16] = ‘.slider_control .r5’;
control[23] = ‘.slider_control .r6’;
$(“.cat_slider”).jCarouselLite({
btnNext: “#m_right”,
btnPrev: “#m_left”,
visible: 4,
btnGo: control
});
});

It didnt work fine.

fix:
if(o.btnGo)
$.each(o.btnGo, function(i, val) {
if ( val != undefined)
{
$(val).click(function() {
return go(o.circular ? o.visible+i : i);
});
}
});

If you want to scroll to any position after document will be loaded, just add this code.
( “scrollTo” is new plugin attribute that points to element index )

if ( o.scrollTo )
go(o.circular ? o.visible+o.scrollTo : o.scrollTo);

BTW: I’m using Opera 10.10, IE 6 seems to be 10px each.

is there any way to load images on demand? with ajax or something?

Hi Ganeshji,

Thank you very much for the plugin! I am trying to get the carousel to stop auto sliding on the last image in the list. I tried to do this by changing, “afterEnd: null” to, “afterEnd: stop” but it is stopping on the second image (and there are four in the list). Any ideas? Thanks again!

@Mark #477: I think you forgot to mention something, as I was having problems incorporating your changes until I found out.

You need to edit the width function, to send the correct variables to the modified css function.

P.S. i’m editing the original version, not minified.

so my code looks like:

function css(el, prop) {
//return parseInt($.css(el[0], prop)) || 0; //original
return parseInt($.css(el, prop)) || 0;
};

function width(el) {
//return el[0].offsetWidth + css(el, ‘marginLeft’) + css(el, ‘marginRight’);//original
return el[0].offsetWidth + css(el[0], ‘marginLeft’) + css(el[0], ‘marginRight’);
};

function height(el) {
//return el[0].offsetHeight + css(el, ‘marginTop’) + css(el, ‘marginBottom’); original
var z = 0;
for (y = 0; y z) z = x;
}
return z;
};

Can you help me when mouse over animation must stop and when mouseout it must resume the animation. Thanks in advance.

I like the the jCarouselLite.

There is one thing that looks strange – the size of list and indexes of its items.

I’ve got list of 8 thumbnails, but when I ask for the list size with ‘$(“.carousel .thumbnails li”).size()’, it returns 16.
In function called on click I save current index to global variable – currentIndex = $(“.carousel .thumbnails img”).index(this) – it seemss that the first thumbnail has index 0 when the page loads but when I click on it second time, it has index 4 …

What I’m trying to do is to do is to switch to next/previous item in list by clicking on right/left side of big image (carousel contains thumbnails). Is it some easy way how to “click” on next/prev item in list ?

It’s working for me in changing this code :

} else { // If non-circular and to points to first or last, we just return.
if(toitemLength-v) return;
else curr = to;
} // If neither overrides it, the curr will still be “to” and we can proceed.

to this code :

} else { // If non-circular and to points to first or last, we just return.
if(to == itemLength-v) return;
else if(to>itemLength-v) curr = itemLength-v;
else if(to<0) curr = 0;
else curr = to;
} // If neither overrides it, the curr will still be "to" and we can proceed.

But I don't if bugs will appear in other configurations…

Hey man, this plugin seems great. I’m trying to reduce the number of scripts I include on my site and this seems like it will replace 3 other jquery plugins I was using.

I will need to use the ‘external controls’ features and I think I have it figured out but wanted to let you know that the documentation about it in the demo is kind of confusing. In the demo page for External Controls you just say ” Buttons, buttons and more buttons. Feel free… “. This is cute and all but the example code isn’t that obvious, and I think it would be better if you gave a brief description of how it works and what the contents of the btnGo parameter mean. I looked at the parameter documentation and that explained it okay but it would be nice if the demo also had the explanation.

Anyway, I love the humor in your other demos, so don’t think I’m saying it should be too serious, just that that particular one could handle some extra data 🙂

Thanks for making the plugin!

$.getJSON(url,
Hi,

I am retrieving the image data using ajax/json.

function(data) {
$.each(data, function(i, item) {
$(“#carousel ul”).append(““);
});
});

I am returning a random 10 images from a database and then adding to the carousel (see below). This all works fine. However I also have another button to load another 10 images in, if i click this which clears the current li elements, loads 10 more and then calls the $(“#carousel”).jCarouselLite({}); method again the previous/next buttons go a bit nuts. I am thinking I need to “unhook” the carousel before calling this method? any ideas?

First, this is a fantastic plugin. Very much appreciated.

One question. Is there a way to hard code a button/link on the page that would force the carousel to move to a precise image. For example, I want to create a button named “Go to 4” that when clicked will move the carousel so that the Fourth image is the first one showing. But…I don’t want buttons for 1,2,3,5,6,7,8,etc….just one button to move the carousel to the fourth image.

Help would be appreciated.

Hello,

Awesome code sir! I just spent no word of a lie about 5 hours trying to get another persons code going and when I came across yours I was up and running within minutes.

I just have one question that would make this perfect.

Is it possible for the gallery to start at the last photo and work backwards?

I am creating a comic viewer and I would like my audience to see the latest page first and work backward.

As well, is there an easy way to make a “jump to start/end” button?

Thanks and I really appreciate all the hard work.

CLM

Hi! Amazing plugin!

However, I run to a big problem and don’t know how to solve it. I’m pulling dinamically images from database with php and so create array (li array) … the problem is when one image is wider than other, carousel will display the same width. Any help!? Thanx!

This is a really nice plugin. I had to make the amends suggested by hpirator to make the non-circular carousel work and to fix the ‘disabled’ class addition.

Can I suggest that these are added to the trunk?

I also had to tweak the code to make the ‘previous’ link disabled on init

// original
if(o.btnPrev)
$(o.btnPrev).click(function() {
return go(curr-o.scroll);
});

// fix
if(o.btnPrev) {
$(o.btnPrev).click(function() {
return go(curr-o.scroll);
});
if (o.start==0)
$(o.btnPrev).addClass(‘disabled’);
}

Also have a couple of other minor semantic suggestions:
1. Why the need for the non-semantic div in the original markup? Can a wrapper not be added via jQuery?
2. It doesn’t seem possible to use dynamically created prev and next links. Would this just be a case of changing .click(function(){}) to .live(‘click’,function(){}) ? That didn’t seem to work for me either

Sorry, the filter eat my text.

In your div carousel, create a div with an id ([div id=’count’][div]).

Please replace “[” and “]” by “less than” and “more than”.

maven-minify-plugin is unable to minify your JavaScript using YUI compressor, there is a bug in JCarouselLite:

http://code.google.com/p/maven-samaxes-plugin/issues/detail?id=12

Could you please fix this?

Hi, Ganesh!
I’m using your plugin at a page http://www.chikhacheva.com/pos.html and have a problem in Chrome and Safari browsers: There is a space after <> with carousel and I don’t have an idea how to remove it. If you know, what I should correct in the script to remove the space, please write to me.

Hi,

I think i’ve found a bug in the carousel. When you start from anything other than 0 and have circular set to true the carousel has trouble when using the previous button. In my example I have 6 images and set it up like this:

$(“#expCarousel .carouselcontent”).jCarouselLite({
btnNext: “#expCarousel .next”,
btnPrev: “#expCarousel .prev”,
speed: 500,
visible: 1,
start: 3,
scroll: 1
});

Line 293: if(to<=o.start-v-1) { // If first, then goto last
Line 293: if(to<=4-1-1) { // If first, then goto last (example variables, fyi: Line 233 adds visible onto start)

Using my example the if statement gets triggered when variable 'to' is 2 or less instead of -1 (the prepended 1st element) or less.

Am i right in thinking that if i was to change the if statement to check whether variable 'to' is less than 0 this would work?

Line 293: if(to<0) { // If first, then goto last

I haven't come across this not working yet.

Cheers
Sam

I patched your plugin to prevent it from scroll while it is being hovered. I only changed a few lines. Email me if you want me to send you my changes.

Lowell

Great Post,

I use jCarousel Lite in my school project.

Thank to share.

fixed a bug and support auto-scroll amount set:
————————————————
(function($) { // Compliant with jquery.noConflict()
$.fn.jCarouselLite = function(o) {
o = $.extend({
btnPrev: null,
btnNext: null,
btnGo: null,
mouseWheel: false,
auto: null,
autoScroll:1,

speed: 200,
easing: null,

vertical: false,
circular: true,
visible: 3,
start: 0,
scroll: 1,

beforeStart: null,
afterEnd: null
}, o || {});

return this.each(function() { // Returns the element collection. Chainable.

var running = false, animCss=o.vertical?”top”:”left”, sizeCss=o.vertical?”height”:”width”;
var div = $(this), ul = $(“ul”, div), tLi = $(“li”, ul), tl = tLi.size(), v = o.visible;

if(o.circular) {
ul.prepend(tLi.slice(tl-v-1+1).clone())
.append(tLi.slice(0,v).clone());
o.start += v;
}

var li = $(“li”, ul), itemLength = li.size(), curr = o.start;
div.css(“visibility”, “visible”);

li.css({overflow: “hidden”, float: o.vertical ? “none” : “left”});
ul.css({margin: “0”, padding: “0”, position: “relative”, “list-style-type”: “none”, “z-index”: “1”});
div.css({overflow: “hidden”, position: “relative”, “z-index”: “2”, left: “0px”});

var liSize = o.vertical ? height(li) : width(li); // Full li size(incl margin)-Used for animation
var ulSize = liSize * itemLength; // size of full ul(total length, not just for the visible items)
var divSize = liSize * v; // size of entire div(total length for just the visible items)

li.css({width: li.width(), height: li.height()});
ul.css(sizeCss, ulSize+”px”).css(animCss, -(curr*liSize));

div.css(sizeCss, divSize+”px”); // Width of the DIV. length of visible images

if(o.btnPrev)
$(o.btnPrev).click(function() {
return go(curr-o.scroll);
});

if(o.btnNext)
$(o.btnNext).click(function() {
return go(curr+o.scroll);
});

if(o.btnGo)
$.each(o.btnGo, function(i, val) {
$(val).click(function() {
return go(o.circular ? o.visible+i : i);
});
});

if(o.mouseWheel && div.mousewheel)
div.mousewheel(function(e, d) {
return d>0 ? go(curr-o.scroll) : go(curr+o.scroll);
});

var hAuto=null;
if(o.auto)
hAuto = setInterval(function() {
go(curr+o.autoScroll,true);
}, o.auto+o.speed);

function vis() {
return li.slice(curr).slice(0,v);
};

function showmsg(to,useAuto,color){
var s=$(“#msg”).html();
s+= “”;
s+= “to=” + to + ” “;
s+= “useAuto=” + useAuto + ” “;
s+= “itemLength=” + itemLength + ” “;
s+= “liSize=” + liSize + ” “;
s+= “o.start=” + o.start + ” “;
s+= “v=” + v + ” “;
s+= “curr=” + curr + ” “;

s+= “”;
if(color==”red”)s+=””;
$(“#msg”).html(s + “”);
}

function go(to,useAuto) {
if(!running) {

if(o.beforeStart)
o.beforeStart.call(this, vis());

if(hAuto)clearInterval(hAuto);

if(o.circular) { // If circular we are in first or last, then goto the other end
if(to=itemLength-v+1) { // If last, then goto first
ul.css(animCss, -( Math.abs(curr-(itemLength-v*2)) * liSize ) + “px” );
curr = to-(itemLength-v*2);

showmsg(to,””,”black”);
} else curr = to;
} else { // If non-circular and to points to first or last, we just return.
if(toitemLength-v) return;
else curr = to;
} // If neither overrides it, the curr will still be “to” and we can proceed.

running = true;

ul.animate(
animCss == “left” ? { left: -(curr*liSize) } : { top: -(curr*liSize) } , o.speed, o.easing,
function() {
if(o.afterEnd)
o.afterEnd.call(this, vis());
if(o.auto)
hAuto = setInterval(function() {
go(curr+o.autoScroll,true);
}, o.auto+o.speed);
running = false;
}
);
// Disable buttons when the carousel reaches the last/first, and enable when not
if(!o.circular) {
$(o.btnPrev + “,” + o.btnNext).removeClass(“disabled”);
$( (curr-o.scroll itemLength-v && o.btnNext)
||
[]
).addClass(“disabled”);
}

}
return false;
};
});
};

function css(el, prop) {
return parseInt($.css(el[0], prop)) || 0;
};
function width(el) {
return el[0].offsetWidth + css(el, ‘marginLeft’) + css(el, ‘marginRight’);
};
function height(el) {
return el[0].offsetHeight + css(el, ‘marginTop’) + css(el, ‘marginBottom’);
};

})(jQuery);

Hey, great plugin!

I’m trying to put several carousels on the same page (actually i’m using it in posts on my WordPress blog) but when I do clicking any “next-button” or “prev-button” changes images on _all_ carousels.

Am I missing something obvious? Is there a way to link next and prev buttons to a certain carousel? Sorry if i’m being stupid.

Any help greatly appreciated!