jCarousel Lite – A jQuery plugin August 9th, 2007
jCarousel Lite is a jQuery plugin that carries you on a carousel ride filled with images and HTML content. Put simply, you can navigate images and/or HTML in a carousel-style widget. It is super light weight, at about 2 KB in size, yet very flexible and customizable to fit most of our needs.
Did I mention that it weighs just 2 KB?
As if that wasn’t enough, the best part is yet to come… You don’t need any special css file or class name to get this to work. Include the js file. Supply the HTML markup. Then, construct the carousel with just a simple function call.
Visit the project page for more information. There you can find a lot of demos and exhaustive documentation. This blog entry is just a teaser for further exploration.
Installing and getting it to work is as trivial as following the 3 steps given below…
Step 1:
Include a reference to the jQuery library and the jCarouselLite plugin. If you like interesting effects, include the Easing plugin as well (Optional). If you would like to navigate the carousel using mouse wheel, then include the mouse-wheel plugin as well (Optional).
<script type="text/javascript" src="path/to/jquery.js"></script> <script type="text/javascript" src="path/to/jcarousellite.js"></script> <!-- Optional --> <script type="text/javascript" src="path/to/easing.js"></script> <script type="text/javascript" src="path/to/mousewheel.js"></script>
Step 2:
In your HTML file, provide the markup required by the carousel (a “div” enclosing an “ul”). You also need the navigation buttons, but these buttons need not be part of the carousel markup itself. An example follows…
<button class="prev"><<</button>
<button class="next">>></button>
<div class="anyClass">
<ul>
<li><img src="someimage" alt="" width="100" height="100" ></li>
<li><img src="someimage" alt="" width="100" height="100" ></li>
<li><img src="someimage" alt="" width="100" height="100" ></li>
<li><img src="someimage" alt="" width="100" height="100" ></li>
</ul>
</div>
Step 3:
Fire a call to the plugin and supply your navigation buttons. You just managed to architect your own carousel.
$(function() {
$(".anyClass").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev"
});
});
If you have any comments/suggestions/requests, feel free to drop in a comment or you can find me lurking around the jquery mailing list.
Update
Based on popular request, jCarouselLite has been updated to support jquery 1.2.x versions. Goto the download page and download version 1.0.1 to enjoy jquery 1.2.x support. Since Firefox 3 has some issues with $(document).ready() function, try using $(window).load() instead if you face any problems. Hopefully a future version of Firefox or jQuery will fix the problem.
Hi! Great work on jCarousellite! However, I have 2 requests:
1) When I hover an element in the carousel the auto movement should pause
2) When I click next or prev the timer should reset. If the timer is 4 seconds and i click next after 3 seconds, the carousel is autoscrolled 1 second after i manually scrolled with the next or prev button.
Big thanks in advance!
Issue:
when using a vertical carousel with image + text in every tag, it base the height of each elements on img height instead of li’s height.
First off… I love the tiny implementation you have here. I use jCarousel for those times I need the full featureset, but your implementation is really nice for being so small!
I am having a slight problem though… Internet Explorer 7 (go figure) is scrolling too much with each click of the next button. The first few images that go by don’t cause too much problem, but as you get going it slowly gets further and further off. Eventually you can see only half of the image you want displayed. Of course this all works fine in FF and Safari. Any thoughts?
Hi – I’m looking for something that will allow me to rotate image maps (I have 3 images with two hotspots each that link to different pages in the site). I wasn’t able to tell from the “mixed content” example if that might be do-able.
Hi, I’m having an issue using HTML elements for items. I have an image above with a rating feature below. I’m using the jquery rating pluging here (http://sandbox.wilstuckey.com/jquery-ratings). My problem lies where the rating buttons display only on the initial page and when clicking the previous button. It shows an empty rating div when I click the next buttons. Currently our development server is down, but I’m happy to provide you a link when it’s up, if you can assist me. I’d appreciate your help. Thank you.
–
Justin
Please provide a demo where in source code of page i will see only the code required to run the demo.
Thnak you,
I would like to create PLAY/PAUSE buttons, to start stop automatic sliding. How can I do this?
Another words, how can I access settings of plugin already initialised?
Eg. I have something like that:
$(“.scroller”).jCarouselLite({
btnNext: “.next”,
btnPrev: “.prev”,
auto: 5000,
scroll:1,
})
Thanks for all your kind words. I am glad you liked it.
Sorry guys. I didn’t realize that comment moderation was turned on. I remember turning it off. That is the reason why your messages didn’t get posted for this long. I will make sure, this doesn’t happen in the future.
@Ruben – I have received that request from quite a few people. So i will try to squeeze that in as part of the next release. But, feel free to change the code if you can’t wait.
@hartym – I see your point. That is a valid bug. I will try to fix it asap. If you have a fix for it, i would like to see it. Thanks
@John Pendergrast – Yes, you are right. I will try to get that fixed asap, meanwhile, if you have a fix for it, i would love to see it. Thanks.
@Boyink – I am not sure if i understand your question. Since, you are allowed to put anything into jCarouselLite, i guess it most probably should be possible to put the image maps in too. But, if you give a more detailed explanation, i would be glad to help
@Justin – If your problem is not yet solved, email me at ganeshread [at] gmail [dot] com with a link to ur dev server. we can work to resolve it.
@ezbranca – I hear ya… will add it over this weekend. I didn’t add a separate zip file in the first place because, it was a maintenance nightmare everytime i update the plugin. Anyways, now that i have a valid request, i will get to it.
@Mariusz – At this point you wont be able to access the plugin settings from outside the plugin itself. You might have to change the plugin source to get that feature.
Thanks again for all ur patience.
it’s really a great script thank for that!
I have just a suggestion : in the case of circular option to false is it possible to hide the next picture button when the carousel is at his end position and to hide the prev button when it is a the start position
@goetsu – It is already possible. Exactly as u said, when you have circular set to false, and when the carousel reaches the last item, the “next” button will be assigned a class of “disabled”. The same is the case for the “previous” button when you reach the first element in the carousel.
great good news but just one more thing, I think that the disabled class must be added to the prev button at the start because otherwise I have a prev button who is useless
I like your work. Thank for it!
It’s much easier (and reliable) than jCarousel.
But I miss one feature – the possibility to work with huge list of images. In your examples you use very small amount of pictures and it works fast enough. But if you use 100 or 200 images the performance will decrease significantly. So if you managed to implement some callback for loading images and some functionality to manage amount of items in carousel – it would solve the problem with huge arrays and provide us an opportunity to use Ajax for loading of images.
@goetsu – Yes, that is an issue with the current implementation of enable/disable feature. This will be fixed in the next release. You can expect it in a week. In the meantime feel free to mess around with the source urself. I will keep this entry informed about the next release.
@dmitry – I hear ya, but am sorry. Once ajax chips in, or some dynamic addition of carousel items come into picture, there is a big possibility of the code getting bloated. That is why i have purposefully omitted these features. But feel free to play with the source and bend it to ur needs. If you have any questions with the code, i can most definitely help you. In any case, if in near future i am able to manage to code this feature with very less code bloat, i will squeeze it in.
Hi, I’m trying to use jCarouselLite with jQuery 1.1.4 and I’m getting the following error when clicking on the next button:
e[val == "toggle" ? hidden ? "show" : "hide" : val] is not a function
Line 2270 jquery.js
Any ideas?
For the previous comment, I’ve sorted the problem – It’s Rico.js conflicting with something inside jQuery. I’ve binned Rico now to use this plugin and the far superior jQuery. Thanks for the plugin! It’s great!
Hi,
is possible to put images with diferents widths and adjust the space between images?
thanks for the great plugin and sorry for my poor english!
I was wondering if there was any easy way to implement height and width to the carousel box within the current version? If not, would you consider adding such a function to any future versions. I like this a lot since it is small, but yet very beefy, but I’m having a heck of a time trying to resize the box in which the carousel sits. Thanks so much. Keep up the good work!
@Michael Smith – Glad you sorted it out and thanks for the compliments.
@dao – At present it is not possible to put images with different width and height. Technically, it is kinda tricky to get it done. So, i will try to get it out in the next release. Thanks for your patience.
@Aaron – I see your problem. But, for the time being you can use a simple solution maybe. Instead of trying and styling the carousel’s div, why not wrap the carousel’s div within another container and style that container. The plugin code will only deal with styling the carousel’s div. So, a parent container should be free for you to style. Hope that helps.
Hi Ganeshji!
Now, i have a big problem with your jcarousel plugin… i load new content (images) dinamically :
$(document.getElementById(‘ads-caroussel’)).append(“”);
yes, its a dirty code… but the new images do not appear correctly and the sequence is not reloaded.
Its possible to have functions to load dynamically new images and that the sequence was appearing correctly? Ajax? Functions for add and remove images.
Finally, a packed release (js + docs + examples) is welcome, normally I work offline.
Thanks for all!!!
@dao – Sorry dao, but you can’t load images dynamically with this plugin. This plugin is intended to be very light-weight, so some of the features that compromises that fact are not included. But, the feature that you are looking for is readily available in a more complete carousel plugin called jCarousel. http://sorgalla.com/projects/jcarousel/
I am using this plugin primarily to make a dynamic header image that has image and non-image content. So I switch between main, archives, etc. (see site).
The problem that I have run into is that, for example, my archives section should have a list of months in the archive (another ul). When I do this, the plugin is picking it up as another item to be scrolled, when it should be considered part of the “non-image” content.
So say I have 3 items in my jcarousellite. I can scroll through them fine. On the third in addition to an image, I overlay a div that contains an unordered list. I would expect still 3 itmes, 2 images to be scrolled, and the 3rd an image with a div on top of it containing a list. However, what happens is that you get 3 items + the amount of items in your own list in the 3rd item.
I suspect its because the plugin is parsing based on li. I am not particularly a programmer, so I have not looked hard into tweaking it myself.
Basic question, can we have a list within a div as a non-image content item within a jcarousel lite gallery?
jq1.2?
Please update to 1.2
I am using jCarousel Lite on a new website and it works great. Thanks for the plugin. One question I have is that on some browsers [Safari, IE7] the thumbnail list shows briefly in a vertical orientation as the page/plugin loads. The carousel is set to display horizontally. I assume that the CSS loads first and then the plugin rewrites it but is there a way of removing or not displaying this temporary vertical display? I hope I have explained this correctly. This is not the temporary flicker effect you mention on the FAQs page but please correct me if I am wrong. Thanks for any input.
First off let me say that this script has been a real life saver and is fantastically written. Really a great job. I just had one question however: Once the carousel has been generated and is running etc, is there any way to change any of the basic variables on the fly (for example the scroll number)? Perhaps I’m missing something obvious
Hi,
Animation does not work. Firebug says: “tLi.gt is not a function”. I’ve tried jCarousel Lite with jQuery 1.1.4 and 1.2.
Thanks,
Matt
@clive – As far as i know, the temporary vertical display should be because of the flicker effect i explain in the FAQ. To be confident in this, check the project page for jCarouselLite and see if you can reproduce the problem there. If it works fine in the project’s demo pages, i guess the the FAQ should solve the problem. Let me know if you are still facing it, we will try and fix it together.
@Mo – At present, this plugin does not allow you to change the variables like “scroll” etc on the fly. I will note this as a feature request for my next release. Thanks for your inputs and sorry for any inconvenience caused because of this missing feature.
@foo, @chad, @matt – 1.1.3.1 was the last jquery version i tested this plugin with. I will make sure i will update the code to support 1.2 pretty soon. But, at present, i am pressed for time, so, i can’t provide any timelines. Rest assured, it will happen soon, and i will have a blog entry posted for the same.
Thanks Ganeshji. I tried the flicker effect fix as described in your FAQs and the vertical effect has gone. Thanks! I am still working on the website but when it is ready for viewing I will post it here for feedback.
Hello,
I implemented this great plugin in a client’s site but I have a strange issue in IE6 (Firefox and IE7 is ok). The plugin is scrolling automatically, with “scroll:2″ and 3 images showing per time… but there’s a image that is only showing when the animation begins. This image is the third in the list (of 8). And this is happening after rotating all the images.
Thanks for the plugin!
@Clive – Glad it worked out for you. I am anxious to see where and how it is used in live sites. So, i am glad that you are going to post a live link as feedback.
@Marco – If i understand right, you are saying that the third image is not loading for a long time. Since you are initializing the plugin in document.ready() event which gets executed before the images are downloaded, possibility of this happening are high if the image size is large. So, why dont u try and initialize the plugin on window.load event. That could be the solution. Lemme know if it worked out for you.
Hello Ganeshji! Well, not really.. The third image is appearing when the page loads. But, when starts rotating until the last image from gallery, then the third image doesn’t appear anymore (but the first and second image are showing). And so, when starts the animation again, the third image appears.
Look here: http://www.multiperfil.com.br/index01.php
At the bottom, wait until all images of the gallery and then you will see whats happening with the third image, the Drywall logo (after CSN).
This is happening only in IE6.
Thanks! =)
i used it here : http://www.deviantnation.com/girls/Miesha/ on the left under “6 Photo sets”.
Anxious to get it compatible with 1.2 so I can update some other jquery stuff
I’m working on an implementation of jCarousel here: http://tabl-ex.com/index2.php
Still got _quite_ a bit of work left, but so far so good.
The challenge I’m having is that, on occasion, when refreshing the page and testing the “prev” or “next” buttons or the mouseWheel, it will scroll extremely fast and scroll till everything goes black. I haven’t pinpointed what’s causing this just yet but it “seems” to be random.
Try refreshing a couple of times and testing. Any ideas?
Thanks for an awesome plugin. I’m looking forward to running it on 1.2
.
This is great, thank you!
I do have a question about the callback function. If I had one section visible how would I access the content of that returned object? Say I needed to get the id of a div in the displayed item in the carousel?
Hey Ganeshji,
I was wondering if this plugin is compatible with jquery 1.2.* yet? It used to work great for jqeury
Hey – Your plugin looks great. Unfortunately, I’m too stupid to make it work apparently. I’ve copied word for word the “3 step installation instructions” but when I render my page, its just an unformatted list of imgs.
Google says there is some compatibility issues with the latest version of jquery and carousel, but I copied and pasted the exact versions running on your site. Still to no avail. What am I doing so wrong? I’d love to implement this.
If you would be so kind as to email me, I would really appreciate it.
Hello,
I found that the carousel doesn’t work if the css direction is set to “rtl”. It shows off-screen or has wierd jumps. I don’t mind setting it to “ltr”, but I also want to scroll in the other direction (I use auto-scrolling).
Hi
I’m trying to use your carousel so that it displays over 2 or 3 lines, so that I can display 30 images at the same time using an external control so that when you select button 1 it puts image one in the first placeholder etc. Any ideas how to do this easily?
This small (and probably very dirty) correction fixed the plugin for me on jQuery 1.2.1. However it will only fix the thing when using a non-circular vanilla version. When you use circular, it WILL screw up. Suited my needs though (tested with 8 images).
Change line 230 of the unpacked version to:
ul.prepend($(‘#’+$(this).attr(‘id’)+’ ul li:gt(‘+(tl-v-2)+’)').clone()).append($(‘#’+$(this).attr(‘id’)+’ ul li:lt(‘+(v)+’)').clone());
Namasthe Ganeshji,
First of all, GREAT Plugin!, Its really easy and it has a lot of nice effects too. The only thing I really miss is, that the image can not be loaded on need. Example: I will have a gallery with at least 50 pics and I want the image to be loaded only if you slide trough.
I know that you will advise me to use the jCarousel. (http://sorgalla.com/projects/jcarousel/) But I like yours more because of the simple HTML and simple CSS.
The following patch should modify jCarousellite to run with jQuery 1.2.0 and greater. The issue, as far as I could tell is due to the use of lt() and gt(), which were deprecated in 1.1.4 and removed in 1.2.0 in favor of slice().
Here’s the patch:
— Desktop/jquery.jcarousellite.js 2007-10-10 14:58:13.000000000 -0400
+++ Sites/higherthings.org-trunk/HTDB2/javascript/jquery.jcarousellite.js 2007-10-10 14:56:51.000000000 -0400
@@ -227,7 +227,7 @@
var div = $(this), ul = $(“ul”, div), tLi = $(“li”, ul), tl = tLi.size(), v = o.visible;
if(o.circular) {
- ul.prepend(tLi.gt(tl-v-1).clone()).append(tLi.lt(v).clone());
+ ul.prepend( tLi.slice(tl-v-1).clone() ).append( tLi.slice(0,v).clone() );
o.start += v;
}
@@ -289,7 +289,7 @@
}, o.auto+o.speed);
function vis() {
- return li.gt(curr-1).lt(v);
+ return li.slice(curr-1).slice(0,v);
};
function go(to) {
Hi – Please forgive my naiveté, I’m not a javascript programmer, but I love the carousel and am trying to add it to my site. I’ve got the js files & head tags & and all in the right places; I just don’t understand how to fire a call to the plugin. I know! Idiot-stuff! Please help me anyway! What is the syntax in HTML to run the script when the page loads? A million thanks – reading JavaScript tutorials has only confused me further. I’ve got my forehead on the floor…
-Erin
Hi there,
Nice work on this one mate.
I was wondering if anyone had any ideas on getting a flexible width carousel that only fits in as many items as can fit.
For example, I have a fluid design, and would like people with higher resolutions to see more items in the carousel since they have the room.
Look forward to any suggestions.
Cheers,
Kim
Hi
Great plugin you made Ganeshji.
When you will be released zip version of all demo sites.
This will be great help for all us newbies?
cheers
@ Stan – thanks so much for the patch!
How can I make jCarousel Lite works inside a table?
I put the div’s inside a cell and did not appear in ie7.0
hi newbies here help me,
where can i put this line
$(function() {
$(“.anyClass”).jCarouselLite({
btnNext: “.next”,
btnPrev: “.prev”
});
});
thanks,
mel
vhi newbies here help me,
where can i put this line
$(function() {
$(”.anyClass”).jCarouselLite({
btnNext: “.next”,
btnPrev: “.prev”
});
});
thanks,
mel
I need put in one thickbox the jcarousel, but i can’t. Is posible?
Thks (excuseme for my english, im from spain)
hi, does there carousel need to be a list? im trying to build a more complex carousel structure. for example.
Hi, seems your plugin doesn’t work with jquery 1.2.1. Please update your code. Thanks.
Hi,
How do you dynamically update the whole carousel as per your examples page?
I can see that you’re calling an external PHP file that provides the necessary code for each example.
In particular I’m trying to update a carousel similar to your external controls example – however, the updated carousel may vary from 1 to many items so I can’t hard-code the .externalControl classes.
The problem I’m having is the plugin doesn’t appear to get called, despite the remote call returning the … code to fire the call to the plugin again.
What am I missing?
Hope this makes sense.
Thanks.
First, awesome script, does exactly what I need. Nice work!
Now the problem: I have jcarousellite up-and-running on a little prototype I’m building, on a barebones page at the moment. For some reason, all of the s in my are being copied and duplicated in the DOM (so that after load, all s appear twice). Is this intended, or a bug? It causes some problems with my scripts…
Unfortunately there seems to be a problem with jQuery 1.2.1, what a pity :-/
I had a look into the source-code, it’s very easy to make it jQuery 1.2.1-compatible. The methods gt() and lt() were removed in the new version, see jQuery’s release notes for a description.
A quick workaround: Get the unpacked version of jCarouselLite (http://gmarwaha.com/jquery/jcarousellite/js/jquery.jcarousellite.js) and change the following:
* replace line 231
ul.prepend(tLi.gt(tl-v-1).clone()).append(tLi.lt(v).clone());
by
ul.prepend(tLi.slice(tl-v).clone()).append(tLi.slice(0,v).clone());
and
* replace line 295
return li.gt(curr-1).lt(v);
by
return li.slice(curr).slice(0, v);
That’s it – works fine for me. You might want to re-pack the file afterwards. Ask Dr. Google for “JSMin”.
Hi, I would like to advance the carousel from a function. I.e. I have a slideshow fading in images in a certain order – now i would like to advance the carousel below in the same order.. can i hook into the code somewhere, or call a “next” method on it?
And thanx for the nice plugin!
Hi. Thanks for making this, it is very nice. I really needed it working with the most recent JQuery, though, so I took a stab at fixing it. I’m not sure if my results are 100% correct, but I could only find two lines that caused an obvious error. The diff is below, and for my purposes, these minor corrections seem to do the trick.
230c230
ul.prepend(tLi.slice(tl-v).clone()).append(tLi.slice(0,v).clone());
292c292
return li.slice(curr).slice(0,v);
I’m having a lot of trouble getting jCarouselLite to work properly. Is there any way you can make a zip file with an example available? Thanks
hi Ganeshji & Marco Moreira
first i thank for the plugin. i am using the jCarouselLite with jplugin 1.2.1 in my client site it is working fine in ie6, ie7 & ff. i am using auto scroll and i am displaying 6 images(totaly i have 9 images). the problem is ” when the page get load it shows 6 images in the third scroll i am getting only 2 images. the same problem Marco has faced. help me to show 6 images in each scroll…
thanks in advance
Is there a way to get the autoscroll to work with a pagination control as well? So the one you see here http://gmarwaha.com/jquery/jcarousellite/index.php#demo but with the content autoscrolling as WELL as controled by the user in the pagination?
Please email me back if someone can tell me how to do this? I’m not a JS wiz by any means… ergo why this designe loves the jQUery library… it’s easy to plug and play
Hi,
I followed the steps in installation, but the carousel isn’t working. The images are all just showing. I’m using ASP.Net, Visual Web Developer in c#. Any help appreciated.
Thanks
Emma
Hi,
Great plugin – I’ve been using it for a few projects, but have come across a problem / suggestion. When auto-scrolling the carousel, there’s always a pause after each item(s) – is it possible to have the automatic scolling continuous, so that it acts more like a traditional scroller with no pauses?
Thanks,
I can’t get it to work. The problem is that the examples are not complete so I doing some thing wrong.
Here’s my code:
$(function() {
$(“.anyClass”).jCarouselLite({
btnNext: “.next”,
btnPrev: “.prev”
});
});
>>
I am really excited about using the Carousel, it looks wonderful
Hi:
Thanks for the wonderful module. I used drupal for a site and have installed jclite in it. I created content using it. But the scroll is not happening. I am not a coder. Following is the code. Please help!
Thanks.
Radha
>
$(function() {
$(“imageshow”).jCarouselLite({
btnPrev: “prev”,
btnNext: “next”,
auto: null,
speed: 200,
vertical: false,
circular: true,
visible: 2,
start: 0,
scroll: 1,
});
});
BUG:
Hi, I think I’ve found a bug with jclite, when using fractional display – I’m showing 1.5 items, and when i get to the end of the list, where there should be 1/2 of the first item shown, i get nothing, and scrolling to the “next” item then goes out of sync and starts in the middle of the first item. Is that why you’ve set circular:false in the fractional example?
$(“.portfolio-carousel”).jCarouselLite({
btnNext: “.portfolio-carousel .next”,
btnPrev: “.portfolio-carousel .prev”,
visible: 1.5,
scroll: 1,
start: 0.5,
speed: 400
});
Any ideas on how to fix it?
BUG:
Also, when you specify visible in .5 increments, the carousel doesn’t seem to start in the right place – it starts with 1/2 of the last item first, then the full first item. Only when you go up to visible:2, does it behave normally. When you add circular:false it works OK…
Does anyone know a way, when using the external controls, to highlight the current image?
If it’s on the third image, it would look like 1, 2, [3], 4, 5… etc. I was toying with the idea of assigning the CSS through a callback, but how can I access the actual number of the image? Any ideas?
I have made the changes to the unpacked version of .js file.
Unfortunately I still cant get it to work with any 1.2.x version.
$(function() {
$(“.homeJC”).jCarouselLite({
auto: 1000,
speed: 2000
});
});
thats my usage… I am trying to debug but I am going nowhere very slowly.
If anyone has any ideas please give me a shout…
Thanks
Hi, im having problem using this with all other scripts like accordian or prototype. and is i use jquery.noconflict then this stops working and everything starts working
fantastic plugin ganesh!!, and many thanks for JQ 1.2 update!!, amazing size for all the features man, thanks again!!
I’m not sure if it is a bug or what but I’m trying the vertical corousel and I cannot use images of different height. If I do it will show all images having the same height (the minimum height)
Hi, I love the plugin. I have the basic plugin working fine, but I can’t seem to get something like your Custom Widget working. I’ve copied your code snippet for the custom widget, but I’m obviously missing something…
can we have access to the Css please.
regards
Hello, thank you very much for this script, as I can personalize the buttons “Next” and “Prev” ?
Thank you.
jCarousel Lite can’t works inside a table cell in IE !!!
How can I fixed this ??
Thanks
sitet: http://www.finditreadit.com/garyl/google
If you click into one of the editions, then scroll the thumbnails on your right hand sides, you will find that it works from left to right, but not the other way around. It will bounce back to certain end pages of edition. Any hint?
It seems I need to specify cicular:false, otherwise it won’t work.
How can i center the pictures if i have less than 2 (visible 3 for default) tahnks all.
REALLY AWESOME YOUR WORK!!!!!!!
Unfortunately I fall into the class of people that are new to jquery and can not figure out how to make the demo work based off the 1, 2, 3 steps provided here:
http://www.gmarwaha.com/jquery/jcarousellite/index.php#install
I noticed that css is not included on that page so taking from the 1,2,3 example does not in fact work. Also, I had no luck trying to digest from the working demo how to set up locally. I’m not sure why I can’t figure this out. It would be great to have a zipped example for download that would work locally – even at its most simple form.
Bug found: if you have 6 images and plugin set to circular: false, visible: 4 and scroll: 3, it won’t work. It shows 4 images but it won’t switch to next since 4 + 3 = 7, meaning greater than the number of images available in the gallery.
Hi,
I look for a cross navigation, so i must combine the vertical and horizontal carousel.
Is anybody make this ?
Thank a lot
Hi there,
Is there any possibility to have a slide function if I click on the image? I want that if the users click on the image that it slides to the next image (same function like the arrow). Of course this makes only sense if I display one image
Thanks for your answer & regards
Hi. If you set a “start” and then try to scroll p (for vertical version) it doesn’t scroll.
I fix code
was:
if(toitemLength-v) return;
else curr = to;
gott:
if(toitemLength-1) return;
else curr = to;
About jCarousel Lite – great work – thx!!!
If you’re having problems with targeting your div based on class (like when its inside a table cell) – simply target it by ID
it works fine
Hi, first congrats for this great work.
Just a little question :
How to do for running 2 carroussels in the same page ?
Thanks
Hello. I’m working to implement jcarousellite, but am having trouble. I am presenting a UL of items that are text based. Each LI in the ul includes a div with a ul and li items for detail. An example of the html markup is shown below. The problem that I am having is that jcarousellite puts css into a “style” parameter in the LI items, overriding my css. This causes the items to be not sized correctly, and look like hell. How can I override the styles so that it doesn’t reformat my markup?
Example of html markup
Name
Description
Price
More Detail
Buy
Name
Description
Price
More Detail
Buy
Hello. I’m working to implement jcarousellite, but am having trouble. I am presenting a UL of items that are text based. Each LI in the ul includes a div with a ul and li items for detail. An example of the html markup is shown below. The problem that I am having is that jcarousellite puts css into a “style” parameter in the LI items, overriding my css. This causes the items to be not sized correctly, and look like hell. How can I override the styles so that it doesn’t reformat my markup?
Example of html markup:
Name
Description
Price
More Detail
Buy
Name
Description
Price
More Detail
Buy
@Anam
To get 2 carousels, just create your 2 lists with different class names (eg newsscroll and newsscroll2) and call 2 scripts like so. Don’t forget you’ll need 2 lots of prev/next buttons if you use buttons;
$(function() {
$(“.newsscroll”).jCarouselLite({
easing: “easeinout”,
auto: 500,
speed: 1000,
visible: 1,
btnNext: “.next”,
btnPrev: “.prev”
});
});
$(function() {
$(“.newsscroll2″).jCarouselLite({
easing: “bounceinout”,
auto: 600,
speed: 2000,
visible: 2,
btnNext: “.next2″,
btnPrev: “.prev2″
});
});
I was trying the yuicompressor on jcarousellite 1.0.1* and got this
error: “invalid property id” at line 239:
line 239>> li.css({overflow: “hidden”, float: o.vertical ? “none” : “left”});
What could be wrong?
* http://www.gmarwaha.com/jquery/jcarousellite/js/jcarousellite_1.0.1.js
Hi!
First of all, thanks for this cool plug-in. It really helped me to get rid of a flash movie.
I have a small problem though: I have a div in my page that goes over the carousel (with CSS position absolute and z-index set).
It works perfectly in Firefox but my div goes under the carousel in IE 7 and 6…
Do you have a clue?
Thanks
Sorry for the delay.
Thanks a lot for your help
@Nick : It works fine on Firefox, not with IE (the first carousel is hidden)
Here is my code :
$(function() {
$(“.anyClass”).jCarouselLite({
btnNext: “.next”,
btnPrev: “.prev”,
mouseWheel: true,
visible: 2
});
});
$(function() {
$(“.anyClass2″).jCarouselLite({
btnNext: “.next2″,
btnPrev: “.prev2″,
mouseWheel: true,
visible: 2
});
});
Of course i have 2 lots of prev/next buttons, 2 DIV with different name.
A big thanks for your help
I have the following isue: I want the user to be able to disable all jQ animations on a website. Since jC does not allow to change the spped of the scroll to 0 after its created, is there a way to destroy the jC object to create it again?
Hi Ganesh, I’ve added a new parameter – hidenav – to hide the prev/next buttons when in non-circular mode and if at the beginning / end of the list, respectively. Tried to send you a patch but couldn’t find your email addy, so I’m posting here. You can grab the files on my blog:
jCarouselLite with hidenav patch
http://www.mattromaine.com/2008/05/05/jcarousellite-with-hidenav/
Hi Ganesh,
I have to report one bug with this plugin which I really love. Hopefully you’ll be able to fix it, let me know if you need some help testing.
I uploaded screenshot here:
http://f1vlad.com/etc/sf/jCbug.png
I tested it in Windows Vista on IE 8.0.6 beta.
Thanks again for a great plugin,
Vlad
Hi,
This is an excellent plug-in that surpasses other carousel plug-ins available (as far as the simplicity is concerned) !
I would like to be able to display a number of items on two lines (3 on the top, 3 on the bottom).
The idea is to design a CSS div container that can hold these 6 items (more or less, 2 lines and 3 columns) and the .next or .prev button could display then the following items
Is there a way/trick to achieve this?
Thanks in advance
Jack
as with everything to do with jQuery this is brilliant!
hi, i am having some problems with the navigation.
when i hit next button it skips one
so 1 + 1
but when i hit next again it skips two
so 1+1+1
and i’m trying to create a external with multiple button slideshow
so i have named my buttons .1 , .2 , .3 and so on
when i hit .1
it skips 1 slide, when i hit 2 it skips 2 …. not to slide 2 but 2 slides….
how can i solve this ??
Hi – I found a bug and logged it on the jQuery site, but wanted to make sure you saw it…so here’s the link:
http://plugins.jquery.com/node/2562
Dear Ganeshji,
I made a very interesting navigational unit using this script, with multiple levels.
I have a very specific problem I’d like your help with to solve. Maybe if you have time you could hit me an email and assist me ?
I’ll guarantee you, you’ll be interested in this, it turned out quite nice. But there’s just one thing that’s not working for me. I could link you here but it’s kind of a private project.. so if you have time, by all means.
Thanks in advance
-Spades
When setting visible to a fraction like 3.5, the partial image is on the left rather then on the right. If I set circular: false, as in the example it correctly shows the fractional image on the right. Is there any way to get the the fraction image on the right with circular true?
How would you set auto to null or 0 within these click functions? I’m wanting to stop the auto scroll when the prev or next buttons are clicked?
if(o.btnPrev)
$(o.btnPrev).click(function() {
return go(curr-o.scroll);
});
if(o.btnNext)
$(o.btnNext).click(function() {
return go(curr+o.scroll);
});
Thanks for your great plugin!
@Aaron – To create an “active” image, you need to add a class to the image like this:
$(".default .jCarouselLite img").click(function() {
$(".default .jCarouselLite img.active").removeClass("active");
$(this).addClass("active");
});
I hope that helps.
Hi Ganesh, this is a fantastic plugin! I have created a page using this great little utility, and have added some jscript of my own that calculates the available space for a navigation list which increases or decreases the number of items in the menu based on the browser width, but I too am having odd problems with the navigation (similar to Avin, comment #103).
Here’s an example: http://mintox.cluedesign.com.au/sites/mintoxcomau/dev/divwidth.aspx
I’d appreciate it if you can offer any suggestions as to what causes the odd prev/next scrolling and how it might be resolved. Thanks again! =D
BUG:
$(“.toc”).jCarouselLite({
btnNext: “.next”,
btnPrev: “.prev”,
scroll: 4,
visible: 4,
circular: false,
speed: 800
});
Gallery has 10 items. Click next and it shows the next set. click next again and nothing happens. It wont show the last two items.
BUG2:
Same setup as above, but in circular mode. if the number of elements is divisible by the number visible or the number to scroll than the gallery will scroll smoothly in both directions. if the number is off, ie 11 elements, there will a snap when you get to the end.
this is a really great script.
keep up the good work.
Great Plugin, but i’ve come across this issue and am not sure whether the issue is with your plugin or jquery itself.
i’m using the plugin to scroll a bunch of divs.
for example:
.box { width:100px; height:100px; }
1
2
3
Everything works and looks fine. But if you add “overflow:auto” or “overflow:scroll” into the CSS, it messes up the animation. Adding “overflow:hidden” doesn’t affect the animation.
I’m using this plugin with btnNext, btnPrev and btnGo for navigation. Is it possible to have 2 different button assigned to the same action? I would like to have numbered buttons to access the individual slides (i use btnGo for this), but I would like another button to reset to the first slide. is this possible?
Great plugin, but I noticed a couple of bugs:
If circular is set to false, it won’t scroll back to the beginning. I had to change somewhere around line 320 to this
if(to itemLength) return false;
else curr = to;
Also, this line was crapping out in Safari for me for some reason:
li.css({overflow: “hidden”, float: o.vertical ? “none” : “left”});
I changed it to this and it worked (I’m using just a horizontal scroll, so I don’t need the vertical option).
li.css(‘overflow’, “hidden”);
li.css(‘float’, “left”);
hi all
i have a problem that my css is rtl and this tutorial dont say any thing about how to reverce the direction , the problem i have dose not appear if there is a lot of imgs its just appear if i have a number of imgs less than the max number i put in the configration
so plz can any body help me on this
Thanks for all the work on this plug-in, very easy to setup and get working.
I am however having a problem getting this to work with Safari for some reason: http://www.malcolmmobutusmith.com/
The images load, but the navigation doesn’t work and the images seem to be just appearing down the page unless I set the height of the carousel div.
Works fine in IE and FF.
Any thoughts?
Thanks!
Hi Ganesh!
This has been incredibly easy to implement! However I have run into a problem when using the auto scroll. I have a small set of items that I’d like to feature that scroll automatically horizontally. However, instead of circular scrolling, when it gets to the last item it scrolls all the way to the end and then starts again. How can I fix this to make it less disjointed?
Hi Ganesh! Sorry false alarm, the above problem was a result of a clearing item under the list. However, I’d like to know if it’s possible to stop the carousel from scroll when a user hovers over an item?
Hi Ganesh
Is the plugin supposed to add inline style definitions to the divs, ul and li elements? I am finding that in Firefox it adds inline style, whilst in IE it doesn’t. Furthermore, the Firefox inline style is slightly different the first time the page is loaded to subsequent times. The differences are on the height and width. I’m only experiencing this behavior in one application. The test rig I used to train myself on it, doesn’t add inline style in either browser. Do you know of any condition that would trigger it to add inline style?
Many Thanks
Marcus
For people who has set the direction of the document to rtl, Jcarousel wont seems to work. A simple solution is to set style=”dir: ltr” to the parent of . It will start working again!
I hope someone here can help me figure out why, for me, it runs OK in Firefox 2, but I can’t get it to work at all on IE7. The test page is here: http://www.cobaltwolf.us/acuity/ke2/index.html
Thanks in advance. And thanks, Ganesh, for sharing this great script.
This is so sweet. One problem though, it doesn’t quite work with thickbox. The numbering in thickbox is off because of something the carousel is doing in the background. This would be a truly great plug in if you could get it to play nice with thickbox!
Hi!
The combination between realvideo and your carousel lite crash Firefox 3 on PC:
http://www.swissinfo.ch/fre/multimedia/video.html?siteSect=15045&ne_id=9249182&type=real&bcst=y&programId=15
It is a known issue?
Regards, Dom
Hi all,
I’m having problems getting jCarousel Lite working in IE6 & 7
Firefox works fine, but the unordered list does not get any styling
applied in IE
There are several recent posts to this issues blog that mention similar IE issues.
Has anyone else had issues with IE and found a fix? My markup is
below:
$(document).ready(function() {
$(“.jite”).jCarouselLite({
btnNext: “.next”,
btnPrev: “.prev”,
visible : 6,
scroll: 3
});
});
previous
next
I see this is a great plugin – but just can’t work out why its not working for me in IE.
Thanks in advance!
Regards
Sean
ah, I see the html has been lost in posting.
see http://groups.google.com/group/jquery-en/browse_frm/thread/c35a8fc88f783601/1f4ae6b57e97a5be?lnk=gst&q=+jCarousel+Lite+and+IE6%2F7#1f4ae6b57e97a5be
for the full posting on the jQuery group
TIA
Sean
Hi! I’m having some issues with a really irritating glitch – I’ve integrated the lightbox script so when I click an image it pops out – but if I click previous or next to scroll the carousel the lightbox code seems to be ignored randomly – not all the time, only for a few seconds or after repeated scrolling! Any ideas what may be causing this issue?
Hi!
jCarousel Lite is a great plug-in.
But one issues: carousel fail to initialise when it empty.
Fail on line 336 – return el[0].offsetWidth
There are no elements at all.
Dude,
Think I found a bug on the latest version of this script which affects Firefox v1.0. On line 239, where you set the li.css properties, the word float needs to be put in single quotes. Otherwise you get complete non-function in Firefox v1.
Hope this helps and thanks for a great script.
Is it possible to have two separate instances of jCarouselLite on the same page? I tried but it didn’t work…..
First off, I would like to say I really like this plug-in. I am new to jQuery, and found the plug-in easy to use. I am having a small problem though. I am interested in adding a title to each photo and have tried to do this with Title. When I do this the spacing between images disappears, and if I try to add margins or padding to the li elements in my CSS one or two of the images appear on a second line, below the rest of the images. I wasn’t sure if I was doing something wrong or if this is an issue with jCarouselLite. Thanks.
Great plug-in. BTW, can you stop the carousel once it’s running??
Hi, your lite version of jcarousel is really great but I wonder if we can have for the autoscrolling version, the images moving smoothly rather than image by image with keeping the arrow left and right functionnal?
Wanted to post a quick thanks. This plugin is amazing.
@Mark, you can have as many jcarousels on a page as you’d like. Check out http://www.aurorawdc.com. Just make sure you’ve got the classes/css unique between the carousels, and of course, reference those in your javascript.
I’ve been using jcarousel lite, and it’s been working really well – however, when there’s only 1 image in carousel, it doesn’t display at all. Seems to be something to do with the negative ‘left’ CSS property that is set by your script. Changing this value in Firebug shows the image – 3 times! Just thought I’d let you know.
Nice jquery package! I’m just having issues with: padding/spacing around images (I’ve tried several styles with no luck), and titles/captions for images. Demos show the former, so maybe publish you css file for all to see? And, is latter possible?
Thanks.
Hello,
I really need the previous and next to be hover events not clicks. I would like to hover over the next button and the carousel scolls until I hover off of the button, same with the previous button. Do you know of a easy way to do this with your code?
Thanks,
Eric T.
Hi,
it would be nice if you would make the click event based on the settings, like this:
if(o.btnGo)
$.each(o.btnGo, function(i, val) {
$(val).bind(o.event, function() {
return go(o.circular ? o.visible+i : i);
});
});
(for prev and next, too)
Great work!
I have been trying to integrate this into my gallery widget via NextGen Gallery. It did not work. I have removed it from my homepage and created a test page so you can see what I have going on:
http://www.emmafrostfiles.com/test.php
Let me know if I am doing any thing wrong, thanks.
Hello,
I like your plugin, because of how lightweight it is, and use it often. However, I have found a bug in the “circular” setting, when the start position is not 0, and the “previous” button is hit.
I have isolated and fixed the bug. See line 290 of this: http://wayfarerweb.com/js/jcarousellite.js (line starting: if(to
Hi.
I also encountered the problem of having different heighted content inside the carousel. I figured out that the height attributes on li-elements are causing this. By removing these, the height will be set by the tallest element. (btw. can you say that element is tall?)
I did this by changing the line #247 of 1.0.1 JCarousel Lite from:
li.css({width: li.width(), height: li.height()});
to
li.css({width: li.width()});
For our case this did the trick and haven’t yet seen any side effects of it. You can also try it with packed version by searching and removing the a part of text “,t:f.t()” without the quotes naturally.
Bug report:
I’m using jcarousel lite as part of a form. The user can select a design from a style-switcher, and I’m using it to allow them to spin through a number of radio options with embedded images of each design. Certain radio options are impossible to select. I imagine this is due to the plug-in duplicating the input/labels.
great plug-in! i’d be lost without it.
please answer ted’s question above as soon as possible:
(#111: …Everything works and looks fine. But if you add “overflow:auto” or “overflow:scroll” into the CSS, it messes up the animation. Adding “overflow:hidden” doesn’t affect the animation.)
i’m having the same problem! i have a div set to “overflow: auto;” and when it moves left or right, it ends up staying on screen well outside of the container and . thank you in advance.
i’ve discovered a way around the “overflow: auto;” scrollbar problem and that is to make us of the jScrollPane plug-in:
http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html
I just love this plugin! Thanks!!
I have however an issue that others have already mentioned above. IE7 expands to enclose all images and of course this makes them all visible. Overflow set to hidden does not do anything. Help!?
Hi
This is really good tool.
But I have the problem:
I use the carousel inside an . And when the frame content is loaded first time, then carousel is displayed incorrect. It doesn’t work. I suppose that the problem is in the sequence of loading, but don’t know how can I fix it.
When I refresh the frame then it works fine.
Super Cool jQuery plugin! This saved me when the original jCarousel failed me, hehe. There is one missing though, I needed a feature that scrolls the carousel on mouseover event and stops it on mouseout (with buttons Next and Previous). To those who needs the same feature, this is my work around for it. Add this somewhere in jcarousel lite script near line 250:
if(o.btnPrev)
$(o.btnPrev).mouseover(function() {
prevInterval = setInterval(function() {
go(curr-o.scroll);
}, 1000); // put desired interval here
});
if(o.btnNext)
$(o.btnNext).mouseover(function() {
nextInterval = setInterval(function() {
go(curr+o.scroll);
}, 1000); // put desired interval here
});
if(o.btnPrev)
$(o.btnPrev).mouseout(function() {
clearInterval(prevInterval);
});
if(o.btnNext)
$(o.btnNext).mouseout(function() {
clearInterval(nextInterval);
});
This works for me but I hope we can have this in your next update
Hi, I think my issue may have been mentioned in part, but I have a strange bug.
I am loading external images into the carousel dynamically with AJAX. I’ve got it to build the carousel fine, and it scroll’s through the images great as well.
The only issue is when you go to a previous image it jumps to the first image and then scrolls forward through each image until it reaches the original “previous image”. And sometimes it seems to just go to whichever image it feels like.
Obviously it’s something to do with loading the images with AJAX, but if you have any idea’s that would be brilliant!
An example is on http://beta.wisheroo.com/image-fetch-example.php. Just insert a URL into the text box and click “Create!”
Very nice plugin (and the best thing is that it is realy light!). I had a problem thought but I don’t know if it has to do with the plugin or the jQuery library itself.
I’m using the 1.2.6 version of jQuery and when I try to init the jCaruselList I get an “uncaught exception: Node cannot be inserted at the specified point in the hierarchy”.
I see this error on Firebug console only when I use circular mode. I’ve checked the code and I can see that the problem was near line 230:
if(o.circular) {
ul.prepend(tLi.slice(tl-v-1+1).clone())
.append(tLi.slice(0,v).clone());
o.start += v;
}
if you change that with:
if(o.circular) {
tLi.slice(tl-v-1+1).clone().prependTo(ul);
tLi.slice(0,v).clone().prependTo(ul);
o.start += v;
}
the problem goes away!
Great lib! When using the “Auto Scroll” is there away to pause the scrolling. For example when you mouseover an image. The reason i ask i because i show a tooltip description of the image when you hover.
the Jcarousel doesn’t work with lightbox V2… can you confirme this?
Well, there is a mistake in my the code, so change the
tLi.slice(0,v).clone().prependTo(ul);
with
tLi.slice(0,v).clone().appendTo(ul);
@Danie: There is no such thing built in. I needed something like that and had to add some code.
@ben: Are you using Lightbox that uses prototype library? try using lightbox for jQuery, that might work
@ben: Are you using Lightbox that uses prototype library? try using lightbox for jQuery, that might work
Hello,
Has anyone managed to supply jCarousel with automatic scrolling, bound to mouseover, so that the closer the cursor is to either edge of the scrolled area, the largest the scrolling velocity (yet without wrapping/cycling the contents past the first/last item)? Willing to share a demo?
Of course, the velocity ratio should be configurable so that the widget is friendly and not a pesky nightmare…
Best to everyone,
~ipod
The installation page instructions do not result in a working Carousel. Following the instructions, the page displays a plain list of all images along with two non-working buttons.
Does anyone have a basic installation guide with all required css and other code? I have tried (and failed) to dissect the working carousel code on this site. Is there a more complete basic guide that explains a full working installation?
Thank you.
Okay well, nevermind. I have it working now after looking at your pages in different broswers.
Here’s a simple HTML/CSS Demo For Dummies, based on the code from this Ganesh:
http://www.mediafire.com/?g1skwnexz10
You will also need these two files:
jcarousellite_1.0.1.pack.js
jquery-1.2.6.pack.js
Good luck.
I am a total noob with JS, but I managed to get a crude pause on hover going.
I replaced:
if(o.auto) //line 274 in jcarousellite_1.0.1.js
setInterval(function() {
go(curr+o.scroll);
}, o.auto+o.speed);
with:
if(o.auto)
var refreshId = setInterval(function() {
go(curr+o.scroll);
}, o.auto+o.speed);
$(“.carousel”).hover(
function() {
clearInterval(refreshId)
},
function() {
refreshId = setInterval(function() {
go(curr+o.scroll);
}, o.auto+o.speed);
}
);
This is surely a very crude way of doing it, but it seems to work.
Now I only need to find out how to make it fade between images instead of slide them.
I know I probably could use another plugin for these things, but I’m using this as a learning exercise.
Just wanted to let you know that if this plugin is used along with the Tabs-UI plugin, you must call tabs() AFTER you call jCarouselLite() otherwise IE and Flock will display a carousel with no height or width and all images hidden.
Hi TwiiK, are you sure the code to pause it is correct? I can’t put it to work!
Thanks
great plugin !! one question how can I assign an other class to the prev or next button when the cycle is set to false so that I can give feedback that that was the last or first photo or text. thnx
found it … sorry class “disabled”
This plugin is really awesome. However, like most people, I also needed the pause option when auto scroll is set. I created a new parameter called “pauseOnHover” which does exactly as you would think. It’ll also stop the scroll when a user is clicking the button. Here’s the minified code, enjoy!
(function($){$.fn.jCarouselLite=function(o){o=$.extend({btnPrev:null,btnNext:null,btnGo:null,mouseWheel:false, auto:null,pauseOnHover:true,speed:200,easing:null,vertical:false, circular:true,visible:3,start:0,scroll:1, beforeStart:null,afterEnd:null},o||{});return this.each(function(){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;var isMouseOver=false;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);var ulSize=liSize*itemLength;var divSize=liSize*v;li.css({width:li.width(),height:li.height()});ul.css(sizeCss,ulSize+”px”).css(animCss,-(curr*liSize));div.css(sizeCss,divSize+”px”);li.mouseover(function(){isMouseOver=true;});li.mouseout(function(){isMouseOver=false;});if(o.btnPrev){$(o.btnPrev).mouseover(function(){isMouseOver=true;});$(o.btnPrev).mouseout(function(){isMouseOver=false;});$(o.btnPrev).click(function(){return go(curr-o.scroll);});}if(o.btnNext){$(o.btnNext).mouseover(function(){isMouseOver=true;});$(o.btnNext).mouseout(function(){isMouseOver=false;});$(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);});if(o.auto)setInterval(function(){if(o.pauseOnHover&&isMouseOver)return;go(curr+o.scroll);},o.auto+o.speed);function vis(){return li.slice(curr).slice(0,v);};function go(to){if(!running){if(o.beforeStart)o.beforeStart.call(this,vis());if(o.circular){if(to=itemLength-v+1){ul.css(animCss,-((v)*liSize)+”px”);curr=to==itemLength-v+1?v+1:v+o.scroll;}else curr=to;}else{if(toitemLength-v)return;else curr=to;}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());running=false;});if(!o.circular){$(o.btnPrev+”,”+o.btnNext).removeClass(“disabled”);$((curr-o.scrollitemLength-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);
@Oren: Thanks for taking the pain to create a “pauseOnHover” feature. I will definitely incorporate this into the next version of jCarouselLite.
No problem. It was a really simple change actually, just a few lines of code. If you want, I can email you the unpacked version…just let me know (and sorry for breaking the layout of the site with the code…nice fix!)
@Oren:
I would appreciate if you can send me the unpacked version. It will be easier for me that way. My email is ganeshread [AT] gmail [DOT] com. BTW, Don’t worry about the layout. What is more important is the actual code.
Ganeshji, amazing plugin you’ve got here. I couldn’t be more grateful.
I’ve run only into one problem. I have appended functions running using afterEnd. How do I know which button is pressed (next/prev)? I’d prefer not to assign an action on the next/prev link that I have because the user might click the link multiple times (incrementing the value of my variable each time), while the animation only runs once.
@Don Wilson: At present the only way I could think of to find out which button is clicked is through assigning a click event to them and setting a variable. But, as far as I can see there should be no problem with linking multiple times here because you don’t have to increment any variable. Instead you can have a variable that gets set to “next” or to “prev” depending on which button is clicked. That way even if it is linked multiple times you will get the correct value. Hope that helps.
Ganeshji, first and foremost, this plugin is wonderful and exactly what i was looking for. Everything works as expected in IE6 however, I’m having an issue with FF3. The elements appear as a vertical list. I have your code line for line and cannot figure this out.
Here’s the HTML:
$(window).load(function(){
$(“.pics”).jCarouselLite({
btnNext: “.next”,
btnPrev: “.prev”
});
});
@Natasha: Can I see a demo page somewhere? That could help me figure the problem out.
Hi Ganeshji,
Thanks man! The plugin is great! Could you please show me how to get first visible li in active carousel? Thanks.
… I mean to get it as a jquery object.
Hello Ganeshji,
This is a fantastic plugin! I have a problem/suggestion; when auto-scrolling the carousel, there is always a pause after each item(s), is it possible to have the automatic scolling continuous, so that it acts more like a traditional scroller with no pauses?
Thank you,
Matt
Ganeshji, thanks for your reply.
I’ll figure out a solution to the problem.
Hello,
Nice easy script, lightweight and really great effects but…
As i feared i need a small feature and i am a little stuck
I use carousel with external controls a small horizontal list of bullets, my carousel has always 5 slides so i have 5 bullets under the main carousel divs to navigate to slides 1 to 5… i want to change the style of the bullet when i autoslide to the corespondig slide
(what i mean is when in carousel slides 2nd frame, the 2nd botton changes style, and when the user presses one of them the autoscroll will pause)
I hope i can get feedback from you soon as i see you have a hard time keeping track of all these requests. I do not need the work done for me but a hint would be really apreciated, i am a developer but very new to jquery.
Kind regards and thank you
Dan
Hi, that’s a great script. Thanx for share!
I’m testing the LavaLamp menu and the animation works great, exactly as I want. But I’ve a problem: when I click on a link to access to another page, the line below moves&stop in the correct position under the menu, but the page do not change. If I click using the “open in a new tab” command, then it works. How’s that?
Sorry, I used to work exclusively with css but I’m a newbie on jscript, so maybe I missed something…
Hope you can help
Ciao
Paolo
…yep, now I got it.
@Dima: Register a beforeStart or afterEnd event with jCarouselLite. These callbacks will receive a jquery array of the visible elements at that time. You can get the first visible element out of it by using array index.
@Matt: At present this plugin is not equipped to do that. But feel free to play with the code. I would be glad if you could share your completed version so that I can incorporate into the next version of jCarouselLite asap.
@Dan Marin: Comment #161 posted by Oren gives you the code to pause the carousel on hover. I am sure it can be adapted to get a pause effect when your external controls are clicked. To style the external controls based on the current slide position, you should use the afterEnd event. The afterEnd event will receive an array of “li” that is currently visible. You can get the current “li” from this and add a class to the appropriate external control. I guess some naming convention for the “li” and external controls could ease the job here. Hope that helps.
Hey there,
cheers for the plugin, awesome stuff. I read through some of the comments and found out how to add an active class to external controls, so I can style them better. Problem is though that I use next and previous buttons as well. Now if I click on these the active class gets removed, which is good, but how do I assign it then to the correct next or previous external control?
It can be seen here: http://travel-junkie.com/community/
This is the code I have so far:
$(document).ready(function () {
$(“.jcarousellite”).jCarouselLite({
btnNext: “.car-next”,
btnPrev: “.car-prev”,
btnGo: [".externalControl .1", ".externalControl .2", ".externalControl .3", ".externalControl .4", ".externalControl .5", ".externalControl .6", ".externalControl .7", ".externalControl .8", ".externalControl .9", ".externalControl .10"],
vertical: false,
circular: true,
visible: 1,
speed: 1000,
});
$(“.externalControl a”).click(function() {
$(“.externalControl a.aktiv”).removeClass(“aktiv”);
$(this).addClass(“aktiv”);
});
});
Cheers…
Hey there. Thanks for the code and for your responsiveness to issues.
I’m not sure what is causing it (and have a feeling it may be the existence of SWFobject on the same page) but this page crashes IE 6:
http://www2.thenorthface.com/eu/oneofus/index_crashIE.html
If I remove the jCarousel Lite code, the crash doesn’t happen. Any ideas?
Thanks in advance,
nate
Cool! Thanks a lot!
Thanks for the great Script!
However I can not get the carousel working in IE7 within a table cell. I’ve tried switching to ID’s and it still fails to load. Fire Fox and Safari both work fine but IE7 and IE8 both fail, only displaying a static veritcal list.
Any ideas? I would really like to get this working! I can’t post a link to the page as it’s internal, but here’s the structure.
$(document).ready(function () {
$(“#jCarouselLite”).jCarouselLite({
btnNext: “.nonCircular .next”,
btnPrev: “.nonCircular .prev”,
circular: false,
visible: 10, scroll: 4, speed: 800, start: 8,});
});
previous
|
next
test test test–>
Hi, thanks for sharing this great script!
– but i´m not able to run “custom widget”.
I am not very familiar with js – but i run jcarousel + “more or less” + “autoscroll” works fine
It would be a great help if someone can post a working “custom Widget” code
Thx in advance
Hi! Firstly, I’d like to thank you for the excellent plugin. But I have a little problem: I have a carousel, with some thumbs, like in the “Custom Widget” page here. I preload all the (“big”) images on the top of page, using some PHP inside the script tags, and everything OK. But, when I click my carousel thumbs, in order to change the src of the big image (using the preloaded imgs), some problems ocurr. For exemple, having 7 images (0-6), when I click the thumb 0 or 1, it goes ok, but when i click my button to scroll the carousel to the left, and click on the image 6 (for example), the “click” event doesn’t “trigger”, thus my big image doesn’t change.
Sorry for my bad english.
Hello.
I am having a problem with the plug-in. I am installing it, everything seems to be ok, but I get this in firebug console:
“a[0] is undefined”
and nothing works.
Does anybody have a clue, what’s the problem?
Hi, my problem is solved. I was refering to ul itself, not to the block-line parent. So everything works great.
Hiya,
Cool job with the jcarousellite. The only problem i had was that our users can be scrolling through 100’s of their images and the jcarousellite loads them all at once.
I implemented a readahead\readbehind system where only the visible window +- an off-screen buffer gets the src attributes set immediately. The off-screen buffer scrolls with the visible window so eventually all images src’s are set (by reading the src off another attribute set on the img element).
PC
@Phil Compton: That is great work. Would you be kind enough to share your work with me so that we can release it with the next update of jCarouselLite. You can either post the code here or you can email me at ganeshread [at] gmail [dot] com. Thanks.
Thank you for your support, that helped me a lot and now it is working
You are doing a wonderful job with this plugin and also the support you are giving…
Keep up the good work , pray to be more people like you
Kind Regards
Dan
Hey! I really love your plugin, but there is one problem for me.
. Iam working on a gallerie and this is the last step i have to do. Is it possible to get this little thing to work?
If I use a externalControl I haveto setup the btnGo so: btnGo[".0",".1",".2",".3",] If I insert variables instead of the: “.0″,…”.3″ it works,too but now my problem. If I insert an array (btnGo[thearrayname]) it doesn’t work anymore
Please,pleas,pleas write back soon!
Thank You, BroOf
Hi,
Loving the plugin. I’m having some problems with going backwards. I wrote something to the jQ mailing list but it’s remained silent. Here’s a link to the details. If anyone can offer any advice, I’d really really appreciate it.
http://groups.google.com/group/jquery-en/browse_thread/thread/671db5bf60dace3a/
Thanks!
Will
Hello,
I’ll send through my read-ahead\read-behind buffer stuff for your perusal when I’ve finished.
Another wee problem I’ve noticed – we allow our users to alter the size of the page and hence the size of the carousel visible window. Unfortunately when I call .jCarouselLite(…) multiple times so I can alter the ‘visible’ option the event handles get bound multiple times and everything goes crazy. If your event handlers are already bound there seems no need to bind them again so it may be best to make these named handlers, rather than anonymous?
Phil
@Boris: I guess, in your HTML the next/prev” buttons also get selected as part of the “.externalControl a” css selector. That is the reason why when you click the “next/prev”, it gets the “aktiv” class assigned and the class from the actual external controls removed. If you can change the css selector from “.externalControl a” to something more specific so that the “next/prev” buttons don’t get selected, you should be fine.
@Rob Knecht: As far as I can see the code is fine and is working fine here for me. Maybe just because there is an extra comma towards the end of your code that is causing the problem.
@RelaXX: The code given in the demo section of the plugin project page is working piece of code. Hope that helps.
@Misha: Glad you got it working
@BroOf: The btnGo parameter takes an array. You definitely can supply an array like “btnGo: arrayVariableName” and it will work. Hope that helps.
Thank you Ganeshji! I’ve put the array the wrong way into the function. I always wrote: btnGo: [arrayVariableName]
Thank you so much for this but there is still one problem.
I create 7 buttons with a For-Loop. For each picture a button (yes, I have 7 pictures^^, the value is stored in counter (counter = “7”).
http://pastie.org/287842
Now I convert the “check-array” into a string and put it into the btnGo function.
http://pastie.org/287849
Now when I click on a button the slider moves!!!! But only one times and only on the same picture (If I klick on button one or five, it jumps always on picture three).
Any Ideas?
This is a nice script and very simple to use; however, I did notice a problem when using non-circular carousel. Scrolling to the end does not work if the number of items is not divisible by the scroll amount. For example, if I have 6 items and only 5 are visible and my scroll size > 1, I cannot scroll to view the last item. I have implemented a patch locally which I would be happy to share with you (simple code is also simple to fix).
Thanks Ganeshji – I actually found that missing comma, and all seems to be working now…
except I have the exact same problem as Jeremy in the above post.
Jeremy: Could you please share your fix, it would be very helpful.
Thanks for the support!
Hello,
I’ve noticed a couple of bugs when scrolling forward or backward in circular mode when o.scroll > 1. The correct index is not alway set when wrapping from end-start or start-end.
I’ve rewritten this code brach as follows, which seems to work. I hope i understand what you were trying to achieve. Looks like you were setting left\top to curr +/- (liSize * o.scroll) depending on if you were scrolling back or farward – to make it appear to have a consistent\smooth animation to it’s final position.
if (o.circular) {
if (to = itemLength – v + 1) {
curr = v + to – (itemLength – v);
ul.css(animCss, -((curr – o.scroll) * liSize) + “px”);
} else curr = to;
} else {
//NON-CIRCULAR HERE
}
Phil Compton
sorry, not the code i meant ot paste. try again:
if (o.circular) {
if (to = itemLength – v + 1) {
curr = v + to – (itemLength – v);
ul.css(animCss, -((curr – o.scroll) * liSize) + “px”);
} else curr = to;
} else {
//NON-CIRCULAR HERE
}
You’re forum seems to be screwing with the code i’m pasting cos that’s not what i pasted into the box. I’ll email you my fix.
if (o.circular) {
if (to = itemLength – v + 1) {
curr = v + to – (itemLength – v);
ul.css(animCss, -((curr – o.scroll) * liSize) + “px”);
} else curr = to;
} else {
//NON-CIRCULAR HERE
}
Thanks for your response. I think I wasn’t very clear on what I was trying to do. Basically I want the aktiv class to move forward/backward as well, when I click on next/previous, which right now it doesn’t do. Right now the aktiv class gets only assigned when I use the external controls.
next/previous links have their own div (.carousel-controls) by the way, so they can’t be selected with .external-controls.
Cheers!
Thanks for the great plugin. I’m having a problem getting this to work when there is a unordered list nested in the list, since it seems to loop through all the list items. Is there a workaround for this?
Here are the code snippets that contain the changes (marked with PATCH-MW):
if(o.btnPrev)
$(o.btnPrev).click(function() {
/* PATCH-MW: If not circular, need to
* scroll to 0 if the scroll would result
* in a negative number */
to = curr-o.scroll;
if (!o.circular && to itemLength-v){
to = itemLength-v;
}
return go(to);
});
// Disable buttons when the carousel reaches the last/first, and enable when not
if(!o.circular) {
/* PATCH-MW: Changed criteria of when to disable and
* enable prev/next buttons based on corrected scrolling
* behavior.
*/
$(o.btnPrev + “,” + o.btnNext).removeClass(“disabled”);
if (o.btnPrev && curr == 0){
$(o.btnPrev).addClass(“disabled”);
}
if (o.btnNext && curr >= itemLength-v){
$(o.btnNext).addClass(“disabled”);
}
}
hmm…that looks more difficult to read than I intended…there are actually two sections of code. The second section starts where the comment “// Disable buttons…” is.
So I’ve been using jCarouselLite for displaying a list of thumbnails for videos and I’ve been working to implement a sort of “paging” with a second carousel. This second carousel contains the page numbers, and can be shifted left and right as well.
My question might be jQuery related as much as jCarousel because I’m new to jQuery. But I put in some hooks in the carousel for “Next Button Clicked” and “Previous Button Clicked” events so that I could extend the functionality of the carousel whenever they clicked on the arrows. This allows me to change the colors to highlight page numbers, etc.
However, what I’m looking to do is access an already existing jCarousel object. Can I do that through jCarousel or jQuery? In other words, I need to grab an existing jCarousel, and, lets say, call it’s “Go” function or read itemlength, or read it’s options. Is there any way I can do that external to the jCarousel function?
I’m new to jQuery, so if anyone has any links to how to do that through jQuery, that’d be appreciated. I just haven’t been able to find much – “get jQuery object” is kind of too generic.
Thanks.
I am using the carousel in the vertical configuration with jquery 1.2.6. Everything works great until I declare a start position. If I declare a position that is 6 or above, the carousel starts flaking. It does this regardless of how many items I have in the carousel. By flaking I mean you start scrolling and at some point, it won’t scroll and keeps sliding back the the same set of items. This happens in all browsers. Have you seen anything like this? Thanks for the great code…
Kevin
Regarding a previous post:
“I was trying the yuicompressor on jcarousellite 1.0.1* and got this
error: “invalid property id” at line 239:
line 239>> li.css({overflow: “hidden”, float: o.vertical ? “none” : “left”});
What could be wrong?”
I ran across this same problem, and it is because float is a reserved word. Changing it to ‘float’ appears to fix the problem.
Do you know of any issues this plugin has with blockUI plugin? I’m trying to get this carousel to work with a overlay effect and the carousel won’t show in the blockUI overlay. Have you used it in any way similar to this?
Hi,
Congratulations on a really usable, clean plugin. I’m really happy with the implementation, see http://www.codiga.co.uk. However I do have an issue I wonder if you can help with. Its on IE7 on a pc; if you resize the browser the carousel remains positioned where it was on page load. I presume there is some positioning which is calculated in the javascript and because my page design is centred (and the carousel also sits within a div which has a float left on it) this is causing the problem. Any advice at all would be appreciated.
Thanks
Steve
Hi,
Just a note to say I fixed the problem by putting position:relative; on the body tag
Thanks,
Steve
Hi,
We have an internal website that has the need for several different carousels. So our graphic artist has a central area with controls on the right that should load different carousels in the central container. I am using the jquery $.ajax function to load the data, and after the carousel has loaded, I then make the call to the jCarouselLite method. Now, if a user clicks on the carousel switcher too quickly, IE 6/7 throws an error: ‘Microsoft JScript runtime error: Object doesn’t support this property or method’ and then displays crazy line numbers. If I disable script debugging, click on the navigation to load the carousel again sometimes resolves the issue. So finally to my questions:
1. Are you aware of this IE issue or how to fix it?
2. Would it be possible to add a method where you could dynamically add and remove items. So in this instance, I would loop through and delete all existing lis, and then push in the new lis.
Thanks
Brendan
A fabulous script, and the USP is definitely the light-weightedness vis-a-vis the features. Got it running in all variations with jQuery v1.2.3. But not with v1.2.6. No errors though.
Sorry! It works with jQuery 1.2.6 after all. The mistake was from my side – some messing up with my existing CSS. Works like a charm on a clean, fresh screen.
Hello Ganeshji – great plugin! I am wondering about the “start: ” option, and how one could have the carousel start on a random image.
I tried using Math.floor with Math.random as the value for start: to generate a random starting number, which does work, but also causes unexpected behaviors when scrolling through the carousel after it loads.
Is there a better way?
Thanks for a real helpful script.
I’m trying to accomplish two tasks, using the Custom Widget:
1. I’d like to display the selected image’s title and caption, along with the image, in . (I can probably hide these inside the carousel’s tag using CSS when the data is first loaded, so it could be pulled from there.)
2. I’d like to display the first image in the carousel as a default in until an image from the carousel is clicked.
Either of these have a reasonably straightforward solution? I’ll keep plugging away just in case.
So a little FYI. I have successfully loaded new li’s in via Ajax. To avoid issues with IE, I had to unbind the click event on the navagation items (Without this, a memory leak occured), ajax in the lis directly into the ul, and then on success recall the jcarouselLite function.
@Gary: For your first item, you could always put a hidden div inside the li that contained this information, or even bind a click event to the li (or image) to have it adjust the widget as well.
Having trouble with the vertical feature. When I change to code to: $(“.vertical .gholder”).jCarouselLite({
btnNext: “.vertical .next”,
btnPrev: “.vertical .prev”,
vertical: true
});
The carousel displays all four images instead of the three it displays when working in the default horizontal mode. Also, the next and previous buttons no longer work. I can’t find what I might be doing wrong.
Hi there, great plug in, i’m having some trouble with the carousel not being visible the first time you go to visit the page. Once you revisit the page, the carousel shows fine, but the first time you go there, it is just blank – any ideas?
thank you so much for this plugin, its friggin amazing! you can see where its used at http://www.epicrush.org let me know if you want a link back on the page or anything, thangs again
Thx you for ur plugin,i solove the problem now,i spent 5 days to work it out,and your plugin slove my broblem in few mins,thx very much.
Ganesh
Nice work.
I am trying to use you lava lamp menu.
I wanted to ask you once I click one particular menu item and it navigates to another page how is it possible to highlight the menu item that was clicked. Now what it does it whenever i click any menu item and it navigates to another page the highlight moves to the leftmost menu item.
Any suggestions
Ganesh,
Thanks for your work. I have a quick question and I can’t seem to find an answer (go figure). Anyway, what I am trying to do is instead of use the same image src for the thumbnail, I want to use a smaller image that I compressed and resized. The problem is here:
$(“.widget img”).click(function() {
$(“.widget .mid img”).attr(“src”, $(this).attr(“src”));
Instead of using the source of the smaller file I want to replace the image in the .mid div with the larger version of the picture from the “big” sub-folder. Is there anyway to adjust this?
@BroOf: I guess you should not convert the check-array to string. Instead use “btnGo: check” without the quotes. That should work.
@Jeremy Thibeaux: Oops, Thanks Jeremy for the fix and for sharing it with us.
@Rob Knecht: Good to hear that you got it working. I hope Jeremy’s Fix fixed your other problem as well.
@Boris: I am sure, you can get that to work buddy. As far as I can see you might have to structure your HTML and javascript differently to achieve that. Since I am not able to understand your problem clearly, I am not able to help you at this time. Sorry about that.
@matt: Oops, At present I don’t have a fix for this matt. I would suggest you play with the code. But, as soon as I am able to squeeze some time out, I will fix it and update it on my blog.
@steve menday: Glad to know your positioning problem got fixed.
@Brendan: Glad you got it working and thanks for sharing your solution here. I really appreciate the gesture.
@Arun Menon: Glad you got it working on 1.2.6. I was wondering about it, coz I have it running on one of my sites and didn’t have any problem whatsoever.
@Brian: There should be no problem to use Math.Random to generate an integer value that falls within the carousel range. Check whether the random number generated is falling outside the range sometimes. Remember, the index starts at 0, not 1.
@Kevin: I haven’t heard such a problem. Most probably some part of your CSS is messing with the carousel maybe. I would first work in a fresh clean page with the carousel alone and test it out, before integrating it as part of a larger website.
@James: I guess there is some problem with Firefox 3 and the document.ready function getting fired that could be the cause of your problem. Try window.load instead.
Hi!
Is there a new version available where i can use images with different width and height? Would be a nice feature!
Thx a lot!
Rafael
Hi, I have experienced some odd behaviors when using the carousel.
1. When showing only one element at a time (visible: 1) I’d like the next element to enter from the right end of the container div. Now the width is calculated from the widest of the elements or something and it looks weird when the next element enters from the middle of the page. (I have used a large margin on the contents of the li:s as a workaround but it has bad sideeffects.)
2. When using the carousel inside an absolute positioned div the contents of the carousel is hidden in IE6. I see that you set the z-index of the li:s but I think they need a higher value or something.
3. When using vertical scrolling for e.g. a link list I have experienced the carousel to scroll a few pixels too much each time, which after a while means that I have two half rows of text.
Thanks for a great plugin!
Hey there! This plugin is a life saver, it’s defiantly the easiest jquery carousel plugin around, but I’m having an annoying problem with it. For some reason it wont let me change the size of it. Any ideas on how I could fix this?
Hi! This plugin is great and is easier to use than full jcarousel when you need to do something custom. I ran into a problem when using circular mode. It did not appear to be truly circular, it would just jump to the beginning or end if it could not make it to the next interval. I worked on the logic for a few hours and the resulting logic is even simpler than the old code. If the intention of the circular mode is to truly be circular regardless of scroll amount or visible items, the patch I’ve made should make it do so.
— jcarousellite_1.0.1.js Mon Oct 27 18:20:27 2008
+++ jcarousellite_1.0.1.js Mon Oct 27 18:06:05 2008
@@ -228,9 +228,9 @@
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;
+ ul.prepend(tLi.slice(tl-v+1).clone())
+ .append(tLi.slice(0,o.scroll).clone());
+ o.start += v-1;
}
var li = $(“li”, ul), itemLength = li.size(), curr = o.start;
@@ -287,14 +287,12 @@
o.beforeStart.call(this, vis());
if(o.circular) { // If circular we are in first or last, then goto the other end
- if(to 1, then the “to” might not be equal to the condition; it can be lesser depending on the number of elements.
- curr = to==o.start-v-1 ? itemLength-(v*2)-1 : itemLength-(v*2)-o.scroll;
- } else if(to>=itemLength-v+1) { // If last, then goto first
- ul.css(animCss, -( (v) * liSize ) + “px” );
- // If “scroll” > 1, then the “to” might not be equal to the condition; it can be greater depending on the number of elements.
- curr = to==itemLength-v+1 ? v+1 : v+o.scroll;
+ if(toitemLength-v) { // If beyond range, then come around
+ ul.css(animCss, -( (curr – tl) * liSize ) + “px” );
+ curr = to – tl;
} else curr = to;
} else { // If non-circular and to points to first or last, we just return.
if(toitemLength-v) return;
I figured the patch wouldn’t post correctly. Ganeshji, can you contact me through e-mail so I can send you the patch to look over?
Hi – Did anyone actually succeed to make Oren’s script (PauseonHover) work? I Copy & pasted it and the script just doesn’t work.. (The carousel stopped working)..
if ANYONE have a working code of this PauseonHover Jcarousel Lite Script, can you please, kindly send it to – royazr gmail com ?
thanks, Roy
@Roy, Check out the patch I posted here: http://plugins.jquery.com/node/479#comment-2141
Once applied, you can enable it by setting hoverPause:true in the jcarousellite options.
I recently did a modification that would allow multiple rows (horizontal) or multiple columns (vertical scroll). If you would like to take a look at the modification and possibly include it in a release, just send me an email.
Thanks,
Tim
Here’s a link to the JS that accepts the pauseOnHover parameter:
Uncompressed: http://orengold.googlepages.com/jcarousellite_1.0.1_pause.js
Minified: http://orengold.googlepages.com/jcarousellite_1.0.1_pause.min.js
Hi,
When I set speed to 0, it doesn’t get rid of the transition. Is this just me or is it a bug?
Also, when using btnGo, say, if you click on the first image when you’re “on” the last one, it will fly backwards really quickly to the first one. I don’t mind, but some people might go to the hospital over this
j/k
Is there any way to make it where it would just slide to the one you click on as if it were the next image? Thanks. Great tool!
BUG: please test the following … (10 total items), circular: true, visible=4, scroll=4 … because of the difference of 2 items when the carousel reaches the end it is midway between a set, position wise it does a hard reset (jumps position) then it scrolls …
easy fix is to duplicate the 10 items (10+10=20) == (4+4+4+4+4=20)
I need change width:600px,
For those who are having trouble with overflow:hidden in IE7 here is the fix that I found. Open up the jcarousellite.js file or whatever you named it. Change visible:3 to visible:1. You may have to download the non minimized version to see this.
Hope that helps.
Hello Ganeshji : To clarify on my original comment. Math.Random causes unexpected scrolling issues if the carousel is in circular mode. I observed the need to count the correct number of items beginning at 0, but the scrolling will not remain truly circular if start is a random value for me.
What happens is that upon reaching a certain item position, the carousel will then scroll backwards once upon the next click. I haven’t the JavaScript fu to be able to determine where the problem lies, or if it is just not possible to have a random start on a carousel in circular mode.
Any ideas?
Thanks again for the awesome plugin!
Great script, but it is not working at all in Safari 2. Even this page in Safari 2 does not show the carousel contents. Any thoughts?
Please, post the ‘update’ on the project page too. ¬¬
Great plug-in but I getting an error on line 336 (5).
‘0.offsetWidth’ is null or not a object.
:S
Well, I decided to try to troubleshoot the script myself and found that this was the offending line:
li.css({overflow: “hidden”, float: o.vertical ? “none” : “left”});
I changed it to the longer syntax so everything would be passed as strings:
li.css(“overflow”, “hidden”);
li.css(“float”, ((o.vertical) ? “none” : “left”));
I guess that Safari 2 didn’t like the use of “float” as something other than a datatype. Maybe you could put this in your next point version.
Excellent plugin, but I have a problem with it
I’m using it on Ruby on Rails with jquery-1.2.6.js and I can’t configure it to work together with prototype library, I have the following rails code:
jQuery.noConflict();
for those who do not know rails this generate the following code
jQuery.noConflict();
Thanks in advance for any help, I really want to use this on my project.
If i use carousel two times in two different tabs then it will work in first tab but not working in the remaining tabs. But this issue is only in IE. In firefox its working fine. I doubt due to the Z-Index it is not working in IE.
Pls help me out in this bug.
About the offsetWidth problem on my previous comment (239), it’s only on IE.
Forget my last comments, it was my fault. Great plugin for light weight. You can predefine some function to get the position of carousel. It’ll be appreciate. Thanks, great job.
Does anybody know how can I apply a fade transition between the images?
I have try a lot of plugins but I don’t get it.
This is a great plug-in, nice and lightweight!
I’ve a bit of a n00b question though, which I hope you can help me with.
I’ve set up a carousel successfully, and all works well, but I’m also looking for the ability to jump straight to a given page after the carousel has been loaded (so setting “start” in the constructor won’t really work for my case here).
I reckon all I need to do is get the go() function to fire, but can’t get it to work for me. I think it’s just a basic syntax error, but being new to jquery, amn’t quite sure where I’m going wrong.
What I have so far is:
$(“#browser”).jCarouselLite({
// Set up options
}
and am trying something like:
Index
but am getting syntax errors on the above (“go is not a function”)
Any help would be much appreciated!
Copy and pasted HTML into the above, and it rendered the link, silly me – the line where I was getting the syntax error is:
<a href=”#” onclick=’$(“#browser”).jCarouselLite.go(index);’>Index</a>
How abt the vertical auto scroll…anyone out there…i need to try it
Thanks GaneshJi
I required to disable the next and prev whilst the carousel animated. This was because I had a separate external button (BtnGo) list that showed as selected whether you used the external controls or the .prev or .next. As I couldnt find a “whilst animated” attribute I had to use the afterEnd to removeClass(“disable”) and use addClass(“disable”) on the prev.click and .next.click which only ran if (!$.prev)hasClass(“disable”) or (!$.next)hasClass(“disable”). I hope that makes sense to anyone who had a similar problem. (But a whilst animate would help – thanks Ganeshji and great notes on the file)
For anyone wanting to use different widths, there’s a CSS workaround that will sort of allow this.
Just set an important styled width on the containing the wider than normal image:
The !important tag will force the browser to obey the width you specify even when jCarousel overrides.
The catch is that jCarousel will scroll based on the normal widths, so a larger image will only partially scroll off the viewable area (try it out, you’ll see what I’m talking about). This was ok for my purposes … hopefully someone else will find this info useful.
For those wondering how to reset the timer when hover or click on a button
// arround line 252
if(o.btnPrev)
$(o.btnPrev).click(function() {
clearInterval(refreshId);
refreshId = setInterval(function() { go(curr+o.scroll); }, o.auto+o.speed);
return go(curr-o.scroll);
});
if(o.btnNext)
$(o.btnNext).click(function() {
clearInterval(refreshId);
refreshId = setInterval(function() { go(curr+o.scroll); }, o.auto+o.speed);
return go(curr+o.scroll);
});
// arround line 287
if(o.auto)
var refreshId = setInterval(function() { go(curr+o.scroll); }, o.auto+o.speed);
$(“.anyClass”).hover(
function() {
clearInterval(refreshId)
},
function() {
refreshId = setInterval(function() { go(curr+o.scroll); }, o.auto+o.speed);
}
);
Ganeshji, thanks for the great plugin. I’ve been using it for various projects but I think I’ve stumbled across a bug. It seems that when circular is set to true and the start index is set to something other than 0, there’s a consistent skipping of images when clicking the previous button.
For example, when circular is set to true, jcarousellite clones the number of visible elements and prepends and appends them in the DOM like this:
visible = 2
start = 4
Some image (cloned)
Some image (cloned)
Some image
Some image
Some image
Some image
Some image
Some image
Some image
Some image (cloned)
Some image (cloned)
What will happen is that it will start on the fourth element (the 6th one down) as expected, but when previous is clicked, it will skip over 4 elements (or whatever start is set to) and land on the element before the first cloned element…in this case “nav-5″. From glancing at the plugin code, there is probably an addition issue with the start value during the ‘is this the first element’ check.
oops, i forgot to escape my markup. imagine li elements surrounding each “Some image” with an id in the order of:
nav-6
nav-7
nav-1
nav-2
nav-3
nav-4
nav-5
nav-6
nav-7
nav-1
nav-2
Sorry for the mess.
ack..i thought I read all these comments. the ordering on the front page has the oldest, not the newest first
. Sorry for posting a known issue…i’ll try the fixes posted. Thanks!
@Dimas & @Kevin
Your issues may be related to the bug I submitted a patch for. The patch can be downloaded here: http://plugins.jquery.com/node/4572
Post your e-mail address if you would like me to send you the patched version.
Dear Ganeshji,
I’m trying to use this great plugin like a shopping cart system… but it’s so diffucult for me to “edit the code” and explain in english.
Maybe, it’s possible a mail contact?
Thank you
Hi Ganeshji,
I have modified a bit the code of the 1.0.1 version to address some issues I had with the carousel in non-circular mode. Let me know if you’re interested in a patch. Here are the issues I addressed:
1- An input parameter was added to give the carousel a start position at load time. I use it to center the carousel on the selected item;
2- It was not possible to see the last items if the list length was not a multiple of the scroll length. It is fixed;
3- The “previous” and “next” buttons were not “disabled” correctly when the position was at the beginning or the end of the list. Now they are.
4- The “disabled” attribute was not set on the “previous” and “next” button upon loading. It was done only after a call to “go”. It’s fixed.
Regards,
jf
hi. i’m trying to make my jcl adjustable to width (container takes 100% and items take 25% each), is it possible to make it scale to container width dynamically without having to refresh the page?
It’ s possible to add an item via Json (Jquery )Ajax call?
Tks
is it possible to have link within the content and when click scroll the page instead of using the control buttons?
Hello. thanks for the great plugin. I found some strange behavior. When using non-image content, the height of the last li element is what determines the height of all elements of the carousel. That is to say, if you have a li tag containing multiple paragraphs, and the last li tag contains just one sentence, all li tags will be truncated to one line.
Great work, Ganesh! I was wondering if you will provide for addition and removal of items in the carousel at run-time?!
Hi,
I am using your widget and it is great. I have a little problem when I try to implement your “Custom Widget” implementation of the jCarousel. If I have 5 pictures in my list the only those 5 pictures are clickable, all of the rest that the jCarousel code creates are not clickable, for example, if I go one step left after the page loads, then the picture that came from the left side is not clickable. What is the problem?
hi,
i don’t undertand why this page works fine (horizontal view) on Safari and FF, but not in IE7 (vertical view) :
http://compagnieterrainvague.fr/test.php
Could someone help me to undestand that ?
thanks a lot,
JG.
I have implemented the custom widget but I want to have different images above and below. eg. create a separate thumbnail to the image above. Can someone tell me how to do this in the javascript?
Thanks
ignore my last post. I did it by using a split and having the tn as a gif and the big one as jpg
$(“.widget .mid img”).attr(“src”, $(this).attr(“src”).split(“.”)[0] + “.jpg”);
So im trying to get this running on my site. I have everything going as id like but one things.
http://www.taultunleashed.com/
Take a look at the images in ie7. Be sure to reload it a few times. You will see it works just fine but its not displaying the bottom carousel. Im almost sure its in my css because if you go to http://taultunleashed.com/tutest.php it looks to be running just fine (at least on my comps). So the problem resides in the original css.
This may well have been addressed already, but I thought I’d drop you a quick note before I quit working for the evening. Here’s a situation I ran up against.
BUG: If you have a scroll>1 and circular=false, then the last scroll will not execute if it has a fewer number of items than the value for scroll, resulting in the last few entries being inaccessible.
SOLUTION: If you modify line 301 to account for the greater scroll value, it will remedy this problem:
if(toitemLength-v+o.scroll) return;
So far, this has been a great plugin, and I look forward to using it on more sites.
Thanks!
Hi, I would just like to say thanks for this super script. Simple and effective. I also made a small upgrade to it that might interest someone else, didn´t take myself the time to read all the comments on this page so this may already have been “fixed”.
I didn´t like that the carousel ride didn´t stop when you clicked another btnGo while it was animating so I just added a few lines and voila. In the function go() find the closing bracket for “if(!running) {” and add this:
else if(running) {
ul.stop();
running = false;
go(to);
}
And there you have it. Now the carousel will stop and go to the new location.
Again thanks, Kristofer.
Hi, I would just like to say thanks for this super script. Simple and effective. I also made a small upgrade to it that might interest someone else, didn´t take myself the time to read all the comments on this page so this may already have been “fixed”.
I didn´t like that the carousel ride didn´t stop when you clicked another btnGo while it was animating so I just added a few lines and voila. In the function go() find the closing bracket for “if(!running) {” and add this:
else if(running) {
ul.stop();
running = false;
go(to);
}
And there you have it. Now the carousel will stop and go to the new location.
Again thanks, Kristofer.
i had a problem with correct display of images when using a btnGo navigation.
f.e. when you have a carousel with 5 images you have 5 buttons from 1 to 5 which display the given image when clicked. i had the problem that when clicking on button 1 image 2 was display and so on and so on.
i changed the btnGo function and now it works:
if(o.btnGo)
$.each(o.btnGo, function(i, val) {
$(val).click(function() {
return go(o.circular ? o.visible+i-1 : i);
});
});
Has this issue been solved?
…. Internet Explorer 7 (go figure) is scrolling too much with each click of the next button….. posted by John
Thx
I solved it by putting the image as background image not as standalone.
Please put this in know issues.
Hello,
First, i ‘d say your script is a GREAT WORK.
Also, i’ve a question : Is it possible to put a JCarousel Lite IN a JCarousel Lite ?
I ‘ve tried it with my following code but it seems doesn’t work.
//
Titre 1
Texte 1
element 1
element 2
elem corps 1
elem corps 2
Titre 2
Texte 2
gauche 2droite 2
Titre 3
Texte 3
gauche 3droite 3
prevnext
An idea ?
THX for your reply.
Christophe
I love the carousel but while I was trying to implement it on my site, I came across the following problem, that I managed to solve today and am posting here in case anyone else has a similar issue and needs help. I had the carousel displaying 5 items (out of a total of 25, although this is irrelevant!), each set to 20% of the width of the containing div. When I resized the browser to be a smaller width, the carousel still remained the same width, thus giving me a vertical scrollbar. Ideally, I wanted the carousel to resize with the browser. This is how I overcame it:
1. Download and use the non-minified version of jCarousellite (you can re-minimize this later with one of the many online tools out there that do this)
2. Move the variables liSize, ulSize, divSize, ul and curr to be decalred outside of the main function, so that they’re global variables and thus visibile in your main page. Leave where they’re set in the function as close as possible to where they normally would be.
3. Download and use jquery.wresize plug-in – this overcomes a bug in IE which fires mutliple resize events when you resize the window – will make this work alot better and faster.
4. Calculate the current difference between your div containing the ul for the carousel (#carousel in this instance) and your window – win_car_difference = $(window).width() – $(‘#carousel’).width(); Do this as the last thing in your $(document).ready
5. The jquery.wresize will get you to write a resize handler function, which gets called when your resize the window. In this function place the following code, which will change all the carousel variables to get it to work with the new window width:
var W = w.width();
if (win_car_difference != 0)
{
$(‘#carousel’).css(‘width’,W – win_car_difference);
divSize = W – win_car_difference;
$(‘.carousel_li’).css(‘width’,(W – win_car_difference)/5);
liSize = (W – win_car_difference)/5;
ulSize = liSize * itemLength;
ul.css(‘height’, ulSize+”px”).css(‘left’, -(curr*liSize));
$(‘#carousel’).css(‘height’, ‘170px’);
}
In this example, 5 is the number of visible elements in the carousel and the height of each li is 170px – you need to reset this for some reason.
Hope this helps!
Ive seen a couple posts regarding this, but I am updating the # of items in the carousel dynamically and wonder if there is there a way to tell the JCL to ‘refresh’ itself so it isnt cycling to invisible items? Thanks! Great plugin!
-Adam
I found a bug when i ran the code:
$(“.moreimages .images”).jCarouselLite({
btnNext: “.moreimages .next”,
btnPrev: “.moreimages .prev”,
visible: 6
});
if i clicked NEXT first, the images disapeared, but if i clicked PREV, it worked, also if i clicked PREV first, then NEXT it also worked. It also worked as it should when i removed the “visible” tag, so it only showed 3 images.
It fixed itselves when i added
speed: 500,
easing: “easeinout”
That may be a bug you want to feature on your site.
Running MAC os X leopard with safari and Firefox.
Seems like it does not work if you have nested lists. For example I have a carousel of reviews. Inside each review I have a paragraph element and also a rating which is an unordered list. Each nested list item inside the unordered list for ratings is being treated as a carousel item, causing the carousel to work in a very buggy way. I think this needs to be avoided and you should allow for any HTML content to go inside the list items for the carousel. Otherwise a good little plug in.
Has anyone been successful in getting it to work with ASP.NET?
Thanks for this great plugin.
I’ve been experiencing the issue same as the report in post #104. There are already a number of reports like these but I haven’t found any answer to it. However, in my case, it’s only in IE6 where I encountered this.
Here are the settings I used:
circular: false,
visible: 6,
start: 0,
scroll: 6
What happens in IE6 is that the last item is rendered below the first item. It can be seen if the height of the carousel area isn’t set. So that’s why the last strip of the carousel misses the last element.
Has this issue been resolved? Anyone? Hope somebody can post a fix to this.
I have tried Jeremy’s fix at post #201 but it didn’t work for me. Or I might have just missed something. @ Jeremy: Anywhere I can view your revision of jCarousel Lite?
Thanks and more power!
The issue I just mentioned was resolved via css. It appears that IE6 has so many css issues. Great plugin!
Hi All, I have used jCarouselLite many times with clients, and even integrated it with a swap image function AND j.Lightbox. (http://www.drewdernavich.com/portfolio/section/artwork). For a new client, I was having a funny rendering bug (mainly in Safari) where the carousels were loading with larger widths than I had specified, and my CSS gave widths to the wrapper div, ul, lis, and imgs. Until I figured out something so simple, that it took me a long time to think of it. Load your CSS files BEFORE you load your JS files in your head tags… All my render issues are gone now that I switched the placement of the and tags.
Thanks for a wonderful plug-in, Ganeshji.
Hello. Thanks for the great script!
I had to edit it a bit for what I needed, maybe someone else might need it too, so I’ll write down the problem I had.
I needed nested sliding. Vertical sliding inside of horizontal sliding… and it didn’t work (I think because the script couldn’t tell which ul was which). So I changed a line in the script:
var div = $(this)(), ul = $(“ul”, div)
to
var div = $(this).parent(), ul = $(this)
And then, in the page, we call the ul class (or id) instead of the div’s. And everything seems to work!
Thanks again!
Thx! A great jq-module.
Is it possible to get an event when shifting image?
I want an external object to react on the image in the carousel…
Regards,Andreas Ek
Hi, sorry if covered.
Is there a way to make jCarouselLite TRANSPARENT?
I have menu that appears behind, and I want it to be on TOP.
Thanks!
Is is possible to have the fraction configuration with like this:
1/2 image > Full image > 1/2 image
That would be amazing, and exactly what I am looking for. If this is possible, please let me know!
Rob Knecht,
I had such problem!
jcarousellite not working in table cell in IE.
Solution:
Put starting code, lie this:
$(“#jCarouselLite”).jCarouselLite({
auto: 800,
speed: 1000,
visible: 4
});
OUT SITE of Table!
I inserted it just before
And now everything works fine!
I inserted it just before
And now everything works fine!
—————
comments script removes tags…
so, I inserted it just before BODY closing tag.
how do you make it not endless scroll?
I have a set of 20 images and at the end, is there a way to make it stop there and fade out the “next” button similar to the jcarousel?
thx
TIM!
I would love to take a look at your plugin, please email me at madmatter23@comcast.net if you ever see this.
”
I recently did a modification that would allow multiple rows (horizontal) or multiple columns (vertical scroll). If you would like to take a look at the modification and possibly include it in a release, just send me an email.
Thanks,
Tim
“
Hello. I am using this to display some large images one at a time. I am a little concerned about load times since each image is over 100k and there are over 8 images. Is there any way to get each image to load as it is about to display? So that way it doesn’t try to load them all at one time?
Hello,
I am using this plugin in a tabbed widget and so when the user clicks on a a tab new images are dynamically loaded into the carousel but when I do this the carousel scrolling is not working properly it starts to rock back and forth when click the next or prec button. It works fine for the first tab only. It appears that the left property on the cant seem to locate the proper value. Any help is appreciated.Thanks.
Hello,
I am using this plugin in a tabbed widget and so when the user clicks on a a tab new images are dynamically loaded into the carousel but when I do this the carousel scrolling is not working properly it starts to rock back and forth when click the ‘next’ or ‘prev’ button. It works fine for the first tab only. It appears that the left property on the cant seem to locate the proper value. Any help is appreciated.Thanks.
I’m not sure if this has been discussed or not, but it is not possible to have UL’s and LI’s inside your Carousel due to the way this plugin selects the children elements.
Here is my hack so this plugin with only select the first level of children UL’s and LI’s.
Line: 228
var div = $(this), id = ‘#’ + div.attr(‘id’), ul = $(id + ‘ > ul’), tLi = $(id + ‘ > ul > li’), tl = tLi.size(), v = o.visible;
Line: 236
var li = $(id + ‘ > ul > li’), itemLength = li.size(), curr = o.start;
Great carousel but as a javascript noob I was wondering if anyone can help.
I want the carousel to side a whole (and it’s content) and am unsure about if this is possible and if so what to change.
Hi,
Firsly, thanks for a great, lighweight plugin Ganeshji.
If anyone’s interested, I’ve got a non-circular implementation of jCarousel Lite working in Firefox 2 & 3, Opera 9, Safari 3 and IE6 & 7 with no issues. You can see the code at http://www.markvoss.net/jcarousel/
This is a great carousel but it seem to have a conflict with thickbox.
Is there a way to get the number of the current LI? For instance, if I was on the third LI I could call a variable that would return “3″.
hi – great plugin but i have a problem with ie6.
i have set up the carousel so that when the li is clicked, some content is loaded into a div above – the same with next and previous buttons. my carousel is circular and works fine with ie7 and ff.
i have added a click function to the li
$(‘#Carousel > ul > li’).click(function(){
$curSelection = $(‘#Carousel > ul > li’).index(this);
$(‘#Carousel > ul > li.Selected’).removeClass(‘Selected’);
$(‘#Carousel > ul > li[cid='+ $(this).attr("cid") +']‘).addClass(‘Selected’);
ChangeContent();
go($curSelection – 2);
});
This works ok in ie6 until the first cloned item is clicked (or next/prev buttons reach first cloned item) – the correct li goes to the center of the carousel but the styling is wrong on it and a totally separate li has the .Selected class added to it (ie not the original li or one of its clones).
can anyone help please.
thanks
michelle
@ Doug.S
AFAIK, the current LI is “curr”
What if I would like to place a list inside the carousel?
Imagine the following:
First
Second
Third
Some menu nr 1
Some menu nr 2
Fourth
Trust me, that messes things up. I tried to add a not() clause to the jquery selector but with no luck. Any suggestions?
Crap, he removed all my markup.. Let´s try again..
div classname=jcarousellite
ul
li First endli
li Second endli
li Third endli
ul
// Don´t want this list to be “parsed”
li Some menu nr 1 endli
li Some menu nr 2 endli
endul
li Fourth endli
endul
endiv
This is awesome! Thanks so much for making this available.
@Kristofer
Did you try Blackout’s hack? (post #294)
Newbie to javascript, jQuery and jCarouselLite. Forgive my ignorance. I looked at lots of tutorials, but can’t find this simple answer. I got the basic configuration to work, but can’t seem to figure out how to implement the additional options, like moreItems. So in the head, I have:
$(document).ready(function() {
$(“.anyClass”).jCarouselLite({
btnNext: “.next”,
btnPrev: “.prev”
});
$(“.moreItems .jCarouselLite”).jCarouselLite({
btnNext: “.moreItems .next”,
btnPrev: “.moreItems .prev”,
visible: 1
});
});
Then in the body, I have
(continued from previous post, don’t know what happened there….)
In the body, I have
Never mind…I found your comments and examples in the .js file which were very helpful and figured it out. Sorry for my ignorance. It is easy to get in a hurry and not be thorough.
I have noticed a few people are having this trouble with the vertical static list appearing when loading into a table cell. Although I am getting it with firefox, so im sure IE wont work either. Upon pressing the next and prev buttons the list just hides and shows itself.
I know that plug in is being called properly bc without the call for the script, the toggling of the list with the buttons doesnt work.
I have gone over my code and several times and checked install notes and other demo scripts, but still have same problem.
Here is my link to the page at issue
http://royalvillicus.com/photo_site/photo.html
I appreciate any help
I’ve added a quick mod for enabling/disabling buttons, when not circular, for the first slide (disable previous button), and also if there’s only one “slide” (disable next button):
After this (~lines 42-26):
if(o.circular) {
ul.prepend(tLi.slice(tl-v-1+1).clone())
.append(tLi.slice(0,v).clone());
o.start += v;
}
Add:
else
{
if(o.start == 0)
{
$(o.btnPrev).addClass(“disabled”);
}
if(tl == 1)
{
$(o.btnNext).addClass(“disabled”);
}
}
else
{
if(o.start == 0)
{
$(o.btnPrev).addClass(“disabled”);
}
if(tl == 1)
{
$(o.btnNext).addClass(“disabled”);
}
}
I am using JCLite to display 1 image (visible:1) in a sidepanel widget with a next prev button which allows them to look at otehr images. All is fine accept the initial page load displays the li items for about 1 second before jquery kicks in and manipulates the css. I think this is a common problem but I haven’t found a wokring solution, most people suggest using a semaphore approcah, hide() before the ready event, show() after, or using toggleClass on the container. But none seem to work.
Another problem is trying to use the reflections.js plugin with an image inside jcarousellite, it doesn’t work correctly, it misses some refelctions off, anyone got this working.
As i’m using this more and more certain other options or functions I need. As i am using it for displaying 1 image in a sidebar widget, when the user goes to another page (the sidebar will always be there) how can I store the last carouselimage index and restart it from that index when a new page loads.
Thanks for this great work!!
I want to diable the next button when images are ended (vice versa…)
And also i want to give play & pause button
I am wondering if there is a new updated version in the works? I know that there is sample code posted here in the comments that adds a pause feature, but I was wondering if this change (and other new features) will result in a new version?
If any one is trying to get the autoness to work with external controls, here’s how….
Assuming you have external controls with ids:
“#pi1″, “#pi2″, “#pi3″, “#pi4″, “#pi5″, “#pi6″
And the images with ids of:
“#im1″, “#im2″, “#im3″, “#im4″, “#im5″, “#im6″
Before you start the jcl function, count the no. of li’s:
var LiCount = $(“#projectimage”).find(“ul”).children(“li”).size();
Add the before start function:
beforeStart: function(a) {
var imID = $(a).attr(“id”).replace(‘im’,”);
var NimID = parseInt(imID);
NimID++;
if(NimID > LiCount) NimID = 1;
$(‘#pi’+imID).removeClass(‘activelistlink’);
$(‘#pi’+NimID).addClass(‘activelistlink’);
}
Change the jcl source code, for the o.btnGo if statement:
if(o.btnGo)
$.each(o.btnGo, function(i, val) {
$(val).click(function() {
if(o.auto) clearInterval(autoIntervalID);
var autoIntervalID = setInterval(function() { go(curr+o.scroll); }, o.auto+o.speed);
return go(o.circular ? o.visible+i : i);
});
});
Change the o.auto if statement in the jcl:
if(o.auto)
var autoIntervalID = setInterval(function() {
go(curr+o.scroll);
}, o.auto+o.speed);
Done. This means when you click an external control the auto restarts. Also the class of the external control changes depending on the current image, so you can add some current styling.
you could also use the new o.auto if statement with a new function to pause. so make a button, add the button id to the variables sent to jcl. add this variable list to the jcl var list at the beginning. then in the source code make a click function for the variable and clear the interval as above
@Mark Voss
Thanks, that helped a lot.
For you that might have the same problem, if you would like to have nested lists that should not be included in the the carousel, take a look at comment nr 294.
I found an issue with setting a scroll number. It won’t scroll the last items if there are less than the number set to scroll.
For instance:
6 items
3 shown at once
scroll: 2
So, you first see: 1|2|3
Then you see: 3|4|5
And then the carousel is stuck. It won’t scroll to #6.
Great plugin, btw! Thanks!
Is there any way to get the pause on over working with the Go buttons instead of the prev & next buttons? I’ve tried all the modified /patched scripts here, and the only one I could get working was the non-minified link Oren posted. But, I’m not using the prev & next buttons, instead I’m using 4 btnGo’s. Mousing over the div works fine, but mousing over the buttons doesn’t pause.
@charles (313)…see post #10.
Regarding that, post #13 hints that there might be an update to allow the previous button, upon load, to also get the ‘disabled’ class. Was that ever implemented (doesn’t seem to be working).
In the interim, it’s fairly easy to add this oneself. Just add the disabled class on document ready:
$(“.yourButtonClass”).addClass(“disabled”);
hi ,
I’m a jQuery Beginner and have really used your jCarouselLite extensively in websites I make.
i’ve used jCarouselLite Plugin to show sponsors’ logos at bottom of the page, these are images between anchor tags.
Also i have used another jscript for smooth scrolling of inner HTML anchors.
http://amitech09.com/event.html
Although Height of all images are same widths are different.
After 1 complete cycle of images rotation Carousel acts weirdly and jumps randomly and with variable speeds.
Hi, I’m having an issue with the carousel. On first load, the carousel is actually not triggered for some reason. Its hidden until you reload the page. After that it will continue working. When you clear your cache and load the page, the issue happens again. Can anyone take a look and figure out why its not working on first load?
Sorry, forgot to post the site, http://edonnersberginteriors.com/
Well, I came up with a workaround for the “can’t scroll the last set of items if they are less that the number I told it to scroll”
The fix is to pad the items with a couple of extra ones to make it divisible by your scroll number.
var numberToScroll = 3
$(function() {
var n = $(“.jCarouselLite li”).length;
var remainder = n%numberToScroll;
var strExtraLIs = ”
if (remainder > 0){
//append li
while((numberToScroll-remainder)>=1){
strExtraLIs = strExtraLIs + ”;
remainder = remainder+1;
};
};
//append extra LIs
$(‘.jCarouselLite ul li:last-child’).after(strExtraLIs);
});
$(function() {
$(“.jCarouselLite”).jCarouselLite({
btnPrev: “.older”,
btnNext: “.newer”,
scroll: numberToScroll,
circular: false,
speed: 500
});
});
Hi, I´m using carousel lite for http://www.farandulacriolla.com but when I activate Lightbox 2 plugin it stop working.
Here is the plugin:
http://m3nt0r.de/blog/projekte/lightbox-wordpress-plugin/
Can you help me?
Thanks!
Has anyone incorporated some AJAX calls into this to extend the list of items?
I’ve done it, but ran into two main issues:
1) When you instantiate carousel-lite, it appends in-line styles (or so I think) to each LI. If you append new items, those do not get those styles. To remedy that, I re-instantiate the carousel, but that feels like the wrong way to do it.
2) When I do append more items, the scrolling acts a bit odd. If I’m scrolling 3 at a time:
1-3 (click, scroll)
4-6 (click, scroll)
7-9 (click, load more items, scroll)
…this is where it gets weird again…
4-6 (click, scroll)
10-12, then back to 7-9 (scroll)
It does this odd ‘back then forward’ thing after I load more items. Any workarounds anyone know of?
Great plugin Ganesh!
I read the comment from [ Aaron Shekey on February 22nd, 2008 at 7:52 am ] over a year ago and no response was given. I’m looking for the method to highlight the current external control using callback. I’m sorta surprised there isn’t an example of this anywhere.
Help please!
Really a great work Ganesh,
I didn’t understand if it possible to set the slideshow width and put the image with different size that doesn’t fit exactly in the space.
Any advice?
E.
Great plugin!
It works with different size images, just apply this styles:
container ul>li{
width:the max width of the images;
}
#media ul>li>img{
margin:0 auto;
display:block;
}
It works with horizontals carrousels.
Great plugin!
It works with different size images, just apply this styles:
container ul>li{
width:the max width of the images;
}
container ul>li>img{
margin:0 auto;
display:block;
}
It works with horizontals carrousels.
nice effects. thanks alot
Hi, nice plugin, in file size and functionality
I have one issue with it, though: when you set it to “auto,” it changes the frames regardless whether a user clicked just before or not. For example if you have set it to 10 seconds and the user happens to click the “next” button after 9 seconds, after 1 more second it displays the next frame again.
Here is the patch that fixes it:
@@ -271,10 +271,16 @@ $.fn.jCarouselLite = function(o) {
return d>0 ? go(curr-o.scroll) : go(curr+o.scroll);
});
- if(o.auto)
- setInterval(function() {
+ var autoTimeout = false;
+
+ function auto() {
+ if (!o.auto) return;
+ if (autoTimeout) clearTimeout(autoTimeout);
+ autoTimeout = setTimeout(function() {
go(curr+o.scroll);
}, o.auto+o.speed);
+ };
+ auto();
function vis() {
return li.slice(curr).slice(0,v);
Oops, a part of the patch was missing. Here is the rest:
@@ -322,6 +328,7 @@ $.fn.jCarouselLite = function(o) {
).addClass(“disabled”);
}
+ auto();
}
return false;
};
Has anyone thought about upgrading the documentation? It just does not work as in the current version without knowing more than what’s in the documentation.
Example:
$(“.default .jCarouselLite”).jCarouselLite({
btnNext: “.default .next”,
btnPrev: “.default .prev”
});
That’s all there is. That’s not the complete PHP and there is no HTML shown.
It just leave me frustrated. I would like to use the Mixed Content option but that page like all pages is protected from letting me look at the underlining source.
Perhaps there is a good tutorial somewhere?
Hi I really like your plugin. I needed to call function go() from my code, so I have modified your plugin a little bit. Do you think that you can add this to your code?
function go(to) {
// body of the function
};
// workaround to make go function accesible
$.extend(jQuery(this).get(0), {
showCarouselElement : function(index) {
if (!running) {
go(new Number(index));
return true;
}
return false;
}
});
Hi.
It’s a wonderful plugin.
The only thing that’s missing is the ability to stop scrolling when the mouse is over it’s window.
The patches and examples to make it work with on hover pause I found, dont work with jquery ver 1.2+.
Sergio
Hi Ganesh,
Sorry I am asking a question a bit out of context. I am new to jquery and javascript. I have written code for a circular carousel in jquery for my pictures. I use jquery 1.3.2. I attach the hover and click events to the jquery items so that they can change color when hovered onto and also enlarge when clicked. One problem with jquery is that remove() kills all events attached with the items. Since its a circular carousel, I have to remove the items which go out of visible area and I add them at the back of the carousel list. I can see that the class on which i add the events is still correctly attached at the back, but the events dont fire. Is there a workaround to this problem.
Great if you can reply on my e-mail
I have a problem with “IE drift”. When scrolling in verticle mode there seems to be a couple pixel padding between my ’s. but only in IE6/7. I put tables in my li’s so I don’t know if that matters. I’ve tried setting padding and margin to 0px everywhere and nothing helps. So by the time I scroll to like the 7th item its off 7 pixels or so. same problem here originally was posted by “John Pendergrast on August 15th, 2007 at 7:55 pm”.
any idea?
Boy, it must really suck to be a javascript developer who created a useful tool to save people who don’t know how to code hundreds of dollars of development and time, only to have them start demanding edits to your free work. I’d tell ‘em all to learn how to code or go to Hell.
Hello, Im trying to use this plugin and I’m noticing that this isn’t working in the current version of Firefox that I’m using (Firefox/3.0.8) on my Mac. Do you have a workaround for this yet?
Hi,
I have implemented the basic script without problems, but following the instructions for the auto scroll and it doesnt work. The carousel loses its structure (it ends up vertical instead of horizontal) and it doesnt auto scroll.
Can you make the instructions alot clearer on whats required to make the auto scroll work please?
Thanks.
I was wondering so far we had different favours of carousel. But I have not see non something like cnn.com has on top right video section.
Showing only 3 top videos link at a time, and either click on next button or gray dot will take you to next page.
Let me know if you know or have any such carousel. Thx 4 ur help.
Has anyone noticed that Ganesh hasn’t replied in almost half a year? I think we all need to be looking for a plugin that is better maintained and doesn’t have as many issues. That, or learn to program better
@Marko #85
I’ve experience the same issue as you, whereby if you have for example 7 images in your carousel, with only 6 visible, and scroll set to 3 it will not scroll to the remaining one image.
I’ve rectified this by changing some of the source code. Alter the following code (lines 299 to 302):
} else {
if(toitemLength-v) return;
else curr = to;
}
So it now becomes:
} else {
if (to>itemLength-v) {
to=(itemLength-v);
}
if (to<0) {
to=0;
}
if(toitemLength-v) return;
else curr = to;
}
This should make it scroll however many images are remaining if it is less than the scroll value, and in both directions.
It would be great if Ganesh would consider implementing this. Assuming he is still maintaining this plugin!?
I was just wondering for your jCarousel Lite example of “External Controls” is it possible to get to page instead of item #.
Example if you’r showing 3 items at a time with total 12 items. Ofcourse Next Button will get you to next three items and same with Pre. But when I click the gray dots(custom made css) or your [1][2][3] clicking on 2 should to go 2nd page instead of 2nd item.
Any such modification code ??
thanks,
Nuo
Is anyone else having display issues in firefox 3. Something in the javascript is causing my to be set to the incorrect size which in turn, cuts off the images. I can’t seem to figure this out.
I am using this plugin with an easing plugin, but the “expoout” and “expoin” easing types won’t work. Anyone know why?
Can anyone tell me how can I change the number of visible items depending on browser width?
My default is:
$(“.browseClass”).jCarouselLite({
visible: 4,
scroll: 1
});
but I need to change “visible: 4″ to “visible: 3″ or auto
when browser resolution is bellow 1200 let’s say
hey,
Great plug-in but I getting an error on line 336 (5).
‘0.offsetWidth’ is null or not a object.
can you please tell me what to fix this. its only giving error in IE.
potion, why not use js to get the width then divide it by the width of your images. this can give you your number visible
Hi,
I love the lava lamp plugin…looks great! I’m having a problem with it though. The navigation links within the plugin are not working. Nothing happens when I click on the links. How do I fix this? When I disable javascript the links function properly, so its obviously something with the javascript. Any ideas??? Thanks a lot!!!
-Brett
regarding: points 70 and 71.. (copied below)
First I tried to fix this by moving the whole lot left with CSS, this was good, but then you can visibly see the carousel loading the first image when it reaches the end.
I got around this problem by adding a margin right !important to the ul. This moves the whole shebang accross to the right and hides the image load, but then the last item displays first…
Next move, in php (or your language of choice) control the array so that when it outputs the elements, the one you want to appear first must be the last in the array..
hope this helps!
#
70. Luc on January 24th, 2008 at 12:18 pm
BUG:
Hi, I think I’ve found a bug with jclite, when using fractional display – I’m showing 1.5 items, and when i get to the end of the list, where there should be 1/2 of the first item shown, i get nothing, and scrolling to the “next” item then goes out of sync and starts in the middle of the first item. Is that why you’ve set circular:false in the fractional example?
$(”.portfolio-carousel”).jCarouselLite({
btnNext: “.portfolio-carousel .next”,
btnPrev: “.portfolio-carousel .prev”,
visible: 1.5,
scroll: 1,
start: 0.5,
speed: 400
});
Any ideas on how to fix it?
#
71. Luc on January 24th, 2008 at 12:59 pm
BUG:
Also, when you specify visible in .5 increments, the carousel doesn’t seem to start in the right place – it starts with 1/2 of the last item first, then the full first item. Only when you go up to visible:2, does it behave normally. When you add circular:false it works OK…
I am having trouble with making it work in Safari; navigation works, but the images do not display – Firefox and others are fine. Any ideas?
Hi Ganesh,
I, too am having a problem in Safari (3.2.1). Sometimes the images load perfectly and other times the height varies from either 30px or 85px. I have set the height of each li to 350px, but something seems to be overriding it. It is an intermittent problem – but often times it happens the first time you load page. When I have taken out the class “nonImageContent” the images display their actual size – however the js doesn’t work – it becomes a long list. Any help you can give me would be greatly appreciated – I have spent way too much time trying to figure this out.
Thanks.
does your lite version support multiple carousels? i’ve tried it but wasn’t able to get external controls to behave correctly. i hit one external control and it would scroll all the carousels simutaneously.
I don’t see it posted above, so I wanted to let everyone know that I posted a modded Jcarousel Lite solution that includes a Pause control that toggles on and off with a “paused” css class.
http://www.erikhobbie.com/technology/jquery-auto-slideshow-with-pause-feature/
It may be worth changing the following from (about line 300):
if(toitemLength-v) {
return;
} else {
curr = to;
}
to:
if(to itemLength – v) {
to = itemLength – v;
}
curr = to;
This will allow you to still scroll to the last one if say you’re scolling 4 items at a time and have 10 in the list. Beforehand you could only get as far as item 8.
Thanks for the great script! It works nicely. I found an issue that I though you might like to know about.
ISSUE: for four images, set visible: 4, start: 1.5 (to show that there are images on either side that can be viewed), and when all four images are viewed by scrolling the half images disappear.
Once again great job, and hopefully you can fix the issue.
Jase
Thanks for the Carousel. I was looking for something like that for a while.
I have a problem with the loading of the images. Everything works fine in all browsers but in Explorer (even in IE7) the images don’t load until you hover over them (and then they dissapear again as you scroll). I have another javascript effect applied but I don’t think it’s the cause of the problem because it still happens when I delete the code.
I really don’t know where to start from. Is it the cache?, the CSS? the javascript? Here is the page to see if you have any ideas. http://www.gorkaregidor.com/web
Just ask me if you have any questions regarding the code. Thanks again.
I actually think I found where the problem is. It’s the “absolute” position that I needed to give to each image for the other effect to work. How can I make it work in Explorer???
The funny thing is that yesterday it worked fine in IE 6 and 7 and today… not. I don’t remember changing anything although, rationality says, I probably did. At least I know that it’s possible to do it
But I don’t know how 
Ok. I finally found what I had changed that made it work. The usual javascript code:
All sorted now.
I feel like Groucho Marx. Just having a conversation with myself
This doesn’t work again in IE 6. Am I going crazy?
@Gorkreg:It is working in IE6 for me. Although I am running Windows in VMware and IE6 in IEtester, so it’s not a perfect test. One piece of good news, IE8 is supposedly being pushed out to everyone in the next couple of weeks.
That sounds great! Death to Explorer 6 once and for all. It’s weird though because most of the time the images never finish loading in IE 6 (only when I hover over them) and sometimes they do. It has something to do with cache of the page I guess but I am completely lost there.
I’m using auto: true.
1. How can I stop it from moving by onmouseover ? and then change back by onmouseout?
2. How can I make it like “onmouseover” goes left (or up) and “onmouseout” goes right (or down) ? like the prev and next buttons but with onmouse over and out…
3. How to make ‘btnNext: “.nonImageContent .next”‘ when there’s no button on the page ? (only auto)
Is it possible to have the next and back buttons effect more than one carousel? I have two different carousels on a page and I want them both to change at the same time when the button is pressed.
I am trying to get jCarousel Lite to show me two full li elements, and then only part of the one before and after the two. Im not trying to show half an element, but more like 20% of it.
Did anyone make anything similar? I’ve tried to mess with the code, but havent been able to make anything that works like I want it.
Great Plugin. I am currently using the code below to run after the scroll animation. It works once but then when the next item is auto scrolled in it does not work anymore. Is there anyway to have the AfterEnd keep being applied as the list is scrolled.
jQuery(“.show .jCarouselLite”).jCarouselLite({
btnNext: “.show .next”,
btnPrev: “.show .prev”,
speed: 900,
auto: 5000,
easing: “backout”,
circular: “false”,
afterEnd: function(a) {
jQuery(“.mid img”).attr(“src”, jQuery(“.show img”).attr(“src”));
}
});
Hi
Must say great script!! But I am trying to change the width and therefore the number of items shown. I have changed the visible setting but it does not make the box wider… Can you email me an example?
Thanks very much
Adam
im lovin this plugin. does exactly what i wanted but i just ran into a problem using this plugin with the thickbox plugin.
im using the carousel to show divs with images and text in each frame. and i have links in the text of each frame that are supposed to open some content in a thickbox.
seems like links in the carousel dont open in a thickbox like they should. but the same exact link works if its outside the carousel’s ul.
you can see an example of the issue at http://punkassbitch.com
any idea on whats going on or how i can fix this?
thx.
update on my issue:
looks like thickbox will work as long as there are enough frames in the carousel that you have to scroll.
but thickbox stops working on the same exact link if it loops around to the frame again in the carousel.
weird.
hello,
I would like to implement an image counter that would
display something like this: 1 of 10, 2 of 10 and so on.
I know jCarousel Lite has a variable called “curr” but I don’t know
how to use it.
err the links dont work ? I.e not clickable
Thank you for the great plug-in!
I’m using jCarousel Lite to cycle through a list of news items. I have the carousel set up to auto scroll and to run vertically. When the carousel is set up, the height of each li element is set to a static amount and this can cut off some of the news items in the list if they are longer than the height allows.
I can work with this (by limiting the length of the news items), but was wondering how one might go about altering the plug-in to handle list items of variable length? My current thinking is to change the distance the items slide when animating based on the height of the item that is disappearing. This might leave some items cut off if a short item is disappearing while a longer one is coming in, but that seems (without seeing it in action) to be an acceptable occurrence.
Any thought you might have on this subject would be appreciated!
best image slider on the internet.
However, performance can be improved.
And there is an issue with sliding big image (500×300), the images flickering.
Hey I just thought you might want to see where your plugin is being used.
I actually added a modification that pauses the auto scrolling when you put the mouse over it. Thanks for building this, it came in handy.
http://getwwa.com
CAN THIS SCRIPT BE COMBINED WITH J CARUSEL? I MEN USING J CARUSEL AND HAWE THE MOUSE SCROLLING EFFECT ? jCarousel – sorgalla.com ///
IS THIS TO BASED ON ONE AND OTHER?
THNX FOR REPLAY WORKING ON A PROJECT… WOULD HELP OUT… http://WWW.0001.TK
Hi, for the next version you might want to rework this to return a jCarouselLite object that has the ‘go’ function exposed so that this can work better with any external controls.
In the mean time, I extended mine to allow a select input to control the movement.
Add a selectGo option to the top and add this code:
if(o.selectGo)
$(o.selectGo).change(function() {
moo = parseInt($(this).val())+1;
return go(moo);
});
This is a brilliant plugin. I only have two question
1) how to implement a pause on hover
2) how to implement pause resume buttons
Could you provide some instruction?
Thank you.
Hello
It’s a great plugin. Keep up the good work
I want to use it with jqueryUI accordion (theme: south street)
Then jcarouselLite is not working as expected. I cannot see the images
Thanks
Hi, when using non-circular mode the ‘disabled’ class isn’t added if the initial number of elements is the same or less than the ‘visible’ property. I wanted to blank out the nav buttons if the user couldn’t nav that direction so I had to do 2 things:
1) Add a ‘button.disabled’ class that hid the button.
2) Add some code to hide them upon init if required (at line 235):
if(o.circular) {
ul.prepend(tLi.slice(tl-v-1+1).clone())
.append(tLi.slice(0,v).clone());
o.start += v;
}
else{ //******ADDED BY ME*****//
// Disable ‘prev’ button
if (o.start == 0)$(o.btnPrev).addClass(“disabled”);
// If same/less elements, disable ‘next’ button
if (tLi.length <= v) $(o.btnNext).addClass(“disabled”);
}
Hope this helps!
Simon
Did anyone comment on the bug report from Brian Harris? I’m referring to comment #110, bug#1.
To restate: I’m setting up a list of items that is variable length, with circular set to false. The variable-length list is not evenly divisible by my scroll amount. E.g., I have 18 items, I have scroll set to 5, and I have circular set to false. I am not able to scroll to the last 3 items… the remainder is not viewable.
I spent a little time and fixed the last issue I just mentioned. Hopefully I can submit code in this comment and it won’t get overwritten. Just replace these two lines:
if(toitemLength-v) return;
else curr = to;
with the following:
if(toitemLength-v){
if(curr==itemLength-v){
return;
}else{
curr=itemLength-v;
}
}else{
curr=to;
}
New to jQuery and jCarousel Lite. 1st many thanks for the script. Has been implemented and its working.
Having problems customizing to specific needs. Specifically using items(images) with different widths.
Have used (Comment #329-330 by Jorge) and its works. But the images are not evenly spaced. Would like to have then spaced about 5px apart from each other. Any ideas/help? Greatly appreciated!
Side Note: Have noticed that when my test page first loads the carousel does not show until the page is refreshed. Any thoughts on solution? Many thanks!
Hi,
I have an issue. I have 73 images in my carousel with circular set to false, visible set to 10 and scroll set to 10.
When it gets to 70 it stops and won’t show the final three.
@Bob Ralian seems to have some code that I think relates to this, but I can’t find where to put it.
Any help would be great.
Oh, love this plugin btw!
@Phil
I saw that jCarousel Lite lives on the jquery plugins site, so I submitted my patch for this issue there.
http://plugins.jquery.com/node/8145
@Bob, works a charm! Thanks very much.
Hey!
thanks for this awesome script, but unfortunately got one issue with it. Don’t know why links doesn’t work when I’ve changed the # part in li element from
Home
to
Home
how can i fix this? And another question – what to do to make the active element selected when changing page from index.html to info.html (to avoid situation when in INFO subpage home element will be selected instead of info)…
Thanks
Eclipse
in previous post html tags are gone… I wanted to change a href=”#” to a href=”info.html”…
cheers
ohhh I’m talking about lavalamp script
sorry
I’ve created a patch that fixes an (undocumented?) bug where you couldn’t have slides that contained lists. The code now defaults to first list inside the div wrapper.
This patch also adds functionality to dynamically add slide buttons navigation that will allow you go to the next series of slides (if scroll is greater then 1 for example) so it’s a bit more powerful than btnGo. (Think the functionality on http://www.5bosses.com/examples/agile_carousel/multi_example/carousel.html with the blue dot navigation)
Patch is at http://plugins.jquery.com/node/8199
@cardob (385)
I had the same issue and got around it by using PHP’s getimagesize() function – this allows you to output the image dimensions on the fly, which in turn are used by the JS.
Hope this helps
Neil
I found an issue when I had 17 slides, and set scroll to 5, then it wouldn’t show the last couple of slides. I fixed this by altering line 300 to:
if(toitemLength) return;
instead of:
if(toitemLength-v) return;
@ 393. BandsOnly.com (Neil)
Thanks for the reply.
For clarification – PHP’s getimagesize() function, would fix which problem? My having to refresh page for carousel to load and/OR being able to use images with different widths?
Direction on where how/to place code would be a project/time saver.
How can I dynamically change the number of visible items depending on the user’s screen resolution? I seem unable to put anything other than a number, eg:
visible: 6
if I try something like this it just wont work at all:
visible: getScreen() // function that returns a number depending on screen resolution
Hello Guys,
first of all i like your jQuery Plugin very much, but i have a big Problem:
How to addmore more than one jCarousel Light on one page??? It is possible and they appear, but when i use Next Button, all the jCarousel’s are scrolled! Buttons are named dynamically, so that they have other names for each Carousel Instance.
Check out Demo: http://projects.4yourideas.de/werbelayer/demo.html
I need urgend help.
Thanks a lot.
Sascha
Hello @Sonia,
you cannot use a Function!
What about declaring a variable like this:
var TOTAL_NUMBER=getScreen();
and then use:
visbible: TOTAL_NUMBER
??? It works for me!
@Sascha #397: You can create any number of carousels in a page. All you have to do is attach the correct buttons to the correct carousel. So, instead of using the class to identify a carousel, try using the ID to select a carousel and attach it to the right buttons
@Rasmus, @Brendan, @Bob Ralian, and many others : Thanks for the fix and your effort to help fellow jquery community people. People like you and many others here who take the pain to not just fix an open source code but give it back to the community are the ones who make open source tick. Thanks a ton guys.
Friends: I know, I haven’t been able to reply to many of your posts. I am sorry about that. It is primarily because, I have been too very busy with some other tasks at hand that is totally away from the S/W field. So, wasn’t able to get to it. Now, I am slowly getting back to it. Thanks a ton to all you guys who have been using jCarouselLite successfully and many more thanks to those who have been helping others get their problems solved. You guys prove why open source community thrives. You rock!
Hi!
Small problem can occur when circular is true and start is not 0. Carousel will move backward only for some time and then will glitch and start over without actually moving whole circle. I think best solution is to always count start of carousel in circular as 0.
Best regards, Mikhail
Hey!
The Carousel is working now, but i have another Problem:
IE just shows one Horizontal and one Vertical on one Page – instead of 3 Horizontal and 1 Vertical – check out @
http://projects.4yourideas.de/werbelayer/demo.html
So what’s the problem for now?
In Firefox all is okay! All 4 are shown correctly!
Hello.
I have a question regarding jCarousel.
Can this carousel be structered on 2 lines?
For example, 2 columns and 2 rows per area.
Thank you,
AB.
Can I specify my own thumbnail files for the plugin rather than letting the plugin generate thumbs (data is already on hand and this will save processor time)?
I’m sure this question has been answered elsewhere — but I can’t seem to find the right thread.
Thanks in advance –
Hi,
I’m working with your carousel and so far it has been great. But I’ve tried to use a lightbox on the images (http://leandrovieira.com/projects/jquery/lightbox/) and I can only get one of the 2 working but not the carousel and the lightbox together. Do you have any idea why that would be? Thanks a lot for your help!
Ganeshji,
This is a cool and easy to use utility. I do have one problem though. When I try and use the carousel and Lightwindow 2.0 on the same page, I can only get one to work (the last set of includes). Any advise on what I need to do to get both working?
Hi,
As i cold see, it’s possible to use 3 carousel in the same page. But can one of them use 3 images at time and others use just 2 images visible ?? What do I have to do to use just 2 images on the carrosel ??
thank you for this nice jQuery plugin.
I duplicate the file and change the function name to “jCarouselLite2″ on the second script. Them I change the value of “visible:” to “2″. It’s working now, but I have two “almost the same” script linked to the sema page. It would be nice if we could choose the number of visible picture for each carrosel. I reaaly don’t know how to do that, but could be something on the “plugin call”.
Thank you and sorry about my english.
@Saulo Padilha #407: You don’t have to duplicate the source files to achieve this. All you to do is, give your carousels different IDs. Eg: lets assume the “div” for the first carousel has an id of “carousel_1″ and for the second carousel “carousel_2″. If you want 3 images visible in the first carousel and only 2 images visible in the 2nd carousel, you have to call the jCarouselLite plugin 2 times. Something like this…
$(“#carousel_1″).jCarouselLite({ visible: 3});
$(“#carousel_2″).jCarouselLite({ visible: 2});
Ofcourse, you shud include other options that tells the carousel which buttons to use as next and previous for example.
@Vinod #405: What error do you get.
@Delphine #404: What error do you get.
@Chad #403: The carousel script does not create thumnails at all. It just displayes whatever you give in the carousel “li” in the form of a carousel. Thats all
@AB #402: Unfortunately no.
@Mikhail #400: Thanks Mikhail for the suggestion. At the same time, I guess some fellow jCarouselLite users have also found the same bug and have suggested solution in the comments section if i remember right. Try checking it out, you might come across a solution.
When i try visible of 4 instead of the default 3 and click the Right arrow the images zooms past real fast and dissapear. If i click the left arrow then it functions fine. It is only when i first click the right arrow. here is my code.
$(function() {
$(“.anyClass2″).jCarouselLite({
btnNext: “.next2″,
btnPrev: “.prev2″,
visible: “4″
});
});
Whoops sorry ignore that last post. I had the integer in double quotes.
Another question.
I fixed by code, but when there is only one image it does not display it. Hopefully the code below will format out on the post.
$(“.anyClass1″).jCarouselLite({
btnNext: “.next1″,
btnPrev: “.prev1″,
visible: 4
});
@Chad #410: I guess, the plugin looks for a minimum of “visible” elements to function properly. But anyways, what would you want displayed in the other 3 slots if visible:4 is given and you provide only 1 image in the “li”
The Carousel works great in Firefox, but now it doesn’t work in Internet Explorer 7. Can anyone help me out here, I’ve been struggling with this for hours now with now luck.
You can check out a test page at http://www.signbreak.com/sb6
Thanks in advance for any help.
I’d like to be able to create external tab-buttons that control the slides like http://www.panic.com/coda/ — but most importantly, I’d like the active button to remain indicated, so the user knows which slide he/she is on.
Is this possible using jcarousellite?
@Mike #412: Everything seems to work perfectly when I look at it. Maybe u fixed it already.
@Elena #413: I understand your requirement. This is not built into the carousel itself as a feature per-se. But you will be able to achieve the same result if you write appropriate code in the provided callback methods. Best of luck.
hello Ganeshji,
sorry for the repost, but I need this quite urgent for my project.
is there a way to show an image counter that would automaticly
display something like this: 1 of 10, 2 of 10 and so on depending on how many images you have in your list?
thanx a lot in advance!
@solneman #415: The solution to your requirement is very simple. All you have to do is to maintain a counter variable. Attach click events to both your “next” and “prev” buttons. On every click on the “next” button increment the counter by 1. On every click on the “prev” button decrement the counter by 1. Now, this counter variable will always hold the exact index of the carousel item that is being displayed. Now, while passing your options object to the jCarouselLite plugin pass in a callback function for the afterComplete() method. In this after complete method display the counter variable’s value. That solves your issue.
hello Ganeshji,
I’m working on a new website. I’ve serious problem with Carousel – it works fine in IE7 but in FF 3.0.10 images are not working properly: FF thinks as if there were 4 images (the last one is empty) and there is little line on the left (some rubbish from a previous image). Another problem is with IE6 – it’s not displaying overlay with text lines.
Pls take a look at: http://www.tech.waw.pl/infotex/
I’m using jquery.min (v1.3.2) and the latest carousel.
Best Regards,
Jacek
Hi,
Great plugin, but can this be updated so the images move based on the mouse position?
For example:
If I roll my mouse near the left of the gallery then the images move left (rather than clicking the ‘left’ button) and if I roll my mouse near the left of the gallery then the images move left (rather than clicking the ‘right’ button). And finally, if the mouse is resting in the center of the gallery then no movement takes place.
If this can be done that would be brilliant as it would be a much easier alternative to having to use Flash!
Thanks.
Kind regards,
Mark
thank you for this nice jQuery plug-in.
Let me first say that I love this carousel!!
However, I am having some trouble. I would like to use the image slider, have it auto scroll, and pause if I hover over the images…
I know this should be possible (maybe not pause on hover, but I hope so). I have no idea how to merge all of these functions together and where to put them…
Any help would be great!!! Thanks
@Jacek : I have never test jCarouselLite with jquery 1.3.2. So, I strongly suggest you to try and see if it works with jquery 1.2.6. If it does, there definitely is a compatibility issue. Please let me know of the same, and i will try and get a 1.3.2 version upgrade as soon as possible.
@Mark McDonnell #418: Ofcourse it can done. Just that it is very time consuming and i am totally occupied to get to new features right now. Anyways, that is a very nice idea and I will give it a try when I can squeeze out some free time.
@Gregory: You are making me feel bad that I have not put together a zip file with the demo pages so that it will be easy to download and use. I promise, that I will do it within a week, but in the meantime please view my webpage source and you should be able to figure things out.
I’ve installed version 1.2.6 and problem hasn’t disapeared! So, I think it’s not the compatibility problem. Maybe css (I mean css hacks were neccesary) – for example text overlay is made differently in FF (position: relative;top:-130px; …) and in IE (margin: -130px;…).
Jacek
I have this problem, I am just a regular guy using my laptop and all the suden I have been getting this error message:
“Jcarousel: No width/height set for items. This will cause an infinite loop. Aborting …”.
I don’t know why. I also get a pop up window asking if I want to navigate away from this site and finally every now and then I hear tv or radio programing voices as if I would be in a tv website or radio website but there are no webpage open. then stops after a couple of minutes. Can anyone help me get rid of this pop ups and this gost webpage from loading?? Thank you
@Ganeshji thanks for the response!! Through trial and error, I ended up figuring out everything I wanted except for one thing. I seem to be having the flickering problem stated in the “known issues.” I added the css class, but I might not be putting it in the right place. I’m replacing the “anyClass”… is this what I’m supposed to do?
Never mind, I fixed it…
@Jacek #422: Maybe it is the CSS problem. Let me know once you have solved the issue.
@Jaim #423: jCarousel is another plugin for jquery. jCarouselLite is a totally different plugin. For jCarousel’s info check out this website. http://sorgalla.com/projects/jcarousel/
@Gregory #425: Glad you are getting things together. Thanks for choosing jCarouselLite.
hi, the plugin is great,
but there is a problem,
is it possible to set different height for each li.
currently it is calculated automatically.
please urgent
@sabari #427: Sorry, the plugin calculates the height automatically based on the height of the first “li”. The basic assumption here is that most carousels have items of equal width and height. In any case, I am able to understand if you had a requirement to display items of different width within the carousel, but I am unable to understand the use-case behind different heights. In case your use-case is valid also, it is currently not possible. But one thing is possible. If your carousel items are getting hidden because the height is short, try placing the tallest item as your first “li”. Things should look good then.
Hello,
Currently the button functions are disabled when the animation is running.
function go(to){if (!running) {
I’m wondering, is it possible to modify the code so the button will work to “speed-up” the scroll when clicked on running animation.
Something like this: http://www.cirquedusoleil.com/en/ (the What’s New part, and yes they’re not using jCarousel Lite.
Thank you.
Let me rephrase the question
… or will it make is no longer “Lite”?
I’m asking to you because you’ll have the best POV as the creator.
Thank you!
hii
thanks for neat plugin
i have question: is it possible in some way to always start with the same image .. am using it in a wordpress blog but everytime it lands on a new image.
do you think, its a wordpress issue that i need to explicitly say to show the most recent image/post
or can it be adjusted in carousel plugin
thanks a mill.
Mo.
@Azza #430: Technically speaking, there shouldn’t be much of a change in the plugin code to enable the effect you are talking about. Remove the condition and the boolean variable and check if it works fine. I doubt it. You may face an issue or two. But they will be simple enuf to solve. To conclude, yes it can be done by playing with the source code and it wont affect the size of the plugin.
@mohans #431: It is most definitely an issue with how you are using wordpress. The carousel itself just displays what is in the first “li” as the first element, unless you specify another “li” to start with. Hope that helps.
Hello,
Thank you for the comment.
I’ve actually tried removing the conditional statement. It works, but it simply “queue” the animation process’ (not “speeding”/”forwarding” the slideshow).
I’ll try to work it out, let’s see how simple it might be.
Thanks again!
And forgot to say this earlier, thank you for the lite but great plugin.
Great plugin, thanks!
One question, is it possible to have external controls to a vertical carousel? I can´t get it to work.
Working on a site using this.
It works great in browser as-is, but when I implemented it on the site I am using it for, it seems that I messed something up, and now it is not displaying correctly in IE 7.0
Do you think you could give me some pointers on this if you have the time?
http://www.thebloomagency.com/staging/bloom
Thanks!
Guess it would help to describe the issue
The display is fine in IE 7.0, but the animation does not work. Works fine in all other browsers, of course.
Fixed! Thanks anyway!
Grrr…nevermind, it wasn’t fixed, I was looking in the wrong browser…
Any insight you can lend would be awesome.
Thanks!
@Azza #433: Thank you for using jCarouselLite.
@Jocke #434: Ofcourse it is possible. What error are you getting? Can you provide me a link where I can see it?
I am getting a javascript error in IE7 PLUS I guess you are using a different library. So, cant help there Sorry…
Hi, the plugin is really great!
But I’ve found something strange: I’m using jquery UI tabs in my web. There’s always exactly two tabs on the page, and each tab has its own carousel. When entering the page, the carousel on the first tab (the selected one by default) looks great. But when I change to the second tab, the carousel there is not visible. AND what’s worst: if I swith back to the first tab, the carousel is invisible there again, with no way of showing it again.
Is this a known limitation? Looking at the generated HTML, the ul has a very narrow width, and all the li’s have 0px width.
Thanks for your help!!
Aloha Ganeshji,
I like your plugin and use it for a while and for seperate websites.
Without problems.
But now I’ve got a problem:
$(‘.exampleClass’).click(function(){
// Do something
});
.exampleClass is inside the scrolled list elements.
If I load that page every thumb is clickable, but after scrolling the carousel click handler is lost and doesn’t work any longer.
This problem is a problem on FF3, FF2, IE7 and even Safari.
I would be happy, if you have any suggestions that solve the problem.
Thanx for the plugin and greetings from Berlin,
- Till -
Hi Ganeshji,
just wanted to thank you for the great plugin!
here is the site it’s used on
http://www.visionandphotography.com
is there a way to keep track of the thumbnail being viewed when they are clicked on? instead of having them reset everytime, it would be great to keep track of them….
thanks!
pvf
Does anyone have an example of the Custom widget? I have Jcarousel lite working perfectly but cannot call the main image when clicking on an image. I am assuming there must be a missing div tag call where the image should be dsiplayed but have, yet, to succed in replicating the widget. Awesome script, plain html working demos would be an added bonus
@Nacho #442: I have used jCarouselLite myself with jQuery tabs with no problem. In fact, on this website itself, the project page uses the tabs plugin from the same author before it was absorbed into UI tabs. So, I dont think that should be a problem. Just to get closer to the issue, try using the same author’s older tabs plugin and see if it is working fine there. Here goes the link for the older version of tabs – http://www.stilbuero.de/2007/04/07/tabs-27-flexibility/
@Till #443: Oops! I haven’t tried binding any events to the carousel items. I don’t clone the given items in anyway for the events to get lost except when the carousel is in “circular” mode. Fortunately or Unfortunately, that is the default mode.
Try this. Goto the line of code in the carousel source given below
if(o.circular) { ul.prepend(tLi.slice(tl-v-1+1).clone()) .append(tLi.slice(0,v).clone()); o.start += v; }Here, replace the clone() method calls with clone(true) method calls and see if things work out for you.
@pvf #444: Yes of course it is possible in your programming logic. Not in the carousel. You know which carousel item is being clicked. You could have some metadata within the carousel item which implicitly tells you its count within the carousel. You can store this count somewhere and when you initialize the carousel next time, you can “start” it with this count. Hope that helped.
@Ted #445: A test page where I can look at the issue will be great for debugging.
I’m using the jCarouselLite module for a Drupal website and I have two questions for you.
- Is there a way to eliminate the pausing when using auto scroll?
- I am using thumbnail images with a uniform height, but with varying widths. The module allocates the same space for each image display. How can I get each image to display neatly when they have variable widths?
Thanks,
Tim
Hi Ganeshji,
thanks for the fast response!
would you mind pointing me in the right direction for this to be coded?
i am familiar with jquery but not an expert! any help would be appreciated.
i was thinking of storing the clicks using a .click(function)
like:
$(‘li a.carouselImg’).click(function(){
//store values here
})
but im not 100% sure how to approach it….
thanks,
pvf
@Tim #450: No, the way the plugin works atleast right now, it is not possible to eliminate the pausing during auto scroll. I myself am looking to change that behavior for one of my clients. So, when i succeed, i will keep this blog updated.
At present the plugin assumes that all items are of equal height and width. You know typically carousel items are like that. Just place your largest item in the front of the carousel so that all carousel item gets the maximum width. This should solve your problem temporarily
Hey Ganeshji,
thank you for fast answering.
Yet I didn´t try your solution, but found another one:
I´ve used the callback function:
function initClicker() {
$(‘.Something’).click(
// and… Action!
)
}
$(‘.exampleClass’).jCarouselLite({
afterEnd: function() {
initClicker();
}
});
and it works. Perhaps its a bit redundant, but… yes.
Nevertheless, thanx a lot for the plugin und fast answering.
Greetings from (today) sunny Berlin,
- Till -
@Till #453: Congrats to get it working. But remember, jquery’s click handler keeps getting added everytime you bind a click event. So, in your case, the event handler will get bound multiple times and will get triggered multiple times. Careful…
Thank you for information.
[...] I had to part with my bandwidth for all other features this plugin offered. Like my famous jCarouselLite plugin, I like my javascript code kept to the minimum. So, I decided and wrote a short yet sweet [...]
Hi,
thanks for this tute. I have the navigation on this page:
http://www.inspired-evolution.com/Portfolio.php
the functionality works but not the links. Do you know why this might be?
@Bruce Gilbert: You should remove the “return false;” statement that you are binding for the click event. This will solve your problem. By the way, you have posted on the wrong blog entry. This entry is for jCarouselLite.
This is really a great plugin, especially for sleek lightweight animations. Thanks a bunch!
However, I’m sorry to bother you with a small problem of mine – any help would be much appreciated:
I’m experimenting with a mixed content setup (visible: 1, circular: true) and experiencing some weird behavior with the prev button.
Cycling forward through my 3 test works like a charm (1>2>3>1>2>3>…), however, while going backwards no.3 is always skipped: 1<2<12>3<2<1<2<1<2<1… When test- no1 is active and the prev button is clicked, no2 is shown instead of no3. I’m guessing it could have something to do with weird CSS height problems, but that’s just that: a guess.
My html is a bit nested, basically it’s a
texttext
Any hint as to if you’ve had similar problems in the past or where the problem could derive from would be much apreciated. And apart from that – thanks again for your great plugin
sry, html got stripped
next try
text text
@ph – try putting your html inside “pre” tag
@ph: Instead of pasting your HTML code here, if you can provide a link to a page where i can see this behaviour in action, I could probably help you better.
…
…
Some more testing revealed that after restricting the width: of the containing div (anyclass)to about 500px and deliberately clicking the prev-button slowly, the problem does not occur every time. as i dont expect visitors on my client’s site to click the prev button too fast, i guess the problem isn’t severe.
@ph: Glad the problem isn’t severe. Still you shouldn’t be facing that problem at all. The Project Page itself contains an example of {visible: 1, circular: true} and I am unable to notice a problem.
thanks for taking your time to solve my problem, I’m currently doing some further testing. Unfortunately, I can’t post links to the live version publicly (see ->twitter on how to find another way perhaps
. Probably other css from the rest of my site is interfering with the carousel, however there is no other js/jquery used on the site. the problem occurs afaik in ff3.5, opera b10 and ie8 (winxp).
total Newb question…. Where does this go? Step #3:
$(function() {
$(“.anyClass”).jCarouselLite({
btnNext: “.next”,
btnPrev: “.prev”
});
});
@DonD #466: That goes inside a “script” tag within the “head” tag of your HTML page.
hey there im having an issue with this.i set the visibility to 1 and two displays, one where i want it and the other right below it.in the css, i set overflow to hidden but that didnt work. now when is et the vidibility to 0 the one i want shows up great but when scrolling through and it reaches the end, it shows nothing but the carousel container bg and i have to hit the next button once again to view more.
also if i set the visibilty to 1, it works fine but the extra image at bottom.
see it happening here http://taintedarts.com/portfolio.html
@kevinsturf #469: I checked it out. I guess there is some issue with “vertical mode and visible: 1″. But, it works flawlessly in horizontal mode. It could take some time for me to fix this issue. So, kindly work with horizontal mode until then. Thanks.
Hey. Thanks for a great and lightweight carousel. I’m having a little trouble with it though; when I scroll right all the items animate out of view very quickly. If I scroll right again – they quickly appear and animate away again. If I scroll left it works fine – also with scrolling right afterward. Any suggestions?
This is a great plugin. I’m using it now on a new project. I’ve also needed to implement a tabbing scenario where the ‘go’ button that corresponds to the current element needs to be highlighted.
I’ve worked it out myself using class names and the beforeStart and afterEnd callbacks, but it’s messy and doesn’t scale well.
Perhaps you could provide the original indices of the visible elements in the beforeStart and afterEnd callbacks along with the items themselves. This would let us match up the current item with a current button (or buttons).
I have a suggested change to the library for you. I changed lines 228 and 236 to use direct child selectors for the ul and li elements. This allows putting in content that contains unordered lists itself.
Ganeshji, I saw your comment about the height being calculated on the first li only. Your statement is you don’t know a use case for variable heights. I was looking at using your plugin to do a carousel of my latest blog posts on my site. The problem is that the amount of text that is quoted becomes a variable on how much is shown, so, the first one may be a little short, the second one longer and cut off.
Any more thought on looking into calculating the height of all of the LI first?
Thanks, Mark
How do i simulate the next,prev actions on mouse hover
So, I was looking at a way to deal with the variable height on items where the first one is not always the longest (per my message above). Here’s the solution I came up with:
Note: For those who are reading this, if you don’t know what you’re doing, probably not a good idea to try on your only copy.
In the jcarousellite_1.0.1.min.js file:
Change this code:
f.css({width:f.width(),height:f.height()});
to:
f.css({width:f.width(),height:g});
Change:
function css(a,b){return parseInt($.css(a[0],b))||0};
to:
function css(a,b){ return parseInt($.css(a,b))||0 };
and change:
function height(a){return a[0].offsetHeight+css(a,’marginTop’)+css(a,’marginBottom’)}
to:
function height(a){
var z = 0;
for (y=0;y z) z = x;
}
return z;
}
Because I only care about a variable vertical length, this only works for that, doesn’t take into account variable widths.
I’m not saying this is the best solution or the most efficient one, but for those who are looking for this, there you go…I haven’t testing it out extensively at this point.
That last function got cut, let’s see:
for (y=0;y < a.length;y++) {
x = a[y].offsetHeight+css(a[y],’marginTop’)+css(a[y],’marginBottom’);
if (x > z) z = x;
}
In case they come through, replace < with the less then sign, and > with the greater then sign.
Hi Ganeshji,
thanks for the fast response!
i am familiar with jquery but not an expert! any help would be appreciated.
i use ASP.NET3.5 and when i used master-page and load child-page(contain jCarousel control) in tag :
test
Child- Page :
<<
>>
Test0
Test1
Test2
Test3
Test4
Test5
Test6
Test7
Test8
Test9
$(“.container .anyClass”).jCarouselLite({
btnNext: “.container .next”,
btnPrev: “.container .prev”
});
it didn’t show any content!?!?!? just show buttons !?!?!?!
how can i solve this problem ???
please HELP me , so thanks
hi again , i used tag TABLE in master page …
please HELP me , so thanks
@Thomas #471: Please direct me to a link where I can take a look at the problem.
@Brian #472: Nice Idea. I will get to implementing it as soon as I can squeeze out some time. Thanks for the suggestion and I am glad you got it working anyways.
@Brian #473: Thanks. Can you kindly email me the modified version at ganeshread [at] gmail dawt calm. I will try and incorporte it into the next release.
@Mark W #474: I understand you requirement. But at the same time, wouldn’t you fix some height for the carousel elements by default. Obviously you don’t want your blog post carousel to grow bigger than a particular height. isnt it? If that is the case you can fix the height of the li’s thus making the use-case work. Even otherwise i get your point. I will try to implement it as soon as i can squeeze out some more time. Thanks.
@Marios #475: Right now the carousel allows only click events for “next” and “prev”. Just browsing through the code and changing a few lines where the buttons are bound to “click” events to “hover” events should solve your problem.
@Mark W #477: Nice work. Thanks for helping others in the forum with your custom modification. Programmers like you who share are those who make open source tick.
@Barbod #479: The information given is not enough for me to know what the problem could be. Kindly direct me to a page where I can see the problem live. That way it is very easy for me to spot the problem. Thanks.
I was able to setup a sample page using this plugin and it worked great, but now I am attempting to integrate this into an existing site and I am getting the following error in the height method:
el[0] is undefined
Not sure what is causing this. Any help much appreciated. thanks.
Prior post (482) was resolved. Issue was caused by another javascript error present on the page.
I am attempting to use the scrollable settings, but whenever I set one of the vertical settings other than ‘vertical: true,’, it no longer scrolls. It also appears to not scroll when ‘circular: true’ is set. The other issue I am having is that the btnNext and btnPrev seem to scroll the list in the same direction when vertical or circular is not set.
Thanks for your help.
Jon
function enableListItemScroll() {
$(“.vertical .listItemScroll”).jCarouselLite({
btnNext: “.vertical .listItemScrollDown”,
btnPrev: “.vertical .listItemScrollUp”,
vertical: true,
speed: 400,
scroll: 1,
start: 0,
visible: 6,
circular: false
});
}
Help!!!! A little background about myself I am a designer (please no smirking) and I placed your wonderful plugin on the website but it blows up in IE (what a surprise). I am designing on a mac but I tested it on a PC as well. It also doesn’t work on Safari. Please help me I have been fighting over this for over a week and I have to launch asap. Your help will be more than appreciated. Remember I am not a developer but I have to unfortunately wear many hats in this firm so please be detailed in your explanation so I can figure it out. Thank you so much again.
p.s
It works great in Firefox so there is hope for me yet. The website is jumbamediagroup.com/test.
Thanks
Dude, you need to expose a contact form so we can get a hold of you for questions. This thread is getting way too long.
I wanted to know if you have an example of loading via URL with AJAX. So far I see example of loading from an XML file, but we are trying or want to use your carousel to lazy load. So for example, you click the next button, it dynamically calls our url, we get back XML, I will parse that with jQuery and so dynamically fill the pictures as needed. We don’t want to fill all our images on page load, that would bring down our server since we have millions of users hitting the site.
Any way to do this? jQuery ajax request to url (hits a handler and handler sends back XML to be parsed) and then able to take response and show those pictures in your carousel this way?
Deferred loading via url is what I’m after here.
You need a support forum for this plug-in!
@orlando #485, #486: Please provide the height and width for all your carousel elements in css specifically. That should solve your problem. If it doesn’t let me know.
@Anonymous #487, #488: jCarouselLite is specifically built for very light weight use-cases. If Ajax based features are included into this plugin, it will no more remain jCarouselLite. There is another plugin called jCarousel that offers all the features you are looking for. Although jCarouselLite has a plethora of features, all of them have been added without introducing more KBs in. Thanks for trying jCarouselLite though.
Hi, and thanks for this great plugin! I have a question, but couldn’t find the answer through google. I want to stop an automatic circular carousel. I tried doing something like this :
$(“#text-viewport”).jCarouselLite({
auto:null
});
but it doesn’t work as I thought it might…
Any help ?
I am using this theme for my site which is in maintenance mode – but here’s the developer theme demo – http://www.press75.com/the-folio-elements-wordpress-theme/
When you click thru 3 times, the windows (light box/facebox) stop working. I don’t know if you can help me with that or not, but the developer is not helping us to fix the issue. It even does the same thing on his demo site. Is there a fix that someone who isn’t a programmer can fix?
When I’m using auto scroll, after pressing “prev/next” button time of next scrolling is not extended. For example: autoscroll time is 2 seconds, and I pressed next button five times, so next item will slide automatically just in a half of second later, not after 2 seconds.
Sorry for my horrible English…
Ok, I fixed it. I added new variable myinterval, and added in function go(to):
if(o.auto)
{
clearInterval(myinterval);
myinterval = setInterval(function() {
go(curr+o.scroll);
}, o.auto+o.speed);
}
also changed to “myinterval = setInterval several” lines before function go(to) (code looks similiar than this one i posted above).
@gynsek #492, #493: Good work. Glad you fixed it and got it working.
Hi,
Am using jcarousellite view to display Images in nodes in drupal based site. My great issue is, the default visible set on jcarousellite_add_view_js() is visible = 3, but i want to customize it that it would be visible = 1 for home page and visible = 3 for navigation links. Where could i customize it. pl help me immediately.
@Faaiz #495: I have no idea how to use jCarouselLite in Drupal. So, I cannot be of much help there. But, as far as the plugin itself is concerned, you have to just set “visible:3″ as its option or “visible:1″ as its option to achieve what you want. Hope that helps.
Hi
Great plugin. Definitely the best Carousel I’ve found – and I’ve tried half a dozen of them in the last couple of days.
Is there a way of resetting the carousel? Or even better – sending it to a certain index in the carousel?
My implementation changes the contents of the carousel through user input – this works fine, but it would work better if I could send the caroussel back to its initial position.
Cheers
Ben
Hi thanks for this wonderful piece of work.
I’ve been trying to add a right margin on the picture but I can’t make it work..
Could you help me please.
I’m using the Default Configuration.
Hi Ganeshji,
Thanks for the great carousel. I am a total nube when it comes to Jquery or javascript. The best i can do is copy and paste your code and hope for the best. I am having problems with the jCarousel Lite at the above address under Media / previous messages. the pictures in the carousel dont load on the first time that you access the page. But if you hit the back button and then the forward button. the carousel appears on the page the way its suppose to. I only know html (with much dreamweaver help)so please dont laugh when you look at my code. lol
@Jeff #499: I checked out your webpage and the carousel seems to work fine. You probably have fixed it in the meantime, or I am missing something here. Which browser were you facing this problem in?
@Thibault #498: The information you have given is too less to work with. Can you kindly direct me to link where I can see it in action.
@Ben #497: I see your point. I myself recently came across the need to send the carousel to a given index but since that need passed away, I forgot about it. Most probably I will get around to implementing that feature pretty soon. But I can’t promise you a date. In the meantime if you get around to fixing it, please keep me in the loop so that I can update jCarouselLite with that new feature.
I am very happy with your work thus far, but I am having a bigger issue then I thought. Well, not so big, but noticeable in my eyes. I have a vertical picture carousel, then a second horizontal text carousel. These together act as my News Slider together. I have them timed exactly the same, but it seems that sometimes one or the other will slip off the timer and randomly skip an image or a text section and basically destroys the synch of the text and picture together. I either need some way of putting them together into one section so even if the timing is off it will still pair together, or I need to figure out why the timing is off. Thank you.
@Brad #501: Brad, I get ur issue. If I can see it visually somewhere, I could help even better. Can you kindly direct me to some test page where this happens. Technically speaking, the timing should sync.
Great toolset overall, and definitely light. Thanks! One thing that would be nice for the auto-scroll would be to provide an auto-scroll direction, so that if you’d like to scroll automatically from left to right instead of right to left, or top to bettom instead of bottom to top. If this exists already, then I somehow missed it in all the good documentation and comments.
Now, to figure out how to trigger the next, previous, and go events via javascript….
I wanted to thank you for this plugin. It is a life saver.
I do have one question though, how do I use the afterEnd “object” that is returned? I want to automatically show the larger image of the first visible thumbnail.
I cannot seem to figure out how to use the object you are returning to achieve this.
Thanks again!
@mboyden #503: You didn’t miss it. Yes, there is no way to scroll in the opposite direction for auto-scroll. I am wondering how I missed such a useful feature. I will try and get around to doing it as soon as I am able to squeeze out some time. In the meantime, I suggest that it should be a small modification to the source and the source as you can see is pretty simple and well documented. Let me know if you succeed in getting this feature done. Thanks. In the meantime I will also try my best to get around to including this feature.
@Bob #504: The object that is returned is a jquery object that is a collection of all visible elements. Using this object, you can get the first visible element (if you have more than one visible element). You should have some metadata associated to the element within the carousel (like in the “title” attribute of the “img” that is displayed. Using that metadata you can populate a larger image. Check out the “Custom Widget” in the jCarouselLite project page – http://www.gmarwaha.com/jquery/jcarousellite/index.php . This is not exactly the same as your requirement, but comes close. Hope that helps.
I understand that. I have tried $(a+’:first’), etc and everything else I can think of but for some reason I get “undefined”.
I am just setting the dynsrc attr and I use that. I just need to figure out how to use afterEnd to get the dynsrc of the first one.
Thanks for helping.
@Bob #506: I tried it out here. It is pretty straightforward to find the first carousel element. In my case carousel elements are “img” tags. So, here is what i did in the afterEnd method.
afterEnd: function(a) { console.log(a.find(":first").attr("dynsrc")); }That returned the “dynsrc” attribute for the first visible element of the carousel after the animation was complete.
Sorry, thanks for the help.
That does work…I just have never seen it like that. I.e. I was trying $(a).
Thanks!
Sorry to bother you again. I noticed the “fraction” that you can show and was messing around with it. Here is my code:
$(“.widget .jCarouselLite”).jCarouselLite({
btnNext: “.widget .next”,
btnPrev: “.widget .prev”,
visible: 3.3,
circular: true,
speed: 100,
start: 1,
beforeStart: function(a) {
$(“.widget .mid img”).hide().attr(“src”, ‘/images/icons/spacer.png’);
},
afterEnd: function(a) {
$(“.widget .mid img”).attr(“src”, a.find(“:first”).attr(“dynsrc”)).fadeIn(’slow’);
}
Everything works except that instead of showing 3 full and one partial, I get 2 full and 2 partial. Ideally it would be 3 full to the left, and the partial on the right, but it is showing a partial #1, 2 full, and then a partial #4.
Any thoughts? (in your example you have circular set to false, but I want it set to true – setting to false “fixes” the problem).
Thanks.
Hello !
I have tried to add your carroussel on my website ut I’ve got a problem. It’s totally ok on Firefox but not in IE (all versions).
Do you know if there are some issues?
I’ve got 2 carrousels on my page. The js is external and contain these lines :
$(function() {
$(“.catalog-horizontal”).jCarouselLite({
btnNext: “.nextproj”,
btnPrev: “.prevproj”,
});
});
$(function() {
$(“.catalog-vertical”).jCarouselLite({
btnNext: “.next”,
btnPrev: “.prev”,
vertical: true,
visible: 2
});
});
I’ve got one vertical carousel and one horizontal on the same page.
Here is an exemple of the html code for the vertical carrousel :
content1
content2
…
Is there a mistake in my code? Or the carrousel don’t work with IE (I’m quasi sure my code is wrong?!)
Thanks for your help man and congrats for your work on this project.
Kind regards
Sorry, the html code don’t work on the com…
here it is :
[div class="container2"]
[div class="catalog-vertical"]
[ul]
[li]content1[/li]
[li]content2[/li]
[li]…[/li]
[/ul]
[/div][!--/catalog2--]
[img src="..." class="prev" alt="" /]
[img src="..." class="next" alt="" /]
[/div][!--/container2--]
My website is http://www.teamthinktank.net , you can see the issue there by refreshing. You might have to watch it for a bit to see the error. Also, I am a bit new to editing css/jquery files so I am not sure how to add in the fix for loading off screen. Maybe you can offer some help on how to isolate the loading of this dang twitter news deal. Any help will be appreciated!
Thanks for the excellent plugin! Is there an option to stop the auto scroll when the user hovers over an element in the carousel?
- Jonah
Forgot to mention I am using jQuery 1.3.2
Hi, I am playing around with your script and am having a bit of trouble.
It doesn’t seem to handle uneven numbers of images properly when working with higher scroll values.
Example, I have 12 images, 5 shown at a time & I want to scroll 5 images at a time… This is not smooth, it jumps around and doesn’t end up displaying the final 2 images at all unless I scroll backwards from the beginning… Different numbers of images combined with different numbers of pictures to scroll per click yield different results.
Bottom line, when the # of pictures is not a multiple of the number of pictures being displayed & being scrolled, the plugin seems to fail.
Any help you could offer on this would be appreciated. There is no documentation regarding this effect on your site.
Hello again, browsing through your comments I found a user who had a similar problem… Your reply to him was the following
“@Chad #410: I guess, the plugin looks for a minimum of “visible” elements to function properly. But anyways, what would you want displayed in the other 3 slots if visible:4 is given and you provide only 1 image in the “li””
He did not reply. Some options for what would be displayed :
1. The first 3 images looped around,
2. 3 “items” of blank space.
However, the least acceptable option for your script is probably “not displaying the extra image at all / breaking the script”
It would be much appreciated if you could help me figure out a solution to this problem.
Hi,
I got the same sync-problems as Brad does (#512).
See this demo page using two synced carousels:
http://themeforest.net/item/wordfolio/full_screen_preview/38723
Just click several times on the up-arrow and the two carousels will be out of sync.
I tried a lot with changing all variables, but it does not get better.
Hello!
First of all thanks a lot for this awesome plugin.
I’ve used it on one of my projects a lot but now I need to make it loadable through AJAX, because loading all carousel items normally results in huge number of requests. I wonder is there a way to reinitialize jCarousel lite so it will take new items into account.
Thanks, Mikhail
@Bob #508: No problem. Glad you got it working. Thanks for using jCarouselLite.
@Bob #509: Yes, i see your issue. I will debug and fix it as soon as possible and post an update. Sorry for the inconvenience.
@detruck #510, #511: I tested it locally it works fine for me in all browsers. I guess, there should be something wrong in your HTML code. If you could direct me to a test page where I can see the issue, I will be able to help you. The HTML u posted is incomplete and I understand that HTML gets rendered in my comment box making it difficult to post HTML. So, I suggest just host a test page somewhere and send me the link. I will take a look at it.
@Jonah West #513: Sorry, but there is no option for that right now, although I am thinking of adding one in the future.
@Mike #515, #516: After looking at your comment, I went ahead and tested what you said locally and it seems to work very fine buddy. If you have say 11 images in the carousel and have like 5 elements visible at anytime and your scroll value is 5 again. Then, initially 5 images are getting displayed. On click of the next button, the next 5 images are getting displayed. On click of the next button again, the 11th image and the first 4 images are getting displayed and I find this to be the correct behavior. If you are getting any other behavior please make a test page and direct me to it. I will be glad to help.
@Brad #512: I see what you are talking about. Sync issue right. Lemme see what the bug could be. Thanks for pointing out.
@Mikhail Novikov #518: Sorry, but jCarouselLite doesn’t support loading using ajax, coz that essentially will add quite a bit of code to the core and will make it jCarouselHeavy. But, you dont have to lose heart as there are quite a few other carousels built using jQuery that are not as light, but support ajax. Thanks for trying jCarouselLite.
@Tier #517: I see your issue. I will try and debug it as soon as possible. Thanks for pointing out the issue.
Hi,
I just put together a carousel using your plugin version 1.0.1 that is visible here:
http://pw.pilango.com/
It works fine in firefox 3.5 on ubuntu, but we are having issues on firefox 3.5 windows and also on chrome. Do you see anything wrong on your end ? I am setting the li elements width to auto and the carousel’s width to 853 px after initializing the component in order to get the type of display that we are looking for.
Thanks for your help !
@Ganeshji and @Mike #515
I found the same bug Mike describe when circular is false. If I have 19 elements, and I have scroll set to 3, visible set to 3, and circular set to false the 19th element is not shown.
Thanks for looking into it. I am thinking maybe the reset function is a bit messed up or something. Since the two carousels are of different size and so forth, I think the pictures tend to reset faster because it has a set timer? I could be totally wrong, but I have been aggrevated by this issue for a while now. Let me know what you can come up with as a reasonable fix. Thanks!
Ok sorry for the false alarm in #520, working fine under IE and Firefox now. Seems using $(function …) instead of $(document).ready(function …) did the trick although I thought these where equivalent. I’ll continue doing some more cross platform / cross browser tests just in case !
I made a small change to this plugin which may be useful for others: instead of hardcoding the use of ul and li for the list and its items I have made them configurable. I use this for markup which uses a for the list and a series of elements for the contents.
I’ve put the diff at http://www.wiggy.net/files/flexiblelists.diff
Hello,
thanks fo the plugin.
I’m trying to use the External Control but there is one issue when you set “start” method.
For example I have 4 item I want to navigate through and my code is :
jQuery(“.externalControl .jCarouselLite”).jCarouselLite({
visible: 1,
start: 2,
btnNext: “.externalControl .next”,
btnPrev: “.externalControl .prev”,
btnGo: [".externalControl .bt1", ".externalControl .bt2", ".externalControl .bt3", ".externalControl .bt4"]
});
If start is not 0, here 2, then it won’t loop correctly if you use the “prev” button.
Any idea please?
Hi,
Just wondering, is there a way to Auto-Pause scrolling when in “auto” mode?
Cheers,
Michael.
Ooops, sorry, forgot to mention during onhover…
Hi, congratulations for the work! Please when I upload my site in IE7 the images are superimposed, what may be occurring? In Firefox and IE6&8 are perfect. Sorry, but i´m not fluent in english..
http://www.testadoporelas.com.br
Thanks!
Hi Ganesh! Thank you for an awesome plugin! It works like a charm until I do add “circular: false,” (without the “s) to my carousel. For some reason it just won’t scroll the elements. It still hides them properly and everything, it just won’t scroll. I tried adding an auto-option as well, but that didn’t work either.
Any help would be madly appreciated!
@Luis Arias #520: Try setting the width property of the individual “li” elements and the content within the “li” in your css.
@Lauren Russell #521: Yes, I see the issue. It works fine with circular: true though. But lets assume that it works in non-circular mode. What would be the result. You may have an empty element padded to the end to show a blank “li” right. Then, even if you have it in circular mode, there wont be a smooth feel for the carousel because you will be seeing one or more padded elements in the carousel. In any case, I will look into this issue. Thanks for pointing out.
@Luis Arias #523: Glad you got it working
@Wichert Akkerman #524: Good job. Simple yet powerful change to allow any HTML elements inside the carousel. I had it specific to ul and li because they look to be semantically right for a carousel.
@kazes #525: Please post some test page and direct me to it. I will take a look.
@Michael #526: Sorry, but none available so far with the plugin itself. But, i remember that another fellow jcarousellite user had modified the code to accept this feature as well. Check out the comments section slowly. You should be able to find one for sure.
@Marilise #528: It seems to be working. Just that the height seems too high. This is just some CSS issue. Check the margin size, and also check for some double margin issue with IE.
@Niclas #529: Can you please host a test page and direct me to it. I will take a look.
Hi Ganeshji,
no news for #517?
Greetings!
I find your plugin very cool and I used it on my company’s page and everything works fine, but…
There is a small issue. As I view my page on opera (only) and try to refresh the page containing the carousel it breaks (the dimensions of containers inside change, some new containers appear etc.) Could you take a look at the issue?
Thx in advance,
Simon
@Tier #533: Sorry. Trying to debug. The issue doesn’t occur always and is really getting hard to debug. Let me know if you find out anything
@Simon #534: Make a test page and direct me to it. The carousel on this site works perfect with opera even after a refresh. So, we will have to check out your css only.
@Ganeshji: http://inteaao.com/carousel/ <- there you have it.
Thanks!
Hi and thanks for great plugin!:D Is there any way to add caption bellow images?
My html structure is the following:
CAPTION
but caption doesn’t show!!!
If a disable Jcarousel then everything is ok! When I enable it then caption disappears!
Any help please??:D:D
Hi, I decided to put the site online and it’s -> fuero.pl
Try navigating through it using the menu and refresh sites that have a carousel, the error should occur (ot did a minute ago)
Thanks!
Simon
Hi again! Ok I solved by myself the above!:P Yet, I have an other question… Is there any chance to add multiple rows to slide, instead of one? Thanks again!!!
@Ginger #539: Glad that you got it working. And yes, use “scroll: 2″ as its option for scrolling 2 elements. You can give any number to the scroll attribute
@Niclas #536: I checked your test page. The problem is simple. Your carousel is set to display 3 images at once, but the css for your carousel allows it to show only one. Since you have circular:false and only a total of 3 elements and visible is set to 3 by default, there is no activity on the click of the next button. To test it, just change visible to 1 and then you should see activity in the carousel. But that is not the solution. Your carousel elements should have width set explicitly for the plugin to calculate the entire carousel’s width. Fix the css and then you should be able to see all 3 carousel elements at once. Hope that helped.
Ganeshji, thank you so much!
Are you planning to implement an option to display captions for the images? It would be nice to have that feature
Hi Ganeshji, I think I have a similar problem to others. Basically I am using circular: false and visible:6 – the problem is that towards the end of the images the scroller does not scroll left/right. If I reduce visible to say 5, then it works OK, but does not display correctly.
For an example, have a look at http://mardbalkarts.com.au/staging/artists07.html – on anything after this image the same problem occurs, but anything before this page works just fine.
I am confused!
Hi Ganeshji,
How to make it scroll on mouseover on next and prev button?
Thanks,
sanjeev kumar
Is there a way to add a play/pause button to the carousel when it’s in slideshow mode?
Excellent script, Ganeshji.
@mboyden #503 — The answer turns out to be ridiculously simple! To make the scroller move in the opposite direction, just open up your copy of jcarousellite and look for this:
if(o.auto)
setInterval(function() {
go(curr+o.scroll);
}, o.auto+o.speed);
and change “curr+o.scroll” to “curr-o.scroll”. That’s it!
LVX
TF
@Niclas #542: Glad you got it working. Thanks for using jCarouselLite
@Nicholas #543: Can you elaborate further. What exactly do you mean when you want jCarouselLite to display captions for images. If it is a feature many of us would like having, I can definitely implement it.
@Paul #544: Found the issue and I am in the process of fixing it. It is almost done. I will update this blog entry once I upload the fixed version and will post a comment as well. Kindly revisit again in a couple of days to check out the revised version and see if it solves your problem
@Sanjeev Kumar #545: At present, jCarouselLite takes in the expression for btnNext and btnPrev and binds it to a click event only. This is because, it is the most used use-case. If this feature is requested by many others we can implement it into the plugin itself. But for now, I would suggest to modify the source of the plugin to achieve the effect. Look for the place where the buttons are bound to the click event. Instead, bind it to hover(). Remember, click takes place only once per user click. Hover, event is fired repeatedly as long as the user hovers over the button. So, take care when implementing the feature.
@Charley #546: Unfortunately no. But, I am working on an updated version of jCarouselLite which supports pauseOnHover. Will check if I can implement something along the lines of play/pause button when I complete that. Do check back for an Update in this blog entry to see if that feature is implemented. Thanks for using jCarouselLite
@AsIf #547: Thanks for helping fellow jCarouselLite users around.
Hi, great plugin. Just got one query – when using a combination of auto advance and external controls how do you get the auto advance timer to reset when you use the button to manually advance?
If I click the button just before the auto advance would have happened it advances twice in quick succession.
Thanks!
Hi Ganesh,
I am using .btnGo option to go to the particular slide .In the first loop it works fine it just slides to the slide name which is clicked but in the second loop it slides to the destination slide and in between it shows the slide which user already navigated . I don’t want the slides in between shown . Is there anyway i can hide the slides in between and only slide to the destination slide clicked?
I appreciate all your help here.
Thanks
Yash
Hi, awesome plugin. I have one question for you – is it possible to pause or stop the carousel programmatically? I will really appreciate your help regarding same.
Thanks !
Hi, I’m trying to use the plugin but I need to run a callback to add a class to the middle item of the carousel once it’s been initiated. I can add/remove the class I need using the beforeStart and afterEnd callbacks, but I can’t figure out if there’s a reliable way to access the visible items after the carousel initiates itself so I can add the class. I’m looking at your code to try and add an onLoad callback of sorts. Any recommendations without having to hack the plugin?
Hi again. I hacked your code and added an afterLoad setting to the options and
if(o.afterLoad)
o.afterLoad.call(this, vis());
right before the vis() function declaration and it seems to work.
Default Configuration.
One demonstration page, please!!!
sorry!!!!
Fraction Configuration
One demonstration page, please!!!
I can not understand libraries which force it to work
Hi Ganesh,
Can I have variable width for images with this plugin? There will be images with different width but the same height. I tried but it “crops” the image to same dimension. Is there a workaround?
Fraction Configuration
The left button should be hidden by default
hi there,
have you perhaps taken a look at my problem?
Thanks in advance again.
Simon
Hi,
I purchased a wordpress template (Using WP 2.8) with the JCarousel lite already embedded and I added JQuerry Lightbox as recommended by the designer. I went through his instructions:
F) Adding items to featured slider
The featured slider takes posst from one category and displays them. After installation, You need to specify which category that is.
1) Go to Admin->Appearance->Dakr Pro Portfolio Settings
2) Select a category for Featured (slider) Category
3) Optionally, You can hide posts that are in this category, from posts/blog page.
4) Save
Next, You need to add posts in that category and add a Custom Field called background to specify the background image.
For example, You create the post. Now add a Custom Field called background and add a full url to image as value, like so:
http://www.themepreview.net/themes/wordpress/darkpro/wp-content/uploads/2009/06/faction-913×199.jpg
As You can see, the background images should be 913×199 pixels\
I did as instructed above, but all I get is a small white square in the lower right corner of the slider. I have tried to contact the designer but have not heard from him and I am at a loss.
I also went back and made sure the web page url was in lower case under the settings> general tab, and I have tried using both url’s http://www.m-bryant.com/wp-content/uploads/2009/07/welcome-913×199.jpg
and
All help appreciated!
Milton
http://www.m-bryant.com
I have this plug-in in use on my home page which is running on WAMP. It works great in every browser except Safari and Google Chrome. In those browsers the carousel doesn’t show up when I first load the page, nor when I hit reload. When I navigate to the home page via the on page navigation link then it shows up. Any ideas what could be causing this?
Thanks,
Jeremy
Hi!
Concerning my comment #525 I posted a test page here :
http://supakazes.free.fr/carousellite/carousel.html
I explained the problem on the page.
Thanks for your help
kazes
hi, awesome stuff here.
i have one problem, it’s been killing that i can’t get it to work. i have carousels inside divs that are supposed to toggle. it toggles if i have the div set to visible. but if i set the div to invisible when the page loads, it still toggles but it does not show the list content, only the prev and next buttons show up. i’ve spent so much time researching for help but haven’t gotten any. i’m hoping you could tell me what the issue is. thanks
I resolved the issue I posted at 562. I switched from $(document).ready to $(window).load and it comes up immediately in both safari and chrome.
i have a similar problem as Jeremy at 562, only difference – in Opera 9. Tried to fix it as You said, but without any results… Any ideas?
I will be grateful for any clues?
Thx in advance.
hello,
Using the jCarousel as single image slider doing something bizarre when using the “start” option, When i click next/previous button for the second time it skips some images in the middle..
I was hoping to send you a zip file as a demo, but couldn’t find an email to send the file to..
Hi there,
I am too trying to make the externalControl detect the current image, and set some sort of style to show which. Any suggestions for doing this? Or perhaps this would be possible to incorporate into the actual script?
Best regards, Jens
I have used this jCarousel Lite script.
I basically built the required design in an index file. All worked and images linked, etc.
Then I moved it to the build html.
However, the only difference is that the slideshow is placed inside a div that starts off hidden. When it is revealed the slideshow is not visible. The box holding the slideshow is.
How can I resolve this issue?
Thanks in advance
Hi
I managed to get the images to show in the correct place and div, but unfortunately now, they appear in every div. Instead of display:none you add visibility:hidden to hide the divs, however, this doesn’t hide the images in the li tags.
@Mike Mai
I think a friend and I have solve the issue. With having the slide in one hidden div and the then open and close original div.
We discovered that on the div, if you set the display:auto then it seems to work.
If it doesn’t then I will send you a full example of my working one, to show you what we discovered.
OK
Hum!
Seems to have the div that needs to be hidden, always in view until the clicks start taking place.
hey Rob, i dont seem to get it to work. i have my codes like this:
previous
next
oops, don’t know how to paste the codes here. do you mind to email me? mj2themax2002@yahoo.com
i’m fairly new to coding. :/
@Mike Mai
Hi
You have to hang tight. My solution didn’t work. It only works if you have a carousel on the opening visible div. Will see if I can get a resolve soon.
I am completely new to coding
@Matt #551: Sorry, Unfortunately it is not possible to reset the timer at present.
@Yash #552: I don’t know if I am understanding your requirement right. But if you don’t want to slide through the images between 1 and 10 for example if you click on the 10th button when the currently displayed slide is 1, then sorry it is not possible. That is a feature of jCarouselLite.
@Sahil #553: Unfortunately no. It is not possible to stop right now. But, I will make a note of it. Maybe in another release I will return an API once the call to the plugin is complete using which you can do certain functions with the carousel.
@Matt #554: If all you want is to get the visible elements, you can directly use jquery to query the visible elements of the plugin after the call to the plugin is complete. You don’t need any assistance from the plugin itself. You just need to select the “li”s from the carousel. You know which ones will be visible once the carousel will be initialized because you are the one setting parameters and initializing the carousel. Makes sense.
@Matt #555: Glad you hacked it and got it working, but i feel it is not necessary, coz you can anyways select the visible “li”s using direct jquery after the call to the plugin returns.
@Dima #556: Give me another couple of days, I will try to get a demo page uploaded.
@Aadi: Technically you can have variable width but the carousel will calculate the width of all the elements based on the first “li”. This is basically because jCarouselLite assumes that all the “li”s will be the same size. So, if you try and put the widest image as your first element, it should work, although not as you might want it to.
@Milton #561: Sorry couldn’t be of much help here, other than to say that there was some problem spotted using lightbox along with jcarousellite. Why don’t you try thickbox and see if it works for you, or try searching the comments section. I vaguely remember, someone posting a solution for that.
@Jeremy #562: Can you point me to your site so I can take a look.
@kazes #563: I think you have hit upon a corner case. The problem is when you have circular: true, start to be non zero etc. Just disabling circular: true makes the carousel work perfectly again. Try that, in the mean time, I will try to take a look at the corner case bug.
@Mike Mai: The carousel builds itself once the page is loaded. If it is invisible, it probably is not able to calculate the width and height of elements accurately. That is the cause of your problem
@Jeremy #565: Glad you got it working. I guess, $(document).ready is not getting fired right with newer browsers. Anyways, we have our good old window.load for those cases. Dont we?
@mega car #566: No idea. Just point me to the page and I will take a look.
@Mike More #567: ganeshread at gmail dawt calm
@Jens Nilsen #568: I am unable to understand what you want to do. Can you be a bit more elaborate.
@Rob Snow: When the carousel is constructed it needs to calculate the height and width of its elements, but if the carousel is going to be invisible during construction, it could be impossible to accurately calculate the dimensions. So, I suggest, once the carousel is fully construction you can use jQuery to hide it instead of having is invisible to start with.
thanks, Ganeshji. that seems complicated. hope rob and i could figure it out somehow.
http://www.fuero.pl
regards
Thanks for your reply!
What I want to do, is make the script detect what image is being viewed (I use the externalControls, the list of buttons to navigate, as a pagination, and have it set up to flip from 5 pictures to the next 5 pictures when clicked). So, that when I click for example button #3, which in turn navigates to image #15 it will set a border (css style) to the button clicked, indicating that I am now viewing whatever I should be viewing when I clicked button #3.
Does this make more sense?
Also, is there a supported method for using multiple carousels on one page?
Best regards, Jens
@ Jens Nilsen
http://nathansearles.com/loopedslider/
if someone can merge the two, that’d be awesome.
Just a warning: if the is set to display:inline there are some very strange and undesirable effects.
Found a cheap solution for my first question: Use jQuery to set a border to the clicked element, and remove the border from all classes with the externalControl class-name. It works, but would be better with a internal method for it.
The LoopedSlider is more or less identical to jCarouselLite in functionality. Did anyone manage to successfully replicate multiple carousels so far?
hey, love your site! had a quick question on implimentation about jCarouselLite… is there a way to reinitialize it through JS??
basically I have a “live search” or “filter” that matches a field, hiding and showing LI elements in the scroller… which works great, but the scroller still retains the original count (# of LI items), and naturally scrolls way past the # of remaining elements.
my first instinct was to call the main function again, but that seems like a lot of overhead for the browser… any ideas??
thanks!
@Mike Mai
Found this site!
Don’t know if this can help solve the problem:
http://www.learningjquery.com/2006/09/slicker-show-and-hide
Hi,
first of all thank you for the plugin.
I have a problem when setting the start value to anything else than 0.
when clicking back and forth the carousel seem to get irritated about the right display order. ie. it jumps back 3 and forth 2 and it seems to do it randomly. anybody had that problem before?
Hi!
I have a new question for you Ganesh
I am trying to make the scroller go the “other way” when I click the next-button. I tried the solution in commend #547, but I couldn’t get it to work. The “fix” is applied to a test-site I’ve set up: http://inteaao.com/temp/
Thanks!
Regards
Niclas
The plugin supports image and non-image content, but can a list, , item within the -enclosed hold both types of content. I’m thinking about a carousel like this one.
Thanks
@Jens Nilsen #581 and #584: Glad you got it working with existing features. There is no method within the carousel to make such a thing happen. Also, what is your problem with multiple carousels in the same page? It is always possible. Can you be more specific.
@Mike Mai #582: loopedSlider is only a single image (content) slider, i believe. You cannot have multiple visible items and scroll more items. Anyways, what functionality from that are you looking for?
@Lakario #582: Thanks
@Max Sterling #585: Unfortunately no, I guess, you will have to re-initialize it manually by first unbinding the “next” and “prev” click events and then calling the main method again with necessary parameters. It is not a big overhead because, any other internal init method also has to calculate most of the things the main method does. Maybe it would have been a big overhead with very complex carousel implementations. jCarouselLite is very lite so, initializing it again shouldn’t be a performance hog. But, remember to unbind the click events from your app code.
@Mika #587: That is strange. Point me to a test page where I can witness the behavior. That way, i can probably try and help.
@Niclas #588: The solution in #547 was for auto scroll. Your requirement is for manual click. In any case, the solution is even more ridiculously simple. You don’t even have to change the code. All you have to do is give the “prev” button in place of next and “next” button in place of previous and you would have reversed the functionality, isn’t it?
#finid #589: Ofcourse. As far the the content goes, you are limited only by your imagination (and ofcourse what a “li” can hold)
Hi,
Is there a way to make JCarousel handle multiple rows of items? It looks like one person has started work on the idea, but it looks like it has its problems: http://markmail.org/message/4gkiymtmzpjo5yrn#query:jcarousel%20multiple%20rows+page:1+mid:f66lffuehaihq7ou+state:results
Hi there,
Firstly, great script. I’m having a problem though injecting the carousel into a page dynamically using JQuery’s .load method. Basically, any number of carousels can be injected into a DIV depending on choice.
The images are not loading correctly. The ‘li’ element’s height is generated at 17px, only a fifth of the thumbnail. Would you have any advice on this?
Thanks
Hi,
I use your plugin in Liferay in works fine with FF and IE7 but with IE6 the images doesn’t appear. Can you help me?
Thanks
Hello Ganishji, I have thoroughly enjoyed your carousel and think it the best one available in Jquery, especialy for its never ending function. After finally installing and debuging it within the 1920’s gothic jewellery website i am working on i was very happy to have a very cool scrollable item viewer, i built it to be viewed though an iframe so the large li divs wouldn’t complicate my tidy page and low and behold it worked on all but google chrome where it appearse to have a massive left margin of half the page! Is this a bug or is it just my styling? I’m not used to google chrome doing something different to firefox so i’m not quite sure what to do with it.
Many thanks. http://www.charmoffensive.me.uk
Hey Ganishji, I love the jCarousel lite jquery plugin, but had 2 issues relating to the ‘auto’ functionality:
1. When the number items is less than the number visible, it seems to scroll once, then reset and scroll the same items once more. Probably just a check that only makes it auto scroll if the number of items is greater than the number visible.
2. It would be nice to seperate the btn scrolling amount vs the auto scrolling amount. For example: the auto scrolls one at a time, and when the button is pressed, it scrolls an entire page.
Thanks.
I have noticed the same problem as 595 willem with the auto scroll reaching the end and scrolling one item and then resets.
I am trying to scroll 4 at a time and if there are lets say 9 items it does the weird scroll one at the end and then reset.
Any ideas how to fix this?
Also notice a few other things.
1. if you dont have any thing in the list you get an error on the page. The reason for this is my list is dynamic so some days there might not be any.
2. if you set it to scroll 2 at a time and show 4 but there are only 2 list items it only shows the second one and scrolls it really fats and you never see the first one.
Also with it set to show 4 and only 4 list items it scrolls and then resets and then scrolls. it does not add the items below and scroll up. might be an issue with the counting items and adding them below if only as many as the show number.
ok one lat thing.
if you set it to carousel and auto start with only one list item nothing shows up. Shouldnt it calculate how many list items and if les than the how many to display then not scroll?
Hi There,
Thank you for this awesome function. However, I am having problems with installation. I have never used jquery before, and design using dreamweaver. I downloaded both jquery and jcarousellite and linked them to my document, but am not sure I understand where to place the button/function code and do not know what “fire a call to plugin” means. Can you help me?
@Inejiro #591: jCarouselLite does not support multiple rows. Thanks for pointing to that project. I will have an eye.
@Matt #592: Inserting a carousel dynamically should work fine. Can you host a test page where I can see your issue?
@Mary #593: Sure, What exactly is the problem. You are giving too little information. Can you host a test page and direct me towards it. That way, I can solve your problem more easily
@Alisdair #594: jCarouselLite works well on Chrome and Safari. That much I know. Since you are using an iframe, I am not sure. Can’t be of much help here. But, why do you think, iframe is a good choice again?
@Willem #595: Thanks for pointing me to the issue. Point taken. About the #2 feature request, I will not it in my todo list and lets see when I can squeeze in sometime to add more features.
@Aaron #596, 597, 598: I am working on the fix right now. Hope to get it out in next week mostly, if I am unable to complete, the week after for sure. Will keep the blog updated.
AWESOME! You are the best and cant believe how fast i got a response! AMAZING and you are fixing it!
Thanks soooo much!
Hi Sir Ganeshji Marwaha,
First of all, I love your template. Really AWESOME!!. Thank you so much!
Anyway, i have a slight problem regarding on styling..
I noticed that, when i put a border style on the “li” or container, There’s some problem on IE browsers. ie6++ ! the width of the container is shrinking. i don’t know why.. and there’s some excess on the masking effect.
Can you help me with this..
Thanks so much!
Ganishji, i have pulled the carousel out of the iframe and put it directly onto the page and i am having the same problem! I dont seem to any styles which would be knockng the carousel off center i am stumped!
Check it out on ff & then on chrome:
http://www.charmoffensive.me.uk/pages/jewellery/jewellery_lists/angel/s-p-e-c.html
@Alisdair Shepehrd #604: How do you think your carousel implementation is different from the one on this blog, or the demos in the project page. The project page even has a demo named “Image Slider” that is similar to what you are doing. Both the project demo and the blog demo work fine in FF and chrome. So, I am confident there is some CSS quirk that is affecting you. Sorry, can’t be of much help.
is this carousel have the option to stop when mouse is on top of the image and the auto option is enabled ???
Thanks G, i guess i will have to just rebild the page and isolate the elements till i can get it to work! Keep up the good work
Any update on the fixes you were working on regaurding my earlier comments?
Thanks!
Hi Ganeshji,
I’d like to use jCarouselLite like in your demo called “Custom Widget”, but I couldn’t figure out how the html must be structured in that case, Could you give me some help with the html code structure?
Thanks,
Antonio
Hi
We are using jcarousellite.js for creating a carousel of images.
We are facing a major issue here.
The page structure is as follows:
1. Parent JSP – which includes all javascript references – jquery, jcarousellite,..
2. Child JSP 1- Inlcuded in the above Parent JSP has the carousel of images which is populated dynamically.
3. Child JSP 2 – Included in the above parent JSP has a featured section with featured images again populated dynamically.
Issue: When the number of feature images are around 5 or more, time taken to load the prev/next red scroll buttons in the carousel is more and noticeable. JQuery will wait for the page load event to complete to display/hide the prev/next red scroll buttons.
Is there a workaround for this? Can we make the carousel to load and be ready independent of the page load event?
Thanks in Advance!
Regards
Ansu
JCarousel Lite is a great code.But can you add a new function for it,let the JCarousel can make the pictures scroll or not scroll when mouseover?
I love this plugin! How can you not like a 2k footprint. I am experiencing one issue, but only in Firefox(pc). I have a two column layout and the carousel is in the left column. The problem is the carousel, when activated, tries to pull my right side content over into the carousel. Kinda looks like its trying to steal it!
I thought it could be a jQuery release issue so I went down to 1.2.6 but still same problem. I’m using a strict doctype… could that be the conflict? I’m going to have to find an alternative for now but I would love to see this resolved.
Hi,
I love the jCarouselLite because it is very easy to implement. I only have one problem with it. When I’m trying to open the carousel in a popup no images are shown. I only see the previous/next buttons.
I treid several ways to create my popup but all fail.
I think the problem is the position relative or absolute.
Is there some workaround for this?
Thanks Bart
Hi!
Love the jCarouselLit! Totally amazing – once it loads. I’m experiencing a strange problem that the images won’t load at all until the page it refreshed. not sure what’s causing this problem and have gone through the known issues and tried all the quirks.
Please help site just gone live and client not very happy.
Thanks!
Hello,
I’m trying to use the Lite Carousel. But I have some problems regarding content and images. I have another “ul” in my content. But then the script is “confused” I guess and is displaying everything pretty weird.
I think I should just specify the “ul” and “li” in the jCarousel js. But when I do that, my content is displayed (almost) correctly but the buttons are not working anymore so nothing is really sliding.
Any ideas on how to specify the code so that the js is only effective on some ul’s
Thanks in advance
In addition to my previous post, is it possible to have multiple carousels on one page?
Thanks again.
@Xander: yes, just give different names to classes and instantiate it many times
Does anybody have problems with Opera (speciffically Opera 10 for Linux)? All the demos work but when i create my own carousel using code from “Installation” section everything works in Firefox, but in Opera I don’t see anything.
bug:
When i used the non circuler version sometimes the last items were not scrollable. I looked into your code and saw:
if(toitemLength-v)return;else curr=to;
That has to be:
if(toitemLength-v+1)return;else curr=to;
On other lines of code you did it correctly, i was testing with a nice number of rows so i didn’t see it untill it went live
Thanks,
Maarten
I had a hell of a time trying to get my .js files to compress with YUIcompressor. Turns out, this plugin uses a reserved word sans quotes which chokes compressor. Very minor typo, but causes a headache for anyone trying to run it through YUIcompressor. The details are documented here on stack overflow:
http://stackoverflow.com/questions/424469/compression-issues-with-jquery-file-in-yui-compressor/424489#424489
Other than that, GREAT plugin! Thanks for building and sharing it.
Hi Ganesh and others,
I’m having a little problem regarding your excellent jcarousel and thickbox. When using the carousel next and prev buttons the thickbox is not properly initiated if the user clicks too fast. Instead of the thickbox it’s content is shown in a new browser instance (or the same window).. I think I should be using beforeStart here to init the thickbox? Any ideas?
Is there any reported problems with Cufon & jCarousel Lite?
I have these two lines:
Cufon.replace(‘.cufon-light’, { hover: true, fontFamily: ” });
Cufon.replace(‘.cufon’, { hover: true, fontFamily: ” });
and my markup:
Blah1
Blah2
…
…
It creates a blank “li” which you can only remove and get the carousel working normally again when the spans are removed.
Any ideas?
Any updates on issues from 596, 597, 598?
Thanks for the help!
Hi, thank you for that great Plugin.
I could not find it mentioned (and didn’t want to go through all the comments, to be frank), but it does not seem to support nested content? i.e., there can only be one HTML element inside the .
I was building something like
…
bla
bla bla
…
and that did not work. Should it? If not, you could mention it on the issues page – or fix it
Anyway, thank you very much!
Greetings, Nils
To prevent users clicking next button when actually is at it’s end you can change:
$(o.btnPrev+”,”+o.btnNext).removeClass(“disabled”);
$((curr-o.scrollitemLength-v+1&&o.btnNext)||[]).addClass(“disabled”);
into:
$(o.btnPrev+”,”+o.btnNext).removeClass(“disabled”).attr(“disabled”,”");
$((curr-o.scrollitemLength-v+1&&o.btnNext)||[]).addClass(“disabled”).attr(“disabled”,”disabled”);
For me this was handy so i know the go() event is only triggered when it is possible.
First of all, thanks for this great lightweight plugin.
I can see that I am not the only one looking for an option to prevent scrolling on mouseover.
I have made some changes to the script adding a pauseOnHover option to the config.
http://www.dudal.com/jquery/jquery.jcarousellite.pauseOnHover.js
Example:
$(‘#selector’).jCarouselLite({
pauseOnHover: true
});
I would love if this (or some similar functionality could be added to the official release).
Thank you Ganeshji Marwaha!!! It’s a very nice control you have.
I’ve been thinking if it was possible to load/preload elements of the carousel dynamically. For example I have 50 elements but have markup for 6 and show only 3. Every time I click Next button I want to load from the server next 3 elements.
Ganeshji,
Excellent plugin! This was exactly what I needed for my project to introduce a carousel behavior.
I did run into a problem however when I had li elements with different heights, I am not using it in a standard way to show images of the same size, each li element has its own unique content. The part that didn’t work so well for me was here:
li.css({width: li.width(), height: li.height()});
If the last element in the ul has a smaller height then other elements then all the other elements inherit the smaller height. Which cut off some of my carousel pages. I am quite busy with a project so I may not be completely understanding why this is happening or have come up with the best solution but this seemed to make all the lis inherit the maximum height instead of just the last element in the list:
var maxHeight = 0;
$(“li”, ul).each(function(){
if($(this).height() > maxHeight)
maxHeight = height($(this));
});
li.css({width: li.width(), height: maxHeight});
Cheers!
Thanks for your post!
The most concerned issue i wanna to say is how cute your blog log is!:)
I have a problem that the page is loaded (postback) when clicking the next button when the carousel is on the last element. Same for clicking the previous button when carousel is on the first element. Found that the row “if(toitemLength-v) return;” when not circular in function go(to) only makes a return. Should be return false? Return false helped me.
Hi,
Having problems with the circular setting, on absolutely positioned div content within the container carousel div not displaying on loop back to start, until scrolled one more time.
Checkout: http://kavekreations.com/iphone.html for an example. There are three items, so after scrolling past the end it returns to the first time, where the relatively positioned image is displayed fine, but the absolutely position div with the text does not display until a further scroll to the next item.
Strange issue, I cannot seem to see where the problem lies in the script, any ideas?
On the first load of jCarouselLite 1.0.1 in firefox 3.5 the image doesn’t take up the entire div, until reloading the page. I’m using a purchased WP theme so I can’t be too sure of implementation, however the error console doesn’t catch anything. I haven’t checked any other browsers for this problem.
if it helps my page is here: http://watermanoshea.com/staging/
Hi,
you should add this lines of code:
if(!o.circular){
$(o.btnPrev).addClass(“disabled”).trigger(“classChange”);
}
because disabled isnt set on the btnPrev at startup if circular=false but the button is disabled.
// Disable buttons when the carousel reaches the last/first, and enable when not
if(!o.circular) {
$(o.btnPrev + “,” + o.btnNext).removeClass(“disabled”).trigger(“classChange”);
$( (curr-o.scroll itemLength-v && o.btnNext)
||
[]
).addClass(“disabled”).trigger(“classChange”);
}
Change: Triggers.
Triggers are the only way to notice the change of the button-status(disabled or not) an handle it in JS.
Hi,
I had a problem when using non circular and a scroll larger than 1 that it was impossible to scroll to the last items.
These are the changes i made:
…
// If non-circular and to points to first or last, we just return.
if(toitemLength-1) return false;
else curr = to;
…
$( (curr-o.scroll itemLength-1 && o.btnNext)
||
[]
).addClass(“disabled”);
…
I have a carousel with visible set to 5 and scroll set to 5. If I have a list length of 6 then I never see the 6th item. Changing:
if(toitemLength-v) return;
to:
if(toitemLength) return;
Seems to solve the problem.
Hi, love the plugin.
Is there a way to tell it to load a list of images from an external file. Im designing a website where they dont want to touch the html file list, however I hoping to give them a external file they can edit and the main html looks at this file to get the list?
Thanks
The carousel works fine in FireFox, but on Internet Explorer, the next and previous buttons do not work. Any ideas?
Thank You.
Hi!
Is there a way to get (from the js) the total number of items in the carousel and what item you are currently viewing? (I’m only showing one at a time).
Regards
Niclas
Hi Ganeshji,
Thanks for responding to #592; I managed to rectify it by setting the sizes in the CSS.
There’s an IE7 problem that I can’t seem to solve, which I’ll provide a link to. If you browse to:
http://robinstudios.com/a&s/
then click ‘collections’, then ’solitaire’, and finally ‘Round Brilliant’. You’ll see that the content window is populated with a main image, and to the right, a jCarouselLite vertical bar with thumbs and two directional arrows.
For some reason, when the thumbs are navigated by clicking the bottom arrow, the whole line of thumbs move down uniformally with every click, until there’s a large gap at the top. This only happens in IE7, but not Firefox, where they stay perfectly centered.
Would you have a suggestion as to what might be happening?
Thanks in advance,
Matt
Hi Ganeshji,
Just realised; if you view your own vertical demo in IE7, you’ll experience the same problem.
Thanks,
Matt
Firefox 3 renders the UL incorrectly, in 2 rows. For some reason the UL’s width is not enough. If I increase it by 2px, the images are rendered in a single line as they should, but then 2px is already visible of the next image which is not good. Any idea, why this display bug in firefox on my site?
IE does the same, however, Chrome works OK.
Hi! Great casousel script. Is there any way to externally control the carousel? For example, I want to trigger the scrolling on onMouseOver event on some other elements of my page… Is it possible?
Hi,
I used the plugin to create a scrolling vertical news ticker. It works fine on FF 3.5, Chrome, Safari, and even on my iPhone’s Safari. But the ticker doesn’t move on IE 8 or FF 3.0. I was wondering if you know of any issues with usage? I’ve included my test website in my posting.
Thanks,
Steve
Steve (#643), your websites requires username/password.
I am also interested in a vertical slider. Would somebody please point me to a well working version?
I’ve found the vertical demo on this website, but, unfortunately, I don’t have IE 7 to test it in. (Someone has complained about a problem in it.)
Hello,
I’m having an issue with this plugin ; maybe it’s my code that cause the problem. I will try to explain the best I can (i don’t speak english very well).
You can see the problem live on http://www.restopubcity.com, on the front page, there is 5 tag lines moving around in the right colunm. Everything is perfect until we reach the last tagline, which appear on white background on IE and no text at all on Firefox. There is 5 taglines total. The last tagline is the problem.
I suspect the use of Cufon.
I would love to hear from you about this issue, I don’t know what to do now….. If you have a suggestion, I’m listening.
You can also email me if needed.
Thanks!
hi Ganesh,
great plugin!
I had a quick question – I made a “search” feature which live updates as you type. it just searches the DOM (particularly the content in each LI) for the text you entered, and filters the carousel by setting display:none or display:block for items not matched and matched, respectively. this works fine, except the carousel still thinks those items are there and keeps their width(s), resulting in a mostly blank carousel, with a few of the matches spread out here and there.
I tried recalling the init function, but it seems to have no effect… is there a way to “reinitialize” or remove/reapply the carousel??
thanks!
Hey, I’m using your jcarousellite plugin on one of my projects. Can you help me with the easing plugin? I can’t find any information on instructions of how to use an easing plugin.
Thanks!
It was a very nice idea! Just wanna say thank you for the information you have shared. Just continue writing this kind of post. I will be your loyal reader. Thanks again.
Vancouver Wordpress (#648),
The easing plugin lives here http://gsgd.co.uk/sandbox/jquery/easing/
All of it’s options are in the “Exaples” part.
Hi,
The plugin is great, and in vertical scroll it’s working just as expected. But I have some issues when vertial:false.
Suppose I have a list with 5 items, so there I see the 1st items on the left after to its right there a blank space, and only after that the 4 more items appeareing, and again – they first all disappear and only after then I see the first item again, meaning it’s not streaming as I expect that after the last item, the 1st item will be just aside him.
What can be done to achieve the effect like in the demo with horizontal mode?
Thanks,
M.
Hi,
Sorry to say I don’t get the jCarousel Lite to work – at all.
I have studied some other implementations and of course the Demo part here. But no. I’ve got to bee the most helpless JS person ever.
I made a testpage and this is all of the code on the page:
$(function() {
$(“.auto .jCarouselLite”).jCarouselLite({
auto: 800,
speed: 1000
});
});
The page can be viewed here: http://www.kompetansetjenester.no/jclite.php
Can anyone help me out??
Svein
Well, that was not ALL the code of course. You kan view the source code at my test-page.
Svein
Nice plugin. Well done!
What I’m missing is the ability to further interact with the carousel. For my use case, when the mouse is over the carousel, the animation should stop, and start again when the user hovers out.
I’ve adjusted my local copy accordingly, no problem, but if it does not exceed the scope of your project, then I would like to see such an enhancement in a future version. It’s just a few lines of code. I could send you my copy if you mind. It’s no fully generic solution, but may serve as a basis. Thanks.
Cheers,
hi,
is there a change in the jcarousel to call the go function with javascript. eg i have 10 and i want to jump to number 6. How do I call the go(6) function or is there no way to do this.
thanks Smee Again
Hello,
I have a problem with this and I have double-checked my query, so I know it’s not the code. Basically, the carousel seems to double images when selecting them from a database, otherwise it works fine.
This is what I’m doing:
echo “”;
while(mysql_num_rows($r) && $row=mysql_fetch_array($r))
{
echo ““;
echo ““;
echo “”;
}
echo “”;
Great stuff! Far better than the “normal” jQuery carousel. Could be better though. Which is what I did: I added a few small things to expand its possibilities and removed a small (in my eyes) bug. Here’s an example: http://ezcompany.cms.ezcompany.nl/software-ontwikkeling
I added the fade effect (no sliding horizontally or vertically, but fading in/out on top of each other). The “bug” I fixed is the timer/interval that resets every time you click a control (yours didn’t reset, that’s weird behaviour).
Do with it what you want. Thanks for the plugin!!
Hi,
nice plugin. But even your demo for verical:true is not working right on yor site with IE. Please fix.
I want to create a carousel to display logos, each one having a different width. So each element in the carousel would have a variable width, but could be defined in the attributes.
The problem I am having with this plugin is that it displays a specific number of elements, while I need it to display as many as will fit… and possibly cut off the last one if it needs to. But right now I have to define a specific number and this just doesn’t work for anything other than fixed width elements.
Do you see any way around this?
Okay, I went ahead and tried it out and got it worked pretty good.
But I have found an issue. I want to display fractional items, and use circular: true. When I do this, and set visible to 3.5 it shows 2 full and then 2 partial.
I have seen many others on this blog post mention this.
A semi work-around is to use start: .5 but once you cycle through all the images once or twice, it gets out of alignment and starts showing 2 partials again.
Could this issue please be fixed? We need to use fractional numbers for visible with circular: true.
Thanks for your work. The plugin is great.
First off, thanks! This is a great plugin!
Maybe I’m just missing this but here’s my request. I have a horizontal slider with a width of 1 and set to auto-scroll. When I have only one item in the list, it still scrolls. Can it be set to not scroll when the list has only one element?
Thanks again!
Ok, while I’m looking that gift horse in the mouth, I might as well ask for one more feature.
Pause-on-roll-over would be really nice.
Thanks again!!!!
Hello,
I just implemented something with your excellent carousel. My problem was that I would like to add/remove some images dynamically. First I empty the #carousel_ul, then, add some But the problem was that if I already initialized the carousel, all btn actions where executed several times (next -> next …)
So I added an attribute to “this” and check if this attribute was initialized. if not, all button and mouse are initialized, if not all this block is not executed.
I can give you the example if you want.
Thanks for you script.
FKL
———-on version 1.0.1—–
added on line 254 :
if ( $(this).attr(‘initialized’) == null ) {
$(this).attr(‘initialized’, true) ;
added on line 285 :
}
———
Hi Ganeshji,
it looks like the perfect gallery to me – I’m impressed that anyone can write code like that
But I’m having some trouble making your “Custom Widget” work, and I can see that others has asked you for a code-example (but couldn’t seem to find an answer from you, even though I scrolled through all of the comments).
Therefore I ask again, can you please provide me (and others) with an example-page, that is not hidden as an included file on yout site?
And while I’m here, is it possible to include some sort of a caption area. I ask because I need to overlay the large image with a headline, description and a link?
Thanks in advance & keep up the fantastic work
)
Hi Ganeshji,
My problem is external controls. I’m click 14th item and sometimes next item appears. So if I click external item auto timer will be reset.
Hi,
when i try to setting multiple jcarousel in my project it display error in Firefox Error Console ..
`Error: el[0] is undefined
Source File: http://kingkoil/_js/jcarousellite_1.0.1.js
Line: 338
How to solve that problem?
thanks and regards
Hello, Good work
I think you can add the properties border-top-height, border-bottom-height , and border-bottom-width, border-top-width to your functions height(el) and width(el).
I’m integrating jcarousel lite to mount a carousel for videos.
My question is how can I add the option for superior view (bigger screem) like in your demo (Custom Widget).
http://www.gmarwaha.com/jquery/jcarousellite/index.php?#demo (custom widget)
Thanks
Hi Ganeshji,
Your plugin is very nice, I have used it almost successfully in a couple of projects, but I’m almost sure I’ve found a couple of bugs too.
First one is the unability to get the plugin to work properly with Chrome under some circumstances. Anyway, this is something I need to check a bit more.
The second one I’m pretty big is a bug. If I have a caroussel with just one image and the carousel is set with the “circular” parameter to “true”, the image won’t display.
As I’m not JavaScript gifted, I haven’t been able to fix this behaviour in your plugin, but I’ve got a workaround by simply disabling the “circular” if number of pictures is less than 2:
var picturecount = 1; // you can determine this with PHP if pictures are coming from a database, etc
And then:
$(‘.carrusel’).jCarouselLite({
circular: (picturecount>1?true:false)
});
Hope this helps someone in the same situation as me.
Greetings!
Hi Ganeshji,
i have one problem here, I’m using dynamic, some time is only 1 or 2 images.
with 2 images is only going to the same image.
waiting for solution.
thx.
There is a bug in your navigation logic, when circular is false.
To fix it, change (~line 289):
if (o.circular) { // If circular we are in first or last, then goto the other end
if (to 1, then the “to” might not be equal to the condition; it can be lesser depending on the number of elements.
curr = to == o.start – v – 1 ? itemLength – (v * 2) – 1 : itemLength – (v * 2) – o.scroll;
} else if (to >= itemLength – v + 1) { // If last, then goto first
ul.css(animCss, -((v) * liSize) + “px”);
// If “scroll” > 1, then the “to” might not be equal to the condition; it can be greater depending on the number of elements.
curr = to == itemLength – v + 1 ? v + 1 : v + o.scroll;
} else curr = to;
} else { // If non-circular and to points to first or last, we just return.
if (to itemLength – v) return;
else curr = to;
} // If neither overrides it, the curr will still be “to” and we can proceed.
Into:
if (o.circular) { // If circular we are in first or last, then goto the other end
if (to 1, then the “to” might not be equal to the condition; it can be lesser depending on the number of elements.
curr = to == o.start – v – 1 ? itemLength – (v * 2) – 1 : itemLength – (v * 2) – o.scroll;
} else if (to >= itemLength – v + 1) { // If last, then goto first
ul.css(animCss, -((v) * liSize) + “px”);
// If “scroll” > 1, then the “to” might not be equal to the condition; it can be greater depending on the number of elements.
curr = to == itemLength – v + 1 ? v + 1 : v + o.scroll;
} else curr = to;
} else {
if (to itemLength – v) {
// Go to last element minus visible.
curr = Math.ceil(itemLength – v);
} else {
curr = to;
}
}
Hi, great plugin.
It’s possible to have 3 picture displayed verticaly but to slide horizontaly?
I have 9 pictures (or more but allways in increment of 3) and I want to display on one side 3 pictures one below to other and to slide horizontaly to display the second 3 then the last 3 and then in circular.
Hi,
I tried this:
jQuery(function() {
jQuery(“.selected_slide”).jCarouselLite({
speed: 1000,
visible: 1,
auto: 2000
});
});
It just shows 4 flashes and then together they move. Does it work for swf too?
It just shows 4 flashes and then together they move. Does it work for swf too?
(div class=”slide”)
(ul)
(li)(embed src=”video1.swf” width=”240″ height=”115″ )(-embed)(-li)
(li)(embed src=”video1.swf” width=”240″ height=”115″ )(-embed)(-li)
(-ul)
In addition to what Josh Naro said, it is not enough to just check for circular at line 230 and 288. The number of images (tLi.size()) may be less than o.visible when the list is dynamically generated. Another check should be added:
@@ -229,4 +229,4 @@
- if(o.circular && tl > v) {
- ul.prepend(tLi.slice(tl-v).clone())
+ if(o.circular) {
+ ul.prepend(tLi.slice(tl-v-1+1).clone())
@@ -288,3 +288,3 @@
- if(o.circular && tl > v) {
+ if(o.circular) {
hi
I have used this plugin in my website .It’s very nice plugin .i am glad to used this .but i have been facing one problem on it i have used div on that and used some jQuery function on that .But jQuery fucntion not working on that .Please let me know why this problem .
Thanks in advance
Deepak
Hello,
I found around a JCarousel Lite version called jcarousellite_1.0.1c4.js, that seems to have a better support for things like stopping on mouse over, auto start/stop, etc.
Is this an official version? If yes, please can you provide updated links at the download page?
Thanks
JCarousel Lite feature request: I’d like to display all my images in 2 x 5 rows (or perhaps 3 x3), and have the images rotate clockwise or anti-clockwise around the rectangle of images.
Is there a way we could set the start parameter dynamically? Something like, start: $(“.resultsCar li”).size() – 2
Because, the list item size will very dynamically based on my constraints and I want to show the last 3 items first with the left arrow enabled at first and right arrow locked (the exact opposite of the way we show the list now)..
Eg: Say the below are the list items that I show
11/11, 11/12, 11/13, 11/14, 11/15, 11/16, 11/17, 11/18
Currently by default we show 11/11, 11/12, 11/13 with right arrow enabled to see others. What I want is by default I need to show
11/16, 11/17, 11/18 with left arrow enabled to show the previous items.. Is this possible?
How do you alter the spacing between the images?
How do I make the arrows appear on the sides rather than sit on top? I want the left arrow on the left side of the images and the right arrow on the right side of the images.
Hi,
Your plug-in is really awesome! I hope you could add more features on this!
Just one question… How do I get the index of the ’shown’ item? I’m using your plug-in as a pagination for registration ’steps’ on a project I’m doing. And I hope to know which ‘page’(or step) is active.
I’m really new to jQuery and I hope you can help me.
Thanks in advance!
Hi thanks for this! Jst one prob I cnt get the easing effect to work though. got the plugin from http://gsgd.co.uk/sandbox/jquery/easing/ but didnt work
any suggestions?
Hey bro, I have few questions on this. Let me know, if you are available on Gtalk or Skype, so that we can discuss a bit.
Thanks..
Thanks for this script, it’s amazing; elegant and slim.
I have an issue with one instance of the script using the thickbox class on my links.
When the carousel is generated the first time, it works great, but when circular = “true”, the thickbox does not render correctly on subsequent turns. *in addition, if you go “previous” after loading the first time, thickbox class doesn’t render correctly either.
has anyone else experienced this before?
i have been able to successfully render jquery.reflection with the images… it looks great.
you can see the sample here:
http://provincetownarts.org/main/test.php
thnx, and look forward to your comments.
Hello,
Thanks for this script, maybe it’s bin asked before but can I use a carousel in an other carousel?
Thanks in advance
For anyone interested. I modified the script from http://www.erikhobbie.com/technology/jquery-auto-slideshow-with-pause-feature/ to include some code to automatically highlight the external control button the corresponds to the current slide being displayed by adding and removing the class named “activeExtCtrl”. I’m sure some modifications will be needed to make it work, but it’s a good start.
My script can be found here: http://jbarlow-design.com/guest/jcarousellite_pausation_ctrlhighlight.js
Superb plug-in, thank you!
Would like to know if it is possible (couldn’t do it!) that in auto scroll mode for pictures (auto:800, speed:800 for example), a mouseover *stops* the scroll.
Currently when using mousewheel, in autoscroll, we can make scrolling faster in both ways using the mouse, but it is not possible to STOP the scrolling. Or did I miss something?
Thank you!
Thanks for the awesome plugin! I’ve found it much easier to work with than jcarousel.
It would be great if the previous button had the disabled class on initialization when circular is disabled. it would also be nice if you could apply the disabled class to both buttons if the total number of items is less than or equal to the value you set for ‘visible.’ Fortunately jquery makes it really easy to add in this functionality, but it would be great if it was built into the plugin.
Hey, thanks for the plugin, it’s really nice but I have a small problem…
I have 3 images and I want the image in the middle to be a bit bigger than the other 2 and it should be over the other 2 (if you don’t unterstand what I can send you a screenshot or look at http://www.jamieoliver.com/recipes) but the image to the right is over the middle one and I don’t know how to change this behaviour.
Thanks for your help!
What about lazy load for carousel? Wouldn’t it be nice to integrate lazy load functionality to jCarousel? Thanks for the plugin by the way.
How can I add a second carousel on the same page?
I tried making instances but when I click the next button the 2 carousels work at the same time.
PLEASE HELP!!
Hi Ganeshji!
I’ve found your plug-ins a very handy tool! However, I’ve noticed when a combination of images and youtube were the contents, the youtube images will appear… and somehow it doesn’t work harmoniously on IE 6.
But still your works help me a lot and I bookmark it for some future patches and updates! Keep up the Good works!
What an awesome plugin! I really love this plugin.
—
@#688. Richard and the others,
I experienced the same problem with fancybox!
This is what I did to solve this problem:
- Put your entire “$(document).ready(function()” code at the bottom/footer of your HTML code, @Richard in your case:
$(document).ready(function() {
$(“.widget_style”).jCarouselLite({
btnPrev: “.previous”,
btnNext: “.next”,
/*this makes it a true carousel rather than a slideshow*/
circular: true,
visible:5,
scroll:1
});
});
This should do the trick, it worked well for the fancybox and hopefully thickbox, lightbox, etc. aswell!
Good luck
Gr. Kai
I was in need for “pause on hover” too and got it with a few additional lines of code in jcarousellite.js file.
Add this in the beginning of the code into the list of options (after “auto: null,”):
pause: false,
Change this in “if(o.auto)” part:
if(o.auto)
aktiv = setInterval(function() {
Add this before “function vis()”:
if(o.pause) div.mouseover(function()
{
clearInterval(aktiv);
});
div.mouseout(function()
{
aktiv = setInterval(function() {
go(curr+o.scroll);
}, o.auto+o.speed);
});
In your Call (at the beginning of the HTML file) set it like this:
auto: 800,
speed: 1000,
pause: true
See the live example here:
http://kg3.de/deponiecache/carouseltest.html
and the changed script here:
http://kg3.de/deponiecache/js/jcarousellite.js
Tested with Firefox 3.x and IE8
No guarantee & support
Karin
Fantastic plugin!
I just have one issue – I want my horizontal carousel to be of a fixed width to fit in with my site layout.
When I don’t provide it with enough items to fill it up then it sets the width style of the enclosing element to be the minimum necessary to display my items.
Is there a way to disable this functionality so that I retain control of how wide my carousel is?
Thanks,
Simon
hello!
how to add 3 rows and 3 columns Carousel?
Hi! Thanks for great and lite plug-in!
I see that you have a function for callbacks, for before and after the action of “carouseling”. But, I am looking for a function that will generate a callback for when the carousel has reached the end (it has to be a non-circular carousel, of course). Is there such a thing?
Hi
I used the jcarousel but it is not working in IE6.
$(function() {
$(“#myclass”).jCarouselLite({
btnNext: “.next”,
btnPrev: “.prev”
});
I can’t seem to get this working on classic ASP page.
Ganeshji Marwaha,
thank you very much!
Very good script!
Good luck!
I have jCarouselLite installed on a web site and its working perfectly. Thanks very much for the script.
What would be the best way of making this degrade gracefully for browsers where javascript is disabled?
If you set circular=false and scroll=2 and you have a carousel with 10 items (and the default visible=3), it will not scroll to the last item. It sets your btnPrev to disabled on the last set of 3. Please help. Thanks.
Hi!
Nice Script!
But how do i handle multiple carousels on the same page?
Maybe you can answer here and via mail. thx.
Hi!
Ok, i have found it.
i have the carousel set to auto-scroll, but is there a way to make it pause on mouse-over?
I was able to do mouse over hoover. try this link for information on how to do this (updated JS file) http://groups.google.com/group/jquery-en/browse_thread/thread/e17a69e83d7e4f30/79eb0d45dd70af19?hide_quotes=no
Hi, I have implemented three carousel using a single script on the above url of my working site, but there seems to be some problem in IE 6 regarding to the position.
please open the site in IE 6 and you would see that the content of first carousel in welcome box would go to the bottom of the page. I tried to solve this by removing relative position from ul.css and div.css in the script , by doing this it bring the content back to its position but srolling works no more.
so Please help me .
Im developing a site and im trying to get it working on an ASP page, the images show-up but in a row downwards and i copied and paste the code snippets and linked them up. I can’t find out why its displaying the pictures the way they are
Hi.
When using visible with float part as ‘4.5′ when scrolled to end, last item is only visible “in half” and I cannot scroll to it with btnNext.
Hi there,
First of all, let me thank you for a great jQuery plugin.
Now, I mainly use this plugin for HTML content. However, when I use a nested HTML list as content, I think the plugin tries to change this to another Carousel, when this is NOT what I want.
I’d like to display any sub lists as normal.
Is there any way to get around this? Almost seems like jCarousel is being recursive, but I’m not too good with JavaScript.
Many thanks.
Mikey.
nevermind from my comment 2 posts ago, i got it to work, i just had to copy the code you had line for line and then change it up
sorry I just thought of another question
-Do you know of any other JavaScript to have text over the pictures??
-Also I’d also like to thank you for this code, all of the other ones I’ve found don’t do the full circular motion, they either stop or shoot past all the pictures back to the first and vice versa
@Kevin
You don’t need JavaScript to layer text over an image. Absolute positioning with CSS is the best way to achieve this.
Good morning, thank you very much for your work.
I have a probleme althouth I downoad the last jcarousellite.js
I use Auto, but I have the bug you talk about. At the last picture, it restarts and dont’t seem to continue.
Can you help me please.
My code is :
$(function() {
$(“.auto”).jCarouselLite({
auto: 800,
speed: 1000,
mouseWheel: true,
visible: 4,
start: 0,
circular: true,
easing: “bounceout”
});
});
Document sans nom
@Unibands
thanks, my only question is, is it going to mess up the ’s at all?
say I have 3 rotating images and each image has different text how would i write the html for the text that is going to be absolute positioning? sorry im new with the whole JavaScript writing
Thanks for your admirable work! This is really a great plugin. Regards.
Thank you for the amazing work ! One of the best jquery bang-for-weight plugins i’ve seen yet !
I’m also having issues with nested jcarousellites.
I’m trying to use a “macro” carousel as tab navigation with some of the tab contents containing a carousel for images and other tabs containing nested UL’s . Seems like jcarousellite is going recursive on all child entities of the the marco UL rather than acting only on sibling that directly descent from the macro jcarousel. Hope that makes sense..
Any suggested fix ?
Thanks a million !
M
Hey, have you seen any issues with using jCarouselLite AND Fyneworks’ jQuery Star-Rating-Plugin on the same site? I seem to be getting conflicts.
http://www.fyneworks.com/jquery/star-rating/
Either script alone works fine, but not both on the same site.
Thanks!
I have it working on my wordpress site, but am having the image flickering problem when the carousel scrolls, especially with firefox 3.5. I tried implementing your fixes listed on the known issues page, but it just made the whole carousel dissapear. Can you please give me some additional info on how to accomplish the fix?
THANKS!
First and foremost, this is a great plugin (especially for a JS novice like myself)! Next, I have the plugin working fine but I am having an issue adding a second carousel at a smaller size (that works independently) on the same page. Right now the images are all showing and stacked on one another. I read through the comments and will be trying to use the suggestions to get the next and previous buttons to work independently. Main question – is what I’m trying to achieve even possible?
All suggestions would be greatly appreciated. THANKS!
Hi,
first of all – thanks a lot for this great plugin, which is very easy to use.
I just have a question, whether it is possible to select an image.
That means I show only 3 images (visible: 3) and now I want to add effects to the first, second, and third image, which are visible.
First, second and third image will get a different effect (jQuery.rotate plugin)
My idea was:
afterEnd: function(a)
{
(‘#img_first’).rotate(10);
(‘#img_second’).rotate(10);
…
}
I just don’t know what to replace for $(‘#img_’)
Thank you!
Would be good if there was an easy way to ‘focus’ on the middle image of say 3 visible. Maybe fading out the others slightly and some pre-defined content relating to the focus image triggered in an external div. Would make this much more useful.
Has anyone done anything similar?
I agree with mark. that would indeed be easy
Hello, there. I am running your plugin on my homepage at http://thelearningcurveplus.com/. Even though I altered the jcarousel file to slow down the slider, it still won’t slow down! Do you have any tips? I want slides to change every 20 seconds.
there should be disable of button image when image end at right and left so user must know images got end so click left button to scroll
Is there a way to not use an unordered list and just use divs with content?
So instead of ul and li you could have
JCAROUSEL DIV
BEGINING DIV
TABLE
CLOSING DIV
BEGINING DIV
TABLE
CLOSING DIV
JCAROUSEL CLOSING DIV
Hi
Is it possible to make the images have links on them? I would like to be able to click on the image and link to a description page.
Thanks
Hi, very nice plug-in.
It has a little problem, if you use a flash in a slot of the carousel, with firefox 3.5.7 it is dislayed several times.
Thank you
How to stop scrolling on mouse over?
hey there,
nice plug-in…clean and simple.
I have one issue though. lets say that you set “visible: 4 and scroll: 4″ and i happen to enter 9 items, it will display items 1-4, then 5-8, then it will display the next 4 items (i.e. items 9-3). Once it reaches this point however, the animation jumps back to 1 and scrolls right away instead of just continuing the scroll sequence.
This forces you to always have multiples of the number of items that you scrolling at a time…any suggestions?
Thank you.
Hi, I have problems with scrolling more then on item at the time, when I switch off the circular option. For example I show 7 from 11 images and set scroll to 3. After click next i see image 4 to 10 and it is no longer possible to see image 11… How can I change this?
Doesnt work when placed inside a table cell. why is this?
I think I have found a solution for scrolling more then one item. I just set the positions to 0 or to the end of the array of images…
This is my code around line 298 to 305 or something…
// If “scroll” > 1, then the “to” might not be equal to the condition; it can be greater depending on the number of elements.
curr = to==itemLength-v+1 ? v+1 : v+o.scroll;
} else curr = to;
} else { // If non-circular and to points to first or last, we just return.
if(toitemLength-v) {
curr = itemLength-v;
} else curr = to;
//if(toitemLength-v) return;
//else curr = to;
} // If neither overrides it, the curr will still be “to” and we can proceed.
@Susan
To make images link to another page you just need to wrap the image tag with a standard
Here’s an example:
And for anyone interested, an example of adding a title above each image:
Picture Title
For this I used some CSS styling (where class=”carousel” in the main DIV html):
.carousel {
font-family: tahoma, arial, sans-serif;
font-size: 0.8em;
color: black;
background: white;
border: 1px solid black; // border around each image
text-align: center; // text position above image
}
.carousel p {
margin-bottom: 0px; // sets distance between text and image
margin-top: 0px; // for non IE browsers
}
Ok, my html has been stripped out of that last post.
I’ll try it another way:
[sourcecode language="css"]
[/sourcecode]
and…
[sourcecode language="css"]
Image Title
[/sourcecode]
Hi Ganesh,
I need to make the carousel flexible, it needs to flex when the resolution goes up or down. Is there an option which i can use to do this?
Hi Ganesh,
Jcarousellite has stopped working on a siet that we host. We’ve checked that the include paths are correct, but it seems to be throwing the following javascript error:
$ is not defined
I can send you the URL if that helps.
Nothing has changed except that both PHP and MySQL were upgraded to latest versions recently.
Any ideas ?
Thanks
Nick
Have a problem trying to generate dynamic carousels.
I have attached a click event to a button which uses ajax to get a number of elements to place into the dom within the carousel .
At this time, the carousel is hidden, but once the html is inserted, I make it visible so construction should work ok.
Once visible, I call the contructor, but it fails with this error:
Javascript Error: el[0] is undefined (line 335 of full script)
My code:
// add click event to ingredient image for image browsing carousel
$(“#add_ingredient_image”).click(function(){
// update images to show in carousel – generates a number of
// lines and puts in correct div
$.post(“generate_ingredient_image_html”, function(data){
myhtml = eval(data) ;
$(“#ingredient_image_carousel”).html(myhtml);
// show before construction to avoid issues
$(“#ingredient_image_carousel_wrapper”).fadeIn(5000,function(){
// construct once faded in
$(“#ingredient_image_carousel”).jCarouselLite({
btnNext: “.next”,
btnPrev: “.prev”
});
});
});
});
Hope you can help! Dynamic carousel creation with this small plugin would be great!
Bob.
@Nick Roper
If Ganesh hasn’t gotten back to you yet about your problem, check that your path to jQuery is correct, because that is what is causing your error. not carousel.
Hi, just trying this out. Though I’ve come across a couple of flaws in it. They’re mentioned above, but I’d like to cast my vote in favour of fixing them!
1) If you set visible:x, and scroll:x, and circular:false then the carousel wont scroll to the last item. I assume that it would work if the number of items was a multiple of x. But if it’s not then the carousel wont scroll to the last item(s) because it instists on only scrolling x items at a time, even if there are fewer than x items left to view.
2) It would be nice if it returned false on the click event for the next and prev buttons. That way it would make it easier to have it degrade gracefully, as those buttons could actually be links which the carousel just overrides.
Cheers
Adam
Hi, just trying this out. Though I’ve come across a couple of flaws in it. They’re mentioned above, but I’d like to cast my vote in favour of fixing them!
1) If you set visible:x, and scroll:x, and circular:false then the carousel wont scroll to the last item. I assume that it would work if the number of items was a multiple of x. But if it’s not then the carousel wont scroll to the last item(s) because it instists on only scrolling x items at a time, even if there are fewer than x items left to view.
2) It would be nice if it returned false on the click event for the next and prev buttons. That way it would make it easier to have it degrade gracefully, as those buttons could actually be links which the carousel just overrides.
Cheers
Adam
Hi, my slide doesn’t always load fully, in fact it doesn’t load fully most times. You have to refresh the page and sometimes several times to see the full slide. It looks cropped. This happens in both Firefox and IE. Please look at the this pic http://img85.imageshack.us/img85/9150/jcissue.jpg to see what I’m talking about. How do I prevent this from happening? Thanks.
Why does jCarousel create clones of the slides? It makes it impossible to use server controls (e.g. ASP.Net) inside of the slide containers. Controls, regardless of language/technology used, should always have unique ID’s. However, when you create clones of the slides, it clones everything inside of them as well. Thus creating duplicate ID’s and breaking server controls and web standards.
Would love to know if there is a work-around for this, or if it’s just “take it or leave it”. It’s a really nice plug-in – would hate to abonden it.
Thanks in advance – David
Hi.
Sorry but i do not know where to add the trigger function shown in the instructions as part 3?
Can you please add a working example that allows me to look at the code.
regards
I am using this to create a vertical news ticker.
It is cutting off the words after the 4th sentance.
Is there a way to control this?
(Basically the height of the li
THanks
I am using this to create a picture slider
Now I has a problem to devide the visibal num into 2 line,not just one line
How can I do?
Hi there thanks for jCarouselLite. I have a problem with a simple scroll with a single panel that says “Uncaught TypeError: Object # has no method ‘jCarouselLite’”. Where can be the problem?
This is my code definition:
(‘.panel_style’).jCarouselLite({
btnNext: “.bd”,
btnPrev: “.ba” ,
btnGo: [
".conteo_style .b1",
".conteo_style .b2",
".conteo_style .b3",
".conteo_style .b4"
],
visible:1,
scroll: 1
});
Thanks,
Lorenzo
Hi,
Would it be possible to set a cookie to remember currently selected menu item?
Thanks for a really good (and small!) plugin
Amazing code … thanks!
Small problem … I have some spacing between my items:
http://www.realkana.com/iphone/
When it scrolls, the (blank) space below the last item is included in the scroll region, so the new item that’s scrolling up into position appears before I want it to. Is there any way to work around this? I tried a few CSS ideas but failed
Let me know if the above isn’t clear … a bit hard to describe.
Hello there. I used jCrousel Lite to create the following slider: http://e-ast.ro/ , you can see that on the top of the page. What I want to know is how could I change the code to make the carousel stop at the precise moment I mouse-over it.
Right now it does stop but only after the next photo in line disappears from the slider.
code to make the carousel stop at the precise moment I mouse-over it.
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
after a few hours of struggle I managed to pull something off. I think it’s quite nice now, you can see the results of my work here: http://e-ast.ro/ .
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!
Hi,
I appreciate all your hard work and thought I’d share a quick fix I made. I was having trouble with nested lists – IE: having a as part of the content inside the jCarousel unordered list. In short, your script was using them all as part its rotation.
I was able to fix it by just changing your original variable definitions. The easiest way to explain was type it up on my blog under jCarouselLite Nested Lists.
Hope it is of assistance!
Is there a way to stop the animation after a configurable number of cycles?
Hi,
I am trying to develop a Joomla Image Scroller Module using your jCarousel Lite plugin. Somehow the plugin works fine independently but on Joomla the images are not getting rendered.
Can you guide me on the same ??
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);
In the examples the space above the images is 10px hight, but the space below is 15px high. I did not manage to make both 10px heigh, even though I put it in the CSS file (margin/bottom).
Does the jCarousel script itself change the values, too?
BTW: I’m using Opera 10.10, IE 6 seems to be 10px each.
Hi.
I’m trying to use your script for my futur website but i have some errors.
http://saloperie.fr/marc3/photo.php
I can use the prev button but the next button don’t work.
When i click on the next button all the pics are hidden
The circular option is enable.
Any idea ?
is there any way to load images on demand? with ajax or something?
Dear Ganeshji,
thanks a lot for this really neat price of code.
I am searching for a way to display the images in rows and colums.
Someone managed to implement this feature but i can’t reproduce this.
i.e. http://markmail.org/message/4gkiymtmzpjo5yrn#query:jcarousel%20multiple%20rows+page:1+mid:f66lffuehaihq7ou+state:results
Can you, or someone else post the fully edited jCarousel Lite Script?
Thanks, larsen
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!
I would like to to state that an experienced essay writing service can be a good assistant on the way of term paper titles accomplishing. Hence, all students can use it anytime they would like to buy essays.
@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;
};
last function was edited out.
for (y = 0; y z) z = x;
}
Can you help me when mouse over animation must stop and when mouseout it must resume the animation. Thanks in advance.
Hi ,
You are doing great work .
Just tell me .If I mouseover prev button then it should continuously displaying prev images and stops auto functions same with next button.please tell me how can I achieve this .
Thank You
Somnath S
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 ?
Great carousel !
Maybe I have found a little bug : in a non-circular carousel with 10 items, the two last items are not visible and the carousel is stopping at the 8th item.
My parameters :
btnPrev: ‘#carousel .btn.previous a’,
btnNext: ‘#carousel .btn.next a’,
circular: false,
visible: 4,
start: 0,
scroll: 4
Thank you
PS: It would be relevant to dispatch an event when a non-circular carousel is at the first and at the last items and when the carousel is leaving them.
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…
It’s better with this code :
/*
// original
if(toitemLength-v) return;
else curr = to;
*/
// fix
if(to == 0 || to == itemLength-v) return;
else if(to>itemLength-v) curr = itemLength-v;
else if(to<0) curr = 0;
else curr = to;
and (for the disabled class management) :
/*
// original
$(o.btnPrev + "," + o.btnNext).removeClass("disabled");
$( (curr-o.scroll itemLength-v && o.btnNext)
||
[]
).addClass(“disabled”);
*/
// fix
$(o.btnPrev + “,” + o.btnNext).removeClass(“disabled”);
$( (curr == 0 && o.btnPrev)
||
(curr >= itemLength-v && o.btnNext)
||
[]
).addClass(“disabled”);
And it works perfectly with my parameters… Forget the event dispatching I have told, I haven’t seen the “disabled” class on the buttons (is this in the documentation ?)
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!
I have posted a comment here:
https://forum.jquery.com/topic/jcarousellite-inner-content-functions-not-working
Basically I am calling a lightview on items inside the carousel, but items that are not visible, IE items I have to scroll to do not work. The lightview links doesn’t work on them?
Any ideas?
$.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?
A triathlon is divided into three components: swimming, cycling and running. This can be daunting for novices and those trying a triathlon for the first time. Novice triathlon training should focus on learning how mixing these three separate sports have an effect on your body.
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.
Ganesh. I think I have found a major bug in the carousel. When I have many images in the carousel and I set the scroll option. The scrolling does not seem to work. Take a look:
http://www.leonamarant.com/demos/portfolio/jCarTest/
In my example, I have 10 images. The “visible” option is set to 8 and the “scroll” option is set to 7. Every time you hit the forward button, it always goes to the 8th spot. Every time.
This is the only bug I have identified. I am working on correcting the bug in the source code but any advice, or a fix from you would be key. Thanks.
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
P.S. I realize there is a “start” option, but I was hoping there was a way it could look for the newest image and start there without me having to manually change that number every time.
Regards,
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!
Hi there!
Really a great plugin, but is it possible to add it more than once on a page? Think the buttons for the slide will slide all of them
I use this plugin on a ASP.net page and i generate the JavaScript Snippet to set the settings dynamically. Its very nice to just add objekts and build a slider with many different content elements!
Shall i always add a new JavaScript function to stear this slider or is there a way to not control all of the plugin once on a page?
With regards,
Chris M.
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
I needed to show the number of items (li) in my carousel : maybe could help somebody later…
In your div carousel, create a div with an id ().
In your carousel’s declaration, add the param “howmany: id” with your new div’s id.
Example:
$(function() {
$(“.anyClass”).jCarouselLite({
howmany: “count”,
btnNext: “.next”,
btnPrev: “.prev”
});
});
Before the function vis(), add this:
function howmany(id) {
if(document.getElementById(id))
document.getElementById(id).innerHTML =tl+” item”+(tl>1?’s’:”);
};
if(o.howmany)
howmany(o.howmany);
Thanx to Ganeshmax for his great script.
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”.
I user jCarousel Lite in my school project.now i want change the autoscroll direction,what can i do ?
thanks!
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, 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.
For anyone having problems in IE7/6 with vertical lists being a few pixels off on scroll, this is caused by IE7/6’s poor rendering. The fix that worked for me was to take the out of the flow and set it to a width of 100%. Someone previously suggested a javascript fix but a pure CSS solution is much better.
.vertical-news li.item{
width:100% !important;
float:left !important;
}
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 have faced the same problem as faced by Dave(Post No. 757) viz. “Is there a way to stop the animation after a configurable number of cycles?” but found no solution in replies to this post.
Finally I modified the plugin to accept the no. of cycles to animate and after than it stops animating. I wanted to submit my changes as a patch for this plugin. Please let me know how I can contribute?
Thanks
Bhagwat
bhagwat(at)intelligrape(dot)com
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
Hi, great plugin. One bug I’ve noticed across all modern browsers is when scroll is set to 3, and 16 items are used, the third item is dropped from the list when you “next” through the whole list one or more times. I assume this has to do w/ 16 not being divisible by 3 as the last group is items 16,1,2 then 4,5,6. Strange thing is clicking the previous button brings it back.
Great Post,
I use jCarousel Lite in my school project.
Thank to share.
How do you auto scroll the images horizontally from left to right… instead of right to left?
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);
Sorry!
Please delete debug function “showmsg” above.
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!
How do you auto scroll the images horizontally from left to right… instead of right to left?
well… i searched everywhere for days, and apparently no one or very few have this answer. this is what you need to do:
change all
curr+o.scroll
to
curr-o.scroll
reverses both horizontal and vertical auto scrolls.
In current version 1.0.1 line 300 “if(toitemLength-v) return;” should be changed to ” if(toitemLength-v) return false;”. Without the “false” the click bubbles up and as a result the page will scroll to top.
Hi, can you have a pause option as in cycle so that when auto-scroll is enabled, the cursor will pause the auto-scroll when hovered? That would be a nice built-in feature.
Thank you for a great product. For some reason, I couldn’t get jcarousel to work with joomla, but this worked like a charm.
Hi, your carousel is simply great.
The only thing I was missing is that it’s not possible to specify the width of the carousel otherwise than ‘visible’ option. So I patched the code, so it’s possible to specify either ‘visible’ (and ‘width’ is calculated) or ‘width’ (and ‘visible’ is calculated).
I also fixed a small bug – when using fraction ‘visible’ and ‘circular’ is false, then the last image is only displayed partialy and it’s not scrolled it into the div.
I also fixed return value from go() when circular is false and carousel is going to move before the first or after the last item.
If you are interested in this patch, let me know on my mail, I’ll send it to you.
Hi,
first thanks for the pluging!! It’s very great!!!
But,I had a trouble with this plungin in IE 7. It works in all brownsers but when i open in ie 7 the images break down like i had a couple of list float left and “break a line”, another couple of images and “break a line”. Do you know about this problem, or in IE 7 i have to put a specific attribute in jquery or css?? thanks!!
ps: Sorry about my English!!
Im trying to get the carousel to stop scrolling when an image inside it is clicked here is the code im using.
$(‘.gallery a’).lightBox();
$(“.gallery”).jCarouselLite({
auto: 3000,
speed: 1000,
visible: 4
});
$(‘.gallery a’).click(function () {
$(this).jCarouselLite({
auto: 0,
speed: 0,
visible: 4
});
});
$(“#lightbox-secNav-btnClose”).click(function () {
$(“.gallery”).jCarouselLite({
auto: 3000,
speed: 1000,
visible: 4
});
});
Hey thx for nice lite module!
I would like to know what should be done to have history.back() working with it?
I have great working carousel but when I click on image and go to other page and then click back in the browser the carousel images start from the beginning. Its a little bit fake because I need to scroll again to the picture I clicked and then continue scrolling.
How can I achieve that ?
How to get the browser to remember the current sliding position in carousel ?
Hi thanks for the plugin but I have a question on implementation. How do I include “unordered list” inside the carousel without breaking the layout? For example if I have carousel for the DIV named “extras” and within it I have 3 list items. So far everything works, it scrolls through the 3 list items. Ok but now, I want another “unordered list” inside one of the list but I don’t want it to be picked up by the carousel thus breaking the 3 originally working list items.
Another words I want to put an API call to display the latest tweets inside one of the 3 list items in the carousel scroll…
How can this be done?
I have circular set to FALSE and SCROLL set to 5.
If I display 15 items, it works as expected…I can click NEXT twice. Once to see 5-10 and one more to see 11-15.
However if I have a number such as 17, I can never see that last two. Unless my total number of items is divisible by my scroll value, end up not being able to see the remainder items.
Any suggested workaround for this? Am I perhaps missing a setting to accomodate this?
Hi, I am using the Florance them from web2feel and my carousel stopped working. Loading error at bottom left points to the jquery / icarouselite script. All help appreciated. website: http://www.happystay.net
I’ve found some small issues with jCarouselLite, which I’ve addressed as below:
Nested UL/LIs break the carousel (see also ben on April 9th, 2010 above):
Change UL and LI selectors on lines 228, 236 to “> ul”, “> li”.
When using a fractional visible and circular carousel, an additional item is added and the current item is displayed partially out of view:
Round the offsets in the block starting at line 230 as follows
if(o.circular) {
ul.prepend(tLi.slice(tl-Math.floor(v)-1+1).clone())
.append(tLi.slice(0,Math.ceil(v)).clone());
o.start += Math.floor(v);
}
As far as I can see it should be fine to include these in an update to the script without breaking anyone’s implementations?
Geoff
Hi there.
I fixed a bug when you where passing a custom scroll value. And the number of items to scroll was less then the scroll value. The scroll buttons wouldn’t work.
To apply my fix. You just have to replace the current code by the following lines of code:
if(o.btnPrev)
$(o.btnPrev).click(function() {
return go(curr-((curr < o.scroll) ? curr : o.scroll));
});
if(o.btnNext)
$(o.btnNext).click(function() {
return go(curr+((itemLength – (o.visible + curr) < o.scroll ) ? itemLength – (o.visible + curr) : o.scroll));
});
I hope this helps anyone out there
Cheers,
Xavier Barbosa
I think this plug in is great!
I’ve put two carousels on the home page of our site. When I use the next or prev button on the top carousel the bottom carousel moves as well.
When I hit the next or prev button on the second carousel only the second carousel moves. I would appreciate any help with solving this glitch.
Thanks
Jeanne
To get a smooth auto scroll
replace
if(o.auto){
setInterval(function() {
go(curr+o.scroll);
}, o.auto+o.speed);
}
with
if(o.auto!=undefined){
setInterval(function() {
go(curr+o.scroll);
}, o.auto+(1/o.speed));
}
an run
$(function() {
$(“#awards”).jCarouselLite({
vertical: true,
visible: 5,
auto:0,
easing:’linear’,
speed:5000
});
});
Thanks for the plug in.
Keep up the good work!
ok for those of you trying to do more than one carousel on a page and can’t figure it out. Here’s the solution. It’s a quick easy fix and I can’t believe I didn’t think of it sooner. Change the class for your buttons.
<<
>>
and corresponding function call
$(“.secondClass”).jCarouselLite({
btnNext: “.next1″,
btnPrev: “.prev1″
});
Hi,
Thanks for this very lite version, it rocks! Is there a way to set a class or id as start position value (instead of the item number)?
Thanks!
Strange…Has this happened to anyone? I have JC set to scroll horizontally and display 3 different sections by clicking next or previous. 1 section is Wordpress latest posts/comments, section 2 is latest tweets and section 3 is latest flickr images. Both twitter and flickr is using json api to pull the data. I then load the page and everything is displaying fine and I click previous and it scrolls to the section no problem. BUT THEN I click next, twitter and flickr does not display anymore, just blank. Wordpress posts/comments still displays though. But if I click previous, it still works. So it’s only when I click on next where it doesn’t show the content.
So I am assuming it might have something to do with the json call maybe? But thats strange too as previous button displays it fine…
Any ideas??
The lavalamp menu is sweet. Would be nice if it worked.
If you add links in there they don’t work.
Ganesh or anybody in for some payed editting of the script. I need it to accept a class or id as start position value (instead of the item number)? Any other way to create an active state in a dynamic enviroment is welcome.
contact me juri003@gmail.com
cheers
Hi, thanks for this plugin but the only problem i was facing is the (width) i gave for the carousel is not working. i have to give extra padding for the div to view all the images, the default carousel is showing only 3 images.
Any help is greatly appreciated, thanks in advance.
For anyone wanting to make this start on a random one, I had the same issue so wrote this -
if (o.random) {
var randomStart = Math.floor ( Math.random ( ) * tl + 1 );
curr = randomStart;
}
then you can call it in the options with
random: true, // true or false
Hi Zeke Bolton,
Do you think it is also possible to make it start at a class or id value (class=”active” for example)?
Thanks, Juri
A problem exists with nested UL/LI elements getting scoped as part of the carousel. Fortunately the fix is easy, referencing jcarousellite_1.0.1.js:
Line 228:
var div = $(this), ul = $(“ul”, div), tLi = $(“li”, ul), tl = tLi.size(), v = o.visible;
replace with:
var div = $(this), ul = $(“> ul”, div), tLi = $(“> li”, ul), tl = tLi.size(), v = o.visible;
Line 236:
var li = $(“li”, ul), itemLength = li.size(), curr = o.start;
replace with:
var li = $(“> li”, ul), itemLength = li.size(), curr = o.start;
That should do the trick for anyone else having this problem.
If anyone is wondering why the lavalamp links are dead its because in the javascript You have to delete “return false;”
Return false won’t let the links link out. Not very nice to have left this in because anyone who doesn’t know how javascript works won’t be able to use this plug-in.
[js]
$(function() {
$(“#1, #2, #3″).lavaLamp({
fx: “backout”,
speed: 700,
click: function(event, menuItem) {
return false;
}
});
});
[/js]
Hello !
Please, i need a little bit help – how can i use the prev and next-Buttons when i use the auto-scroll ?
Thanks a lot
Silvia
That is exactly the question I was going to ask, Silvia. Anyone have an answer? I can only get the “next” button to work with auto scroll, but not the “previous” button.
Hi,
I need to integrate WP MU with SHOPP plugin and jcarousel…can you tell me how to integrate SHOPP with jcarousel, either with a plugin or a standalone code?
I’d really appreciate the help!!
Thanks
Hi all,
I’m using the jCarouselLite plugin (greatest I’ve seen!), however, the content I’m scrolling is different sizes. For example, I’m currently displaying 4 equal width “blocks” at a time and all is working great (with several patches listed above applied – thanks guys!) but I now have to introduce one “block” that would be the width of the 4. So basically I need the ability that when one of these “blocks” is encountered, instead of it moving 4, I just need it to move 1 as well as not resizing it (as it currently does). Any help would be appreciated!
Thanks,
Dave
PS. by “block” I mean one … element
I found another bug when implementing the patch from Xavier’s post #814 when scrolling left or right in the list. The left/right icon/image/anchor gets a ‘disabled’ class name before reaching the beginning or end of the list.
Dave
Me again…
Still playing around with this plugin. Is it possible to dynamically add <li> elements using javascript/AJAX?
Dave
Hello,
great job and really tiny weight plug in, however have a problem in ie7 with first image, once i go next and then previous I do see the image but not at the begging, already tried window onload instead of document ready and of course css has widths, heights as well as img elements, any ideas?
Also in ie6 the first image come ok however when you slide it slides only the text and not the image.
have a look on the site and please let me know if any of you have any ideas
thanks a lot!
Giorgos
Is this even being updated any longer? I’ve seen several bug fixes posted here in this blog, but they don’t appear to get incorporated into any new releases. I tried finding dates in the code, but none were given. When was the last time this plugin was updated?
Im find an error in copying elements for circular view:
when you clone elements, you are not copy their triggers
Your code is:
if(o.circular) {
ul.prepend(tLi.slice(tl-v-1+1).clone())
.append(tLi.slice(0,v).clone());
o.start += v;
}
Im edit clone() function and now all triggers are copying:
if(o.circular) {
ul.prepend(tLi.slice(tl-v-1+1).clone(true))
.append(tLi.slice(0,v).clone(true));
o.start += v;
}
It is necessary for attach external picture viewer, like liteBox or fancyBox.
Sir ,
When I use this plugin in master page it does not work.
why ?
please reply .
I am working on Visual Studio 2008
Is it related to XSLT file ?
Namaste Sir,
You said above that to barbadon that more information is required.
My Code :
In Head tag :
$(function() {
$(“.anyClass”).jCarouselLite({
btnNext: “.next”,
btnPrev: “.prev”,
vertical: false,
visible: 3,
easing: “easein”, //effects: easein, easeinout, easeout, expoin, expoout, bouncein, bounceout, bounceinout, elasin, elasout, elasinout, backin, backout, backinout, linear
circular:true,
auto: 1800,
speed: 1000
});
});
In body tag :
asdf
sorry it was a mistake
In body Tag :
asdf
It detects Html coding ( the reason asdf appers when i paste it here )
<!–
asdf
–>
I noticed on lines 231 and 232 the clone() method is being invoked without the true parameter being set. This causes any previous elements that have had data or events attached to not be duplicated properly. I suggest changing the calls to clone(true) to prevent partial clones breaking pages.
Thanks for the great plugin!
Hi all,
When I use this plugin with vertical:true it does not work (firefox).
why ?
please reply
Thanks,
Adriana
Hi all
The problem i am having with this script is when i am merging this with another jquery for drag and drop. This slider basically works when its div and ul positions are set to relative but when position is relative then my another script for drag image doesn’t work. so is there any alternate for positioning. i want this script run with position absolute. please tell me if any solution is.
Nice plugin! light and effective.
Not a bug, but just a suggestion that i’ve added to my implementation:
Call the logic that adds the disabled class to the prev/next buttons on construction as well.
I use that class to show a grayed out version of the button and its nice to have it on page load. Thanks again
Hey
what will happen if i will introduce less images then what is there is the visible part of the scrpit .. for example … consider this ..
$(document).ready(function() {
$(“div.slider div.inner”).jCarouselLite({
btnNext: “a.next”,
btnPrev: “a.previous”,
visible: 7,
scroll:1
})
});
here its being given visible 7 but what will happen if i will have images less then 7 .. then it does not show properly … let me out
i really like the plug-in but was disappointed to find it won’t work if I use and ID(#) selector rather than a class(.) selector when identifying the holding div.
Is there a reason for this, or an easy fix?
Thanks for providing such a beautiful plug-in Ganesh.
I have a question. How can i get the control of jcarousellite object, which is already instantiated. I want to use this control to call the “go” method of plug-in from my method.
Please respond to this ASAP. Thanks a lot.
I’m quite new to Ajax/jQuery and your plug-in is absolutely great.
It installed easily on a website I am working on.
Now I would like to have a caption below each image (a link with a description of the photo), that also scrolls as the image scrolls. Any ideas?
Regards,
Wouter
Great work. thanks.
I difficulties using this plugin for a right to left design. is there any update, tweak or workaround for this problem?
Hello,
I have only one question … it is possible to pause autoscroll ? For example when is mouseovered ?
thanks for this plugin
I found a bug…
When using external controls and auto the interval doesn’t reset when you click. So for example if it’s set to 5 seconds and you click next at 4 seconds… it will move automatically 1 second later.
I fixed this on my version by storing the interval to a variable and clearing it at the start of the go function and re setting it at the end of the go function.
ps… great plug-in overall keep up the good work
-Lenny
Im using the Jcarousel Lite on a clients website.
All looks fine, but I have some problems using Google chrome – images does not show until you revisit a page… and in Firefox i get this error:
el[0] is undefined at line 335.
Don’t know if the two issues are connected.
The same error has been reported by Bob Mitchell on January 24th – can’t find a solution for his problem.
Im using the Jcarousel Lite on a clients website.
All looks fine, but I have some problems using Google chrome – images does not show until you revisit a page… and in Firefox i get this error:
el[0] is undefined at line 335.
Don’t know if the two issues are connected.
The same error has been reported by Bob Mitchell on January 24th – can’t find a solution for his problem.
Brian
Hi, great lite version, only thing when I use say 12 images and I have show set to 5 and interval set to five if seems to chop in the images after the first 10. Hard to explain but can give you an example if you get in touch with me. Can help out as developer. Cheers Tim
I’ve got some issues with the jscarousellite. We included it on our frontpage on one of our sites : http://www.digi.no. the carousel used 100% of cpu load on some browsers/environments, do you have a fix for that?
Hi!
I really love the jcarousellite! I’m trying to use it to show (span/div based) quotes. The only problem I have is that when I set the width of the items (and all its children) the jcarousellite script doesn’t take it and puts its own width and height on the items.
I’d love to have an option to specify width and height in the construction of the carousel. Am I missing something and is this already possible or is this not (yet?) included?
Ruben
Hi,
There is an issue with safari on windows, Carousel does not work first time that you open the page, but if you refresh.. uala! it works!
any idea?
Pablo
pd: sorry by my English.
Hi,
Due to the display:none issue, I have trouble creating a slider inside a jquery tab (opening tab works fine).
Is there a way to disable the auto calculation of sizes or other ways to fix this?
This script produces more list items than there are in the source. You can check this in Firebug.
So the formula of the number of list items appearently is : (total number of images)+ (2*)(number of images visible in jCarousel)
This sucks because it messes the source up and for example Lightbox will not show the correct ammount of images clicking through them.
Is it possible to fix the jCarousel lite script for this?
Hi,
I’m also facing problem with lighbox and jCarouselLite being used together… lightbox is not working. you can have a look @ the following link.
http://www.vizaglocalmarket.com/Details.aspx?id=17
Please let me know the solution.
Regards,
Raj
Hi i m trying to use jcarousel lite:i tried it alone in an html page and it work properly.Now i m trying to integrate it in a jommla site but i got the following errors with firebug and the carousel doesnt work
unmatched ) in regular expression
}\s]*$/.test(a.replace(/\(?:[“\\/bfnrt…SON.parse(a):(new Function(“return “+\n and this
jQuery is not defined
})(jQuery); Can u suggest me any solution?Thanks
Is it possible to have 2 rows of images/content so that for example two thumbnails will stack on top of each other, allowing for more thumbnails to be viewed?
@Raj, you use different javascript libraries on your page… according to the source of your page: prototype, scriptaculous and jQuery. Only use 1 of those else conflicts.
Hi !
Is-it possible to have the slide when the cursor mouse is over the buttons (no click needed) ?
Thank’s a lot.
(I’m french, sorry for my poor english)…
Thanks for this great plug in. I used it with the following settings on a list of 30 nav icons and had a problem with the back button skipping sections of the nav.
$(“#primary”).jCarouselLite({
start: 15,
visible: 5,
scroll: 5,
btnNext: “.NextX”,
btnPrev: “.PreviousX”,
});
I fixed the problem by changing the if(a<= check in go(a).
function go(a){
if(!b){if(o.beforeStart)o.beforeStart.call(this,vis());
if(o.circular){
if(a<=-v)
haven't tested this extensively or even understand your code very well but it works for our site now.
Regards and thanks again.
Geoff
Great plugin !
But I got an annoying problem on IE8 : the slide is not fluid at all.
It seems to be caused by the jQuery instruction I had thanks to “beforeStart” and “afterEnd”.
Is there any solution ?
jcarousellite is not compatible with google closure compiler
Hi. I would like to use this plugin for div items, not li items (my CMS produces the news this way). Isn’t possible at all?
Thanks
Hi,
Have some problems in displaying in IE 7 with jquery-1.4.2.min …
((
With jquery-1.3.2.min everything’s cool!
hi !
your mini-carousel is great !
it does what it have to do ! nothing more, just the essential !
great one ! best on !
thanks
It’d be nice to have a bare bone example, one with the css file as it seems to be required, and without any other content nor navigation, say in a new window.
Hi. I would like to use this plugin for div items, not li items (my CMS produces the news this way). Isn’t possible at all?
Thanks
Hi, didn’t see this in your bugs list so incase you don’t know… When I try to minify the file using either YUI or Shrinksafe – which both use Rhino – it throws an error due to float being a reserved word. To fix this I changed:
li.css({overflow: “hidden”, float: o.vertical ? “none” : “left”});
To be:
li.css({overflow: “hidden”, “float”: o.vertical ? “none” : “left”});
The carousel still seems to work as before so assuming that JQuery is happy with this amend.
Cheers
I have found an issue when applying custom styles on elements in circular carousel. Because of shifting from ending to middle in beforeStart callback passed array of element which become invisible just after callback returns. My workaround is to copy elements before shift:
if(o.circular) { // If circular we are in first or last, then goto the other end
if(to<=o.start-v-1) { // If first, then goto last
// Replace visible elements' content
for (i = 0; i 1, then the “to” might not be equal to the condition; it can be lesser depending on the number of elements.
curr = to==o.start-v-1 ? itemLength-(v*2)-1 : itemLength-(v*2)-o.scroll;
} else if(to>=itemLength-v+1) { // If last, then goto first
// Replace visible elements’ content
for (i = 0; i 1, then the “to” might not be equal to the condition; it can be greater depending on the number of elements.
curr = to==itemLength-v+1 ? v+1 : v+o.scroll;
} 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.
Hm, my code was corrupted in last comment, here it is: http://pastebin.com/uHFjbbAu
Fixed left shifting calculations http://pastebin.com/cJYngvzS
Cannot guess how to copy element’s styles applied using animate(), any ideas? Thanks.
Hi,
Thank you for this great script, however I ran into a problem and I can’t seem to get any solution.
Here’s the code:
You can get to know more about the third script from here (http://www.addthis.com/).
I am using circular carousel and when I am at the last slide and click next, it gives me a blank screen (rather than 1st slide).
The problem comes only in IE7, when I add this widget code, so probably its conflicting with carousel jquery.
If I remove the 3rd script, everything works fine.
Any help will be greatly appreciated as it’s very urgent.
Thanks,
I am posting the code part again with comment as it didn’t show up in the above post.
//
//
//
One more try:
1) First line is include “jquery-1.3.2.min” JS
2) Second line is include “carousel” JS
3) Third line is include “addthis_widget” JS
Hope this will work now, If I remove Third script, everything works fine. But with it, I get the issue in IE7.
Hi,
Great plugin ! Thanks a lot to share it !
I use it with the mouseWheel plugin and the circular parameter is turned off.
The problem : when the mouse wheel has scrolled all items, the scroll is going to continue on the page.
Thanks,
Carine
Shouldn’t we call the plugin on window.load rather than document.ready?
So that it will load all the images first that are being used in the carosoul?
Any thoughts?
Thanks,
im kind of new to jquery, so would like to seek some help about jcarousellite. as the current now its showing 3 images is it possible to change it? if yes where can i edit it?
ThankYou
Jack
just ask question when im using the auto scrolling is it possible to make it stop when mouse over?
I purchased a theme and it uses your jCarousel. I am having some problems and no one seems to be able to help out. I am stuck right now til I found you. Here is the site, http://www.maimarket.com. Can you pleae let me know how can I fix it. Right now, the images are cut off and the texts are overlapping with images. Please help me. Thank you so much for your time.
Hi there!
I’m missing an explanation, how to use the various ways of implementing this real nice jCarouselLight.
This is how I tried it:
$(“.auto .jCarouselLite”).jCarouselLite({
auto: 800,
speed: 1000
});
That was wrong. But how is it right?
( -: roland :- )
It looks nice, but do you have any idea why i get the error “a[0] is undefined”?
HI !
Real Nice Plug in to use.
However I have the issue with one of my company website and I found this when I was testing it on IE6:
URL : http://www.dezshira.com/newsite/ ( Soon Will Be : http://www.dezshira.com/ )
I have 2 Text Scroller here, first one shows fine but 2nd one end of scrolling to an empty space once it reach to the end of the element after couple of seconds.
Here is the code I used for these 2 scroller:
$("#content_slider").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
auto:10000,
visible:1,
speed:3000,
scroll:1
});
$("#event_slider").jCarouselLite({
btnNext: ".event_next",
btnPrev: ".event_prev",
auto:15000,
visible:1,
speed:3000,
scroll:1
});
Your Comment would be of great help !
Thanks
Kaushal
Hi,
I am trying to add a filter button to my website which will toggle between using the carousel and displaying all items, ideally without needing to use a page refresh for this to work. I can unbind any events and hide the buttons, and remove width/left css attributes easily enough, and this works. My problem is that the code seems to duplicate all my list items when initialised, and I would have do write some messy JavaScript to remove all of the extra items when I toggle, otherwise on re-toggle, it keeps adding more and more items. Any better solution for this?
Adrian
Hi,
Could you please expand your example on the external controls for your jCarousellite. I would like to be able to custom style the next, previous buttons and the specific numbered slides. I found that your example page shows an example but I am having a difficult time creating it for myself. Hopefully with a more detailed example of the HTML it will help myself and your other users.
Thanks,
Drew
The script is conflicting with other code I have. I can’t send the code through here but please e-mail me
This script is awesome, but when there is a nested ul inside the main jCarouselLite ul, it doesnt work. Any idea how to fix or if a new release is coming? I saw http://tylermcgill.ca/internet/jcarousellite-nested-lists/ but their fix did not work for me. Thanks!
Hi,
This is a really useful plugin. Exactly what I was looking for. I have a couple of questions. Can I make the carousel stop when mouse over in an auto scroll carousel? And… When I have less items in the carousel than the specified in the visible param, for example, i have 3 items in the carrousel but the visible param is set to 4, the carousel shows 3 items in first instance but when the carousel scrolls itself only shows 2. It’s a bug or a configuration error.
Thanks, and sorry, English is not my native language
I noticed that if the number of li items in the list are less than the number of items the script is configured for, then the scroll displays incorrectly.
For example if you use visible:5 but only display 3 items then the scroll breaks. This is will happen in a database driven website. My current work around is to put the jcarousel call at the bottom of my page, then count the number of records to display from my db.
So I do something like this:
$countRecsToList = count($val); //need to pass this number to the jquery script
if($countRecsToList <5){
$itemsToList = $countRecsToList ;
}else{
$itemsToList = 5;
}
Now I can display no more than five if my db returns more than five, but I can also display less than five if I need to.
Hey ganesh,
It is a very useful plug-in but i do have some probs with scroll.
$(document).ready(function() {
$(“.carousel”).jCarouselLite({
btnNext: “.next”,
btnPrev: “.prev”,
visible: 3,
scroll: 3,
mousewheel:true,
speed: 600
});
});
eg:In order to display 7 images i gave visible:3 and scroll:3 but what
happened is when i click next button it displays 2 sets of 3 images correctly.The problem arises here after this when i click next button
it was missing 3rd image and showing only 6 images..
I tried it using lot of images….it has become more worse.
I found an interesting thing here…it will work fine for multiples of 3(3,6,9,12..)but it wont work for other numbers…(5,7,8,11…)
Did anyone have the same problem?
Please let me know when anyone has work around..
I would really appreciate your help.
Thanks,
~swetha
[...] I had to part with my bandwidth for all other features this plugin offered. Like my famous jCarouselLite plugin, I like my javascript code kept to the minimum. So, I decided and wrote a short yet sweet [...]
Hello, I am using the carousel to display images only with no user interaction (buttons ) necessary.
The problem I am having is no matter what dimension of images I give the carousel it always adds 2 pixels to the bottom.
In this case the images are 220 x 220px.
As you can see the li style height is 222. This will happen no matter what size image I feed. Always on the height.
What s controlling that appendage? How can I control it.?
David
code pasted with removed
li class=”item-7″ style=”overflow-x: hidden; overflow-y: hidden; float: left; width: 220px; height: 222px; ” img src=”http://www.davidarogers.net/ctl2/blogpics/home/220×360_6.jpg” alt=”" width=”220″ height=”220″ /li
Hey ganesh,
Thanks for great script
$(document).ready(function() {
$(“.carousel”).jCarouselLite({
btnNext: “.next”,
btnPrev: “.prev”,
visible: 3,
scroll: 3,
circular:true,
speed: 600
});
});
eg:In order to display 7 images i gave visible:3 and scroll:3 but what
happened is when i click next button it displayed 1st set (1,2,3) again clicking next button it displayed 2nd set (4,5,6)later on clicking next button it displayed 3rd set(7,1,2).
Here comes the problem once again clicking next button displayed (4,5,6) and 3rd image is missing.I cant figure it out..
but i found an interesting thing here…it will work fine for multiples of 3(3,6,9,12..)but it wont work for other numbers…(4,5,7,8,10,11…)
Did anyone have the same problem?
Please let me know when anyone has work around..
I would really appreciate your help.
Thanks,
~swetha
Hi,
This is REALLY COOL!. Thanks for sharing. I have some issues. Please help me.
I want to stop/resume the auto scrolling and want to call next and prev action from my JS code. Is it possible? Please help/suggest me.
Thanks
Hi,
This library is great, but I am having a little problem. In your example you have the carousel wrapped in two images (prev and next) but in your source code those images are nowhere to be found. Do we have to add these manually?
Futhermore, perhaps it would be a good idea to have the styles in a separate .css file and not inside the .js file.
Thanks!!
I want to user two scroller. one for left to right and another one right to left. There are not any option to scroll right to left. Please provide me any hints.
Thanks in Advance.
Pradeep Saini
Ganesh,
Comment 896 and 897. Still having a problem with style adding 2 pixels to height of images.
Excellent one. But there is a bug in this. The following setting will allow just 1 ‘Next’ moves. But it should allow 2 next moves.
There are 11 items in Li.
$(function() {
$(“.playlists”).jCarouselLite({
btnNext: “.right”,
btnPrev: “.left”,
circular: false,
visible: 4,
scroll: 4,
speed: 800
});
});
It will display only 8 items.How to solve it?
“scroll: 1″ means it will display 11 items. Any idea?
I am using it with wordpress and its not working. not giving any error but still not working.
Is there any conflict in it with WooThemes or wordpress?
Thanks,
Maria
Just to notice that I was looking for a way to stop (onmouseover) and restart (onmouseout) the autoscroll.
I found a patch to your plugin there : http://github.com/kswedberg/jquery-carousel-lite/blob/master/jcarousellite.js
it provide with pauseCarousel and resumeCarousel triggers…
Please update your code with it, as well as documentation on site.
Best regards and congratulation for your work,
Edouard
I am having problems with creating the stylesheet and also the carousel controls. I can’t seem to get it to work properly.
Can anyone give me some help. I want it exactly as the same on the front page ?
I’m having an issue in IE7 where the images inside the carousel don’t display until i mouseover the prev or next button. I’m using a sprite for the background image and have also incorporated a sliding boxes functionality for captions.
All other browsers are displaying ok, although IE6 is broken by the sliding boxes add-on. Any ideas as to why It’s not displaying correctly on page load in IE7?
Thanks!
I am having problems getting it to work with other JQuery code including one for tabs and a content slider ?
Thanks
Thanks for your good work. Is jCarousel Lite compatible with slimbox, too?
I want to add and pause play button
How do i get rid of this annoying popup of jcarousel?
Thanks for any advice
Hello,
I have a little problem using jCarouselLite with jQuery UI Calendar: seems that the text contained in the jCarouselLite news scroller appears on top of the Calendar, as shown in the screenshot here: http://www.ivanhalen.com/overlay.jpg
Is there a workaround for this, please?
Thanks…
Hi Ganesh
I made a new module with your splendid jquery plugin for Prestashop CMS
thank you
Look here
http://www.prestashop.com/forums/viewthread/65638/programmazione_moduli_design_e_temi/modulo_blockspecialsslide_nuovo_blockspecials_con_15_effetti_di_transizione_con_modalita_random_sia_per_gli_effetti_che_per_le_offerte/
bye bye
i really like it but:
1) really needs the option stopOnMouseOver: true,
(one of links above makes this one possible)
2) would be great to make scrolling workable too by onmouseover
(sides of the wrapper div would cause the scrolling on over)
– have not found solution to this one so far
I’ve been searching for a couple of days so far to fine a solution how to center the Imageslider
Well it’s not done yet, as I let create the items dynamically, the “margin: 0 auto” does not work. Only when I resize the window, open Firebug or save the HTML-File, then everything is fine, but not right after loading the page.
Is there any “CSS”-crack around being able to help me with this issue?
My testpage can be found at http://jagas.de/rm/weiss/making_of.html
thx in advance
Hi. I love this piece of code but have a problem. I want to include a list of links (ul) within the actual carousel but this causes problems with the basic functionality of the plugin because it searched for li. Is there any way around this?
When using the external controls, is there way to have the control number highlight when that image is visible.
I am showing one image at a time and made a static and active image for the external control. I would like the active image to display on the numbered image that is visible.
Is this possible to incorporate with this plugin?
Thank you in advance for any help,
Chris
Hi,
I am using tabs with slider. if i click same tabs twice then that images become twice.Why its is happening like .
Kindly reply me back
by
atheeq.
Great job so far but I have a problem and I hope, that you can help me. If the number of list-items is smaller than paramter “visible” the scroll function doesn`t work correctly. I use a “related post”-plugin, in which the number of list-items in each post is unknown. If I set the parameter “visible” to 3 for example and the plugin outputs only two items, the scroll-function doesn`t work correctly because the height is calculated by the visible-parameter and not by the effective number of list-items.
Thx in advance and greets, Markus
this blog is about jCarousel Lite and you describe the all the points and feature of it.now it is easy to install jCarousel Lite and get work because you tell the steps how to install it.
I’d like to be able to load thumbnails into the scroller on the fly using ASP… I am doing that now and setting the Height=”125″ and hoping the width would load proportionally for each image. The problem is that it is using the narrowest width for all of the images. With mixed landscape and portrait photos this is not working.
I’ve tried both
$(window).load(function() {
and
$(function() {
to load it thinking that had something to do with it, but no luck… any ideas or examples of code that did work for multiple sizes without specifying each height and width?
I have a problem with the hover with this one.. when the first 3 news are are hovered, its working fyn but when the next batch is displayed and is hovered it will not change its background color.
Having a problem with jCarousel Lite inside of Thickbox (iframe content)… http://jquery.com/demo/thickbox/ Seems ok in Safari and Chrome, but in IE and Firefox, the images do not show.
hey, thanks for a nice work BTW!
I have some problems displaying this script in “google chrome” browser.
Could you check it out and provide the fix please.
Do it work with jQuery 1.4?
I m doing almost same coding as i found in view-source of front page / demos, but not working for me, do it needs older version of jquery?
I m using firefox with latest available jquery
Suggested patch: On line 242 there is a js object with css properties. Unfortunately ‘float’ is a reserved word, so js parsers/compressors die when they get to this line.
Hi,
can anyone tell me how to dynamically set start position value of jcarousel?
Hi Ganesh,
I’ve modified the code so that you can include a left offset for fine tuning the positioning. I did this because I needed to centre my items relative to an absolutely positioned box that sits above everything.
It’s not hard-coded, so you can call it inside the options as “leftOffset”. It works from the start, not just after the first animation, and it doesn’t jump in circular mode.
I thought you might like to see the code and perhaps include it in future versions, also as I’m not a jQuery developer I would imagine there might be errors in scenarios different to mine, so rather than redistribute myself I wanted to send it to you so that you can make sure it works properly.
If you drop me an email I’ll reply and include the code, to see all instances of lines that I’ve edited search for #LEFTOFFSET. I’ll remind you of this in the email too.
Jamie Goodwin
cjgoodwin@gmx.com
Hello,
First thanks for sharing your code.
Then, I am having a problem with the carousel: when I go on this page (http://dev.eamobileclub.com/m/android3/Carousel.aspx) and press refresh on my HTC Dream, the images disappear. If I go on another page and back to the carousel, the images are back displayed.
Have you ever encountered this problem?
Thanks for ur help.
J
Hi Ganesh,
Thanks for sharing your code, I’m using your plug in and it works fine. Although I encounter an issue when having in the same list vertical and horizontal images.
If the first image of the list is vertical then it will fit properly and if any following image is horizontal the image appears cropped.
Hopefully I just happened to make some mistake while using it.
Thanks for your help.
Code:
$(document).ready(function(){
$(“.carosello”).jCarouselLite({
btnNext: “.next”,
btnPrev: “.prev”,
visible: 1,
speed: 200,
circular: false,
start: 4
});
$(“.carosello”).hide();
$(‘.view td’).click(function(e) {
$(‘.carosello’).show();
$(‘.next’).css({‘display’: ‘block’});
$(‘.prev’).css({‘display’: ‘block’});
});
});
HTML:
——————
…
I am having a problem with the vertical version of the carousel. I am just scrolling text using next and prev buttons. However, in IE7 and IE6 when it scrolls it its off a few pixels and as you scroll more it gets worse because its off. It doesn’t seem to be moving to top position correctly. I also see this problem on your vertical demo page in IE6 and IE7. http://www.gmarwaha.com/jquery/jcarousellite/index.php#demo.
Any help will be greatly apprecaited.
Hi,
Lovely script you have here. I have one question which I hope will be easily answered.
I want to build a carousel slideshow, which can expand in size by the click of a button. So far, using jQuery, I’ve managed to build just such an expand button. The problem is, the “next” and “previous” buttons still only slide the distance as was defined when the carousel was first initialized. Obviously, these need to slide a longer distance, now that the width is wider.
So essentially what I need, is information as to how I can change the distance the “next” and “previous” buttons slide, after the carousel has first been initialized.
If you’re able to help me with this, I’ll buy you a couple of beers through a paypal donation.
Hi,
I have a carousel where the user can add and delete images. Adding and Deleting works fine except when you delete until the one before the last one: I expect that, after deleting it, the last one is shown but it isn’t (although it is in the HTML source).
Is this a bug?
Kind regards,
Dick
In addition to my previous post:
This problem does not occur if you set “circular: false” in the configuration.
Dick
Fantastic Script.
Is it possible to make it continuously scroll when I hold the next/prev button down?
Cheers,
D
Hello! I’m doing something wrong here, I’m sure of it.
My problem is that the script doesn’t seem to be properly keeping track of its position, particularly when it should wrap around.
My code is below. I’m using 7 items, 4 visible at a time and advancing by 4. Naturally it works fine if this is 8, but with seven the next time I hit scroll it resets. Here is the pattern I get:
1234
5671
THEN on the next tap it messes up and abruptly changes the pattern to 1234 and scrolls from there to 4567. Is this an error in the script?
[.... item ....]
[.... item ....]
[.... item ....]
[.... item ....]
[.... item ....]
[.... item ....]
[.... item ....]
Thanx for the post. This is very helpful.
I was wondering if any scroll bar that is tied up with the carousel can be displayed under the images. Just to give an option for user to both click or slide.
Please give some hints if anyone have an idea.
Thanks in advance
Hello,
I saw this plugin in this site ( http://www.gabfirethemes.com/demos/transcript/ )and requested to know what it was, and the author directed me to this blog.
What I want to ask if its possible to have the carousel go front and back, as long as the person is on the same page.
Thanks for the great job though
Wonderful script!
But I’ve run into a problem and was wondering if you might have a suggestion. I have a circular carousel that is 5 elements wide and scrolls 5 elements at a time (circular:true,scroll:5,visible:5) and I’m using btnPrev and btnNext. It works great if the number of items is divisible by 5 but when I have an odd number, 9 for example, scrolling gets confused when trying to wrap around and moves the wrong number of elements (forward scrolling at least, I can’t remember backward scrolling behavior). If you can’t reproduce or don’t have a solution that’s cool – I’ll be back at work in a few days and will work on a fix. (I’m using 1.0.1)
Thanks!
RobG
Hi, great work!
I just wonder if it is possible to call the Go(to) method from outside.
ex( $(“.carousel”).jcarouselLight.go(5) )
I need to trigger the carousel to go to a specific position. The btnGo-option could work, but not for me, since the controls that has the css-class .1 .2 etc is not populated on the page when the jcarouselLight is initialized. They are created with JQuery.
What I want is to be able to add a button with JQuery, after the jCarousel has been initialized, that can trigger the carousel to go to a specific position.
I really hope someone can help me with this!
Hey, love this plugin, we use it alot at work.
Can i suggest that when you clone in the prepend and append calls you pass in a true param, this clones any custom events the user may have attached aswell.
e.g. ul.prepend(tLi.slice(tl-v-1+1).clone(true))
Nice! Now I know what to do, thank you! And as this information is educational so this site has been added to my RSS feed for later browsing. To know more about
marathon training visit: marathontrainingschedule.net
[ running workouts ]