ryrych / rcarousel Goto Github PK

Setting Visible=4 displays 2 images concurrently. If we set it to 10 (all our images), it displays off the right side of the page.

The image display starts about 2/3 of the way across the enclosing div. What is driving the rcarousel starting position for displaying the images, and how do we get it to start on the left side of the div?

Hi, iI'm trying to load a slice from rcarousel image link. up to that its work fine !!! but, when you go next or prev in rcarousel the links doesnt work any more, or more than the links the jquery code of featured list. i leave a link where you can see what i'm talking about. thanks !!! http://www.alquilertemporario.co/buenos-aires/departamento/puerto-madero/manso-y-escurra-vi-2425

Hello!

First of all, thanks for bringing to the world this gorgerous carousel. I'm trying to make a horizontal website with it.

I have an issue with the startAtPage config. When you put a value like 3, per example and next to this you use GoToPage 1 (implying is the first page) the carousel doesn't move. It only moves when you click another value (including 3, wich is the startAtPage value.

It's like the variable that stores the current page is not updated when you load the page.

I though that was in my code but I tried it in the html.html example webpage configuring the default page to open and creating a link to move to the first page
Home

Sorry if the text is hard to read. I'm not native english speaker ;_;.

Is there an option for rcarousel that will resize images to the specified width and height?

If I put more than 6 pictures on my auto play, it plays the first 6 correctly and then quickly goes by the last two

Hello,

Is it difficult for Rcarousel to provide an option so I can do rcarousel() on fx 10 images, each having its own size, and not resulting in each image in carousel having width set by 'width' parameter?

It could be like having a possibility to set width option on 'inherit' or 'auto'.

Would be great to have it.

Thanks.

Hello ryrych,

first of all i want to thank you for this awesome script.

i use ist in a project, where i have to add or remove some images within my HTML-Slide Elements (). When i slide to next Page the content of the HTML-Slide Elements is the same, as when the Page was loaded. I think this is because the Slider-Elements are Saved in data.paths an/or data.pages.

I tried to save the Slide-Elements from the actual HTML-DOM in the _removeOldElements Function into these both arrays, but it didn`t worked.

Do you have an Idea what could be the best way to update and reload the HTML-Slide Elements in runtime?

Greetings from Germany

Stocky

Hi,

I think when user selects the image at the most right, carousel should scroll one to show another one. I think this should be valid for the image on the most left.

Is it possible to implement such a feature? Are you busy?

Kind regards,
evrim.

It looks like it doesn't react to moving finger on touch screen.
If i missed something - let me know how to enable this functionality.
If not - would be very great to add support of this feature.
Thank you!

Is it possible to nest carousels? I need a parent horizontal carousel consisting of child vertical carousels...I tried and it works only for the first animation, then it gives a js error:
Message: 'undefined' is null or not an object
Line: 130
Char: 5
Code: 0
[mywebpath]/widget/lib/jquery.ui.rcarousel.js

Where's the load function on version 1.1.x ?

How can i load new thumbnails without keeping the current ones?

I have a case where it's possible no objects exist for populating carousel items initially, and the number of items can change dynamically over time. More specifically, my users are viewing a slideshow of upcoming events in their area--there could be 0 events, and events can be added and removed in real-time dynamically without the page being refreshed.

My visible is always 1. If the number of items is 0 I get a JavaScript error: "Uncaught TypeError: Cannot call method 'get' of undefined" on "if ( data.lastPage[i].get(0) === page[i].get(0) ) { ..."

I imagine I can handle this case by replacing the carousel with something else when there are no items to display; however I figured this was worth reporting. It'd be nice if the carousel didn't generate a JS error in this case.

The 'ui.' widget namespace is reserved for widgets that are part of the jQuery UI Suite (http://jqueryui.com/). It is intended that developers building their own widgets using the jQuery UI Widget Factory select their own namespace so as to avoid a collision with a current or future plugin of the same name in a suite maintained by a separate bunch of folks.

The fix is simple enough. On line https://github.com/ryrych/rcarousel/blob/master/widget/lib/jquery.ui.rcarousel.js#L2 just change 'ui' to a namespace of your choosing, such as 'r' or 'ry' or 'ryry' or 'ryrych' or something else entirely. Also, don't forget to update the filename to reflect the change. The filename should generally be jquery.namespace.widgetname.js

Thanks!

How do i use Rcarousel with prettyphoto or any other lightbox? Pictures are opened directly even though the rel= is included.

Hi. A common need in the carousel is to be able to display the image with a little of the one before and after showing on each side and have them scroll so that behavior continues (on the first, you sitt a little of the last on the left and on the last you see a little of the first in the cycle when they are circular carousels.

We have gotten that to work fine in jCarousel lite, jMyCarousel and jCarousel but they also have bugs that kill us. If you need a visual of what I mean follow the links below.

We need up to 26 images in the carousel (number of images is what breaks jMyCarousel and jCarousel lite and in lite there is also a display issue.)

In rcarousel I can not find a way to display the images on the sides. Is it possible? If so how? If not, any chance you might add it?

We have set up jcarouselLite and it does what we need except for 2 bugs. I have put up demos of the problems at

http://highroadmc.com/HBA-tests/jCarouselLite/jCLiteTest.html
http://highroadmc.com/HBA-tests/jCarouselLite/jCLiteTest1.html

The first shows that, when you hit the end of the items in the scroll, the last element does not display. When you click on it again it scrolls into the center and everything is fine. You also get a similar behavior if you load the page and just start of using the left side button.

The second problem is that if you load a certain number of images (I don't know what the break point is but it is below the 26 we need) then after you scroll for a bit the scroll starts to go crazy and scroll whole bunches of images (on the 18th click in the one here) and does the same on the second click on the left side. After it breaks, if you keep going it will return to normal after a while but no user is ever going to get that far. Might help you figure what the issue is though.

BTW, if you want to see the same behavior in jMyCarousel (the too many images scrolls crazily) here is a link.

http://highroadmc.com/HBA-tests/jMyCarousel-bug/crazytest.html

Thanks!

http://i39.tinypic.com/izlw76.png

Hi, was wondering if it's possible to have it auto scroll one time and then shut off? Thank you so much for this feature, i look forward to donating to it when my site is up!

Four elements with auto scroll and one step gives the following page sequence:

1 2 3
2 3 4
1 2 3
... etc.

As you know/can see it slides three steps from the second to the third page sequence, which users can find annoying. Additionally item 2 and 3 are always displayed, and item 1 and 4 are displayed partially.

I find the following sequence to be more comforting, in addition to an equal distribution of the various items:

1 2 3
2 3 4
3 4 1
4 1 2
1 2 3
.. etc

Is this currently applicable?

in reading

Remember that number of elements you add to a carousel have to be at least number of elements you specify in ‘visible’ option! Otherwise the carousel will not run."

Need to create a "trigger" for the thumbnail images become visible. For when eses are inserted dynamically.

$(document).ready(function(){

            count = $( "#carousel a" ).length;
            total = 1;

            if ( count == 2)
            {
                total = 2;
            }
            else if ( count >= 3)
            {
                total = 3;
            } 

           $( "#carousel" ).rcarousel({
                visible: total,
                step: 1,
                margin:10,                                             
                width: 100,
                height: 100                
            });
});

This is not a bug, it was quickly found to solve my problem.
does it have a better way to solve? new feature maybe.
I hope this is helpful if someone passes by it.

http://www.mohzdev.com/

is the website,

If you look at the rcarousel on the bottom and click next 3 times... Then it wraps to the front again, not a single step.

How do i fix this?

Thanks in advance.

I am having an issue whereby when using the jquery video lighboxand Rcarousel. i can't seem to pinpoint where the conflict is. does anyone have any ideas as to how to correct or if they have experienced the same actions.

thanks in advance.

Is there anyway to control the speed of the carousel returning to the beginning? The next speed works really well, but seems to be dropped when the carousel returns to the start. Maybe it has some easing function involved.

Thanks
Rich

Hi!
Could I do something like this http://walsash.ru/present.jpg with rcorousele?
My first start had given no results.

Sorry for my english
Thanks
Alex

When I use the startAtPage option, the correct screen shows in the carousel, but the navigation assumes that I am displaying #screen01.

I have 6 pages (#screen01-06) . If I set startAtPage to be 4, #screen04 will show but if I click on next, it then shows #screen02 instead of #screen05. I also see the bullet marker as on for #screen01.

Has anybody else experienced these issues?

Would it be possible to add an additional navigation option for "pause". I noticed that the scrolling does automatically pause on hover, but it would be nice to be able to create a "pause" control like "next" and "prev".

The custom HTML exemple doesn't work as expected in ie7.

http://ryrych.github.com/rcarousel/examples/html.html

In attempt to set up a layout that displays 8 thumbnails stacked on top of each other, I altered the CSS of the carousel. In doing this, the easing of the animation has been altered as well. An example of this can be viewed here:

http://dev.media-comm.com/

How can I restore the original animation? I have tried changing the speed and this has not helped the issue.

rcarousel does not remain within the enclosing div but sprawls outside to the right and off the page.

Hello,

I am having a problem with two carousels on one page. I Pressing the arrows in the first one, moves both carousels. And when I pressing the arrows in the second one, nothing happens but goes to the top of the page. Something am I doing wrong?

These are the calling functions:

jQuery(function( $ ) {
$("#carousel").rcarousel({
visible: 1,
step: 1,
width: 915, 
height: 440,
auto: { enabled: true },
start: generatePages,
pageLoaded: pageLoaded

});

$("#carousel_2").rcarousel({
visible: 3,
step: 1,
width: 281,
height: 136
});

$( "#ui-carousel-next" )
.add( "#ui-carousel-prev" )
.hover(
function() {
$( this ).css( "opacity", 0.7 );
},
function() {
$( this ).css( "opacity", 1.0 );
}
);

$( "#banner-carousel-next" )
.add( "#banner-carousel-prev" )
.hover(
function() {
$( this ).css( "opacity", 0.7 );
},
function() {
$( this ).css( "opacity", 1.0 );
}
);

Thanks a lot!
Regards.
Carlos

How to add links for image. I have tried to use the following in the source-- it removes the links.
<ul>

<li>

<a href="http://www.yourtowntv.com/video/330/c/1/lakewood-october-news" >

<img src="http://img.youtube.com/vi/q1cug-02I64/2.jpg" />

</a>

</li>

</ul>

It does not work. Within the page, the link is gone.

Thanks.

Hi all,

When i have one element, getTotalPages return me 2.

I put a condition in the code and it works for me (visibility:1, step:1).

The condition in _paginate(), to put at line 336, after _complement condition :

if ( (_end - _start) != 0 ){
    // first add old elemets; for 3rd page it adds [FGHI…]
    // remember the page we add to (_index)
    _oldFirstEl = _start - ( _visible - (_end - _start) );
    _oldLastEl = _oldFirstEl + ( _visible - (_end - _start) );
    _index = _append( _oldFirstEl, _oldLastEl );
                            
    // then add new elements; for 3th page it is J element:
    // [fghiJ]
    _append( _start, _end, _index );
}

I don't know if it works for all cases. I can't test :s

I used ajax to fill an initially empty DIV and created rcarousel for it when ajax done as below.

I checked the generated content and it seems lacking

If there are less images than the number of visible images specified, a javascript error is raised.

Any quick fix to this?

Thanks,

Bing

I use rcarousel to display thumbnails of videos. I set visible elements to 7, but when I have less than 7 elements in the carousel div, nothing is displayed. When I have 7 or more elements, that's ok. Is there something I can do to display the elements when I have less than 7? Here is the code of the page and the code of the rcarousel configuration.

<div class="scrollable">   

   <!-- root element for the items -->
   <div class="items">
    <div id="container">
        <div id="carousel">
        <a href="#" class="miniature"><img src="http://i.ytimg.com/vi/bJislhIFTw4/default.jpg" alt=""/><p>PEOPLE ARE AWESOME (Brodie's Frisbee Version)</p></a>
                   <a href="#" class="miniature"><img src="http://b.vimeocdn.com/ts/210/452/210452577_200.jpg" alt=""/><p>Quechua - Grand Raid de la Réunion 2011</p></a>
                  <a href="#" class="miniature"><img src="http://b.vimeocdn.com/ts/162/938/162938637_200.jpg" alt=""/><p>Projet CHORUS</p></a>
                  <a href="#" class="miniature"><img src="http://b.vimeocdn.com/ts/208/744/208744860_200.jpg" alt=""/><p>Quechua - We all need warmth - Making Of</p></a>
                  <a href="#" class="miniature"><img src="http://b.vimeocdn.com/ts/207/501/207501960_200.jpg" alt=""/><p>Quechua - We all need warmth</p></a>
                  <a href="#" class="miniature"><img src="http://b.vimeocdn.com/ts/170/566/170566906_200.jpg" alt=""/><p>INDIA</p></a>
        </div>
    </div>   
   </div>
</div>

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; GTB7.4; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)
Timestamp: Wed, 10 Oct 2012 18:53:13 UTC

Message: Expected ')'

Using kdiff (or any program that shows all file characters) there is a random space character showing: Â

example line:

// create wrapper inside root element; this is needed for animating
$root
.addClass( "ui-carousel" )
.children()
.wrapAll( "

Removing all these characters fixes the IE error. Not sure how or why these characters are getting put in the file. Most of my text editors see those characters are blank spaces.

Note downloading a fresh copy of 1.1.3, and opening the unminified file inside win-zip allow shows these characters.

width: auto,
height: auto,

If the browser window has scrolled down, when clicking the next or previous buttons, the window automatically scrolls to the top.

This can be repeated on the the .html example. (you have to change the page height large enough for the page to be scrollable first)

This makes the slider pretty annoying to use when the page is high enough to be scrollable.

How can i stop continuous carousel?

Is it possible to have it start sliding from the left instead of traditional direction from the right?

Thanks!
Kenn

I'm building the slides dynamically, when I only got one slide to show two pages are generated.
You can simulate this behavior by using the html version in your example, remove all the slides except one and open it.

I'm getting this error in the Firebug console when adding only two images.

TypeError: data.lastPage[i] is undefined error source line: [Break On This Error]
if ( data.lastPage[i].get(0) === page[i].get(0) ) {

Code @ Line 283 in jquery.ui.rcarousel.js

I recreated it in one of your examples - vertical.html. I removed all but two images in the carousel and voila problem occured.

next prev

Carousel Version 1.1.3

Thanks

Since rcarousel is dependent on a declared width and height, it doesn't work on responsive design-based websites. Is there a way to dynamically change those values to make it responsive? Or can the width and height be done through percentages?

Hi,

I want to set the width in %. By default width is set in px.

Is it possible?

how do i get the images to scroll one at a time?
i do want 4 images to show up at all times but then only want one image to move right at a time some of the images do this but the first four move all together how do i get them to move one at a time.
thanks
jim

Hi

I'm sure this is a simple error but perhaps you can help. I have got rcarousel working brilliantly on my computer but when I upload it to the web and run it everything comes out on the same page and the carousel doesn't work. I assumed this was my error so I downloaded your example with a carousel and html and uploaded this. Exactly the same issue. It works when I run from my hd but online everything appears on the same page.

Can you help??

Thanks

Hello, first of all great carousel plugin. Very easy to use and highly customizable.

I was wondering if it is possible to allow forms in the carousel, although they show just fine, when submitting data, it uses the original form data.

I am disabling and enabling my navigation buttons based on where we are in the pages, however, if there are 6 items in a carousel with visible = 6, getTotalPages is 2, so the next button shows up.

I've implemented a test rcarousel with 4 images (770x406) and 1 embed YouTube video (image, image, image, video, image) and autoscroll. The carousel works great, except when the slide goes from the video slide to the next image slide, there is a slight shudder where it looks like rcarousel is either quickly showing or hiding another one of the slides (a split second ghosting effect). This seems to be affecting Chrome (Version 19.0.1084.36 beta - Mac), but not other browsers, from what I was able to test.

This may just be something with the v19-beta, but wanted to make you aware in case it persists when v19 goes stable.

I didn't find the way to set in the javascript, so that i can use more than 1 carousel in a single page.

I see that is is possible to add items to crousel through the use of append. Is it possible to remove items from carousel? I am trying to do lazy loading and do not want to keep a bunch of currently unused items on the DOM if possible.

Thank you!