Refresh/destroy methods

[RomainSauvaire]

Hello Karl,

Is there any plan for a method that refreshes or recalculate the carousel dimensions (in case of we delete programatically one of the items).

Or if it's not possible one "destroy" method that will kill every event listener and style applied to the content ?

I hope I'm clear enough with my English (I'm French :) )

Thank you for your answer.

[kswedberg]

Sorry for the late response. This is a good idea. I'll try to add those features as soon as I get a chance.

[kswedberg]

for now, you can trigger the "endCarousel" event:

$(".carousel").trigger("endCarousel")

[RomainSauvaire]

Thank you Karl for your answer. I'll try to managed it with the enCarousel

Continue the good work ;)

[alokmandloi]

triggering endCarousal adds the disabled class to both the buttons . But if I have to refresh it I would like them to be removed so that both the arrows are not disabled with jcarousal is initiated again .

[andy2708]

Hi Karl Thanks for the neat tool. I have found something that is an issue for me, but may not be something you are concerned about.

I am currently developing a mobile app using your carousel to slide images. If the device is rotated and i destroy the carousel using endCarousel and the re-init it after checking the width and setting the number of slides to be visible. This all works well, However if i dont set circular to false, everytime i re-init i get an extra set of elements. so if it changes orientation 5 times i end up with 50 images.

I cant seem to find away to change the number of visible slides without killing then reloading it. Anyway i just thought i would you let you know that i have that issue

here is my code if you are interested

function checkWidth(){
                            var $visible;
                    if(jQuery("#home").width() < 470){
                        $visible= 3;
                        }
                    else if(jQuery("#home").width() > 470 && jQuery("#home").width() < 750)
                        $visible =4;

                    else
                        $visible = 5;
                    return $visible;

                }
                function loadCar(){
                    jQuery("#videoThumbs").jCarouselLite({
                        auto:true,
                        visible: checkWidth(),
                        speed:1000,
                        circular:false,

                    });
                }
                jQuery(document).ready(function(){
                    loadCar();
                });
                function swapVideo(imgUrl, videoUrl){
                    imgUrl = jQuery(imgUrl).find('img').attr('src');
                    imgUrl = imgUrl.replace('thumbs/','');
                    jQuery('#imageVideo').attr('src',imgUrl+'?'+Math.random());
                    jQuery('#videoUrl').attr('href',videoUrl);
                }
                jQuery(window).resize(function(){
                    jQuery('#videoThumbs').trigger('endCarousel');
                    loadCar();
                    });
<div id="videoThumbs" class="carousel">
                    <ul style="width:240px" class="carousel">
                        <li onclick="swapVideo(this,'http://youtu.be/yCkq4fb1yik')" class="carousel"><img style="width:100px;height:66px;" src="images/videoImages/thumbs/ZTQT2.png" border="0" /></li>
                        <li onclick="swapVideo(this,'http://youtu.be/6KT7tH-AsGk')" class="carousel"><img style="width:100px;height:66px;"  src="images/videoImages/thumbs/ZTRTown.png" border="0" /></li>
                        <li onclick="swapVideo(this, 'http://youtu.be/f4f1aXvEtN8')" class="carousel"><img style="width:100px;height:66px;" src="images/videoImages/thumbs/ZTVan.png" border="0" /></li>
                        <li onclick="swapVideo(this,'http://youtu.be/oP-UgZfcq84')" class="carousel"><img style="width:100px;height:66px;" src="images/videoImages/thumbs/ZTQTN.png" border="0" /></li>
                        <li onclick="swapVideo(this, 'http://youtu.be/Vyg7rwnk0N4')" class="carousel"><img style="width:100px;height:66px;" src="images/videoImages/thumbs/ZTOfficial.png" border="0" /></li>
                        <li onclick="swapVideo(this,'http://youtu.be/yCkq4fb1yik')" class="carousel"><img style="width:100px;height:66px;" src="images/videoImages/thumbs/ZTQT2.png" border="0" /></li>
                        <li onclick="swapVideo(this,'http://youtu.be/6KT7tH-AsGk')" class="carousel"><img style="width:100px;height:66px;"  src="images/videoImages/thumbs/ZTRTown.png" border="0" /></li>
                        <li onclick="swapVideo(this, 'http://youtu.be/f4f1aXvEtN8')" class="carousel"><img style="width:100px;height:66px;" src="images/videoImages/thumbs/ZTVan.png" border="0" /></li>
                        <li onclick="swapVideo(this,'http://youtu.be/oP-UgZfcq84')" class="carousel"><img style="width:100px;height:66px;" src="images/videoImages/thumbs/ZTQTN.png" border="0" /></li>
                        <li onclick="swapVideo(this, 'http://youtu.be/Vyg7rwnk0N4')" class="carousel"><img style="width:100px;height:66px;" src="images/videoImages/thumbs/ZTOfficial.png" border="0" /></li>
                    </ul>
                </div>

edit: sorry tried for a while to get the 'code' tags to fire but it aint happening. sorry. Andy

[kswedberg]

Yeah, it's a mess. You really shouldn't have to destroy and init the carousel just to change the number of visible items, but I can't fix that without overhauling the plugin's architecture. I'd actually like to do that at some point, but I don't have the time now. In the meantime, I've pushed a change that removes any plugin-created <li>s when you trigger "endCarousel." Let me know if that works for you.

[andy2708]

Hi Karl Sorry, finally got a round to testing this, i think something broke in your scripts on GitHub. its jsut a bunch of html more like a page source than a script.

Andy

On 16 December 2012 17:51, Karl Swedberg notifications@github.com wrote:

Yeah, it's a mess. You really shouldn't have to destroy and init the carousel just to change the number of visible items, but I can't fix that without overhauling the plugin's architecture. I'd actually like to do that at some point, but I don't have the time now. In the meantime, I've pushed a change that removes any plugin-created

s when you trigger "endCarousel." Let me know if that works for you.

— Reply to this email directly or view it on GitHubhttps://github.com/kswedberg/jquery-carousel-lite/issues/9#issuecomment-11428216.

Andrew MacNaughton Technology Support and Development Ziptrek Ecotours

Direct Telephone 604.935.4102 ext. 217 Mobile 604.902.0456 Fax 604.935.4101 Reservations 604.935.0001 Toll Free (Canada/USA) 866.935.0001

[andy2708]

Ok, so i checked all the differences between releases and managed to get the script working. Seems like it does everything as promised. thanks a bunch!

Also another thing that my manager found today was that on his iPhone with swipe set to true, circular to false you could swipe the carousel right off the screen. He is on iOS6 something. I can not do that on mine which is only on iOS5.

Anyway thanks for your great work on this. Andy

[kswedberg]

Hi @andy2708. Are you still seeing the broken scripts? When I go to https://raw.github.com/kswedberg/jquery-carousel-lite/master/jcarousellite.js, for example, it looks okay to me.

Thanks for the report on the iPhone problem with iOS6. Would you mind opening a new issue for that? I'd really appreciate it.

[andy2708]

Seems good now. Not sure, maybe I was doing something dumb which is highly possible. I'll open an issue for sure. Andy

[kswedberg]

Closing this issue. Let me know if I misunderstood, but it sounds like this is resolved. Thanks for reporting the iOS issue. Not sure when I'll be able to get to it, but feel free to remind me if the issue lies dormant for too long.

[andy2708]

Hi Karl

Just found another issue/bug/easy fix for the iPhone. Same code as in my initial post. I found that when i clicked one of the carousel items. It paused the scroller. It only seems to happen on the iPhone. Took me a while to figure it out but it seems that somewhere along the line the iPhone was considering the press as a hover and would keep it paused forever (even with other clicks in the window). Not sure if its specific to just my site, but it happened on a bare bones, css-less html page as well as my joomla page. All i did once i figured it wsa a hover thing was change the default pause to false in the script. Not sure if that is an option that can be set in the options or not as its not mentioned in the readme.

This never happened on desktop, or the androids i was testing on.

Let me know if you want a seperate issue logged for this and ill happily add it.

Thanks! Andy

On 14 January 2013 17:21, Karl Swedberg notifications@github.com wrote:

Closing this issue. Let me know if I misunderstood, but it sounds like this is resolved. Thanks for reporting the iOS issue. Not sure when I'll be able to get to it, but feel free to remind me if the issue lies dormant for too long.

— Reply to this email directly or view it on GitHubhttps://github.com/kswedberg/jquery-carousel-lite/issues/9#issuecomment-12249162.

Andrew MacNaughton Technology Support and Development Ziptrek Ecotours

Direct Telephone 604.935.4102 ext. 217 Mobile 604.902.0456 Fax 604.935.4101 Reservations 604.935.0001 Toll Free (Canada/USA) 866.935.0001

[kswedberg]

Hi Andy. Yes, a separate issue would be great. Thanks!

[kswedberg]

@andy2708 : I'm pretty sure I fixed that iPhone issue in a recent commit (2fc7b59fffef5a64816c31e733169d8c2c05ab03). Feel free to try an updated version of the plugin and see if it works better for you now.