fredleblanc/roundabout

A 3D Turntable jQuery Plugin.

roundabout's Issues

How can I hook to event 'animationStart' ?

Hello.

Thank you for the great script! It is really awesome.

In the Hookable Events section of the API there is an animationStart event.
But I was unable to hook anything to it in any way I know (bind(), $(selector).roundabout().animationStart() or setting it as option).

What is a secret?
Thank you.

jQuery UI support

Hi,
Have you considered whether it would make sense to support jQuery UI as addon instead of the three seperate already compatible addons?
The easing library as well as drag and drop support have been incorporated some time ago.

Thanks for this nice plugin!

Use CSS Transforms for scaling

Hi Fred,

I love the roundabout plugin, but I see that in its current works it tries to scale all content one by one with basic css.

It will be much faster and give way better results if you just use CSS Transforms (when available) to achieve the animation.

Its just an idea.

Greetings,
George

Autoplay start timing offset?

Is there some method one could use to offset the start of autoplay of roundabouts in differing ids?

Drag & Drop

I configured roundabout according to the tutorial http://fredhq.com/projects/roundabout#enable-drag-drop

I am using the following scripts:

jquery.js 1.4.4
jquery.roundabout.min.js 2.3
jquery.event.drag-2.0.min.js
jquery.event.drop-2.0.min.js

When clicking on a roundabout item my firebug console displays the javascript error:

a.setAttribute is not a function (jquery.js line 56)

Changing the the tilt of the Roundabout

My roundabout looks tilted upward. How do I make all the images horizontally aligned?

http://rejuveniix.com/HomeBanner/

Reload/Cache Problem with Images in Firefox

We love "Roundabaout", but we have following problem. You can see it at http://hochzeitsverzeichnis.agentur-mai.de. When you load the page you can see the "Roundabout-Slider". It works fine. But when you press CTRL+F5 in Firefox, the page reloads but the images a resized too small. When you press just F5, the images are resized correct.
What can we do? Is there a known solution? Thank you very much for answering.

Callbacks "animationStart" and "animationEnd" don't work (Jquery 1.7.2)

The callbaks for the "animationStart" and "animationEnd" events don't work properly after each "turn" animation.

I'm trying both ways:

declaring the function right in the callback property:

ex:

$('seletor').roundabout({
    animationStart:function (){
          //do something
   }
});

and declaring the function name to call it, ex:

$('seletor').roundabout({
    animationStart: function_to_be_called()
});

Ability to control the offset of non focused elements.

Is there a way to control how much of the non-focused elements are visible from the in-focus element? Basically I have four panels in roundabout but want only a small portion of the next/prev elements to be visible from behind the in-focus. Maybe a way to say an offset of show only 25px of the non focused blocks that would adjust the position left accordingly?

A roundabout of infinite diameter

It'd be nice to have an infinite diameter to the roundabout, or even better, a diameter that could be scaled, so as to have a wheel that looks like a scrolling banner, or almost. This way, some of the items would be out of the view, and not playing hide and seek from behind.

Option for not applying it if there are less than n items

Say there are only 2 items, applying the roundabout on these two sort of hides one behind the other. One such example can be seen at my website :-) at
http://www.learnintouch.com/elearning/exercise/69/page/221/subscription/

It would be handy to tell roundabout, start rounding only if there are more than, say, 4 items.

Other than that, what an awesome plugin !

Roundabout and Responive Web Design

Hi,

This is not really an issue, but it seems that in older versions of the plugin, the carousel adapted to the width of the container ... but now it is no longer the case.

Can we expect a return of this feature? With the emergence of "Web Design Responve" I hoped to rely on this plugin! But now I can not ...

Thank you!

Choppy and not fluid behaviour in IE8

Issue: In IE8 the slider on the webpage behaves choppy and not fluid as compared to IE9 and other modern
browsers.
Using roundabout version 2.1.1 and jQuery v1.7.1

Cannot render the easing and bounce effects.

I was looking for a forum so as to post my issue at rendering the easing and bounce effects.

It can be seen at http://www.learnintouch.com/elearning/exercise/55/page/194/

Is there any forum somewhere ?

Cheers,

enableDrag

Hello,

I used the demo script to get my Roundabout able to drag.
But the issue is that if you drag it to a position and then drag it again it goes to the first row again.
So if you have a lot of LI's in the roundabout and enable dragging, you can never reach that.

Let me know when this is fixed.

Thanks,
Alexw

Issue with minScale and maxScale

I haven't confirmed yet but I believe the issue exists with minOpacity, maxOpacity, minZ, and maxZ as well.

Javascript error in Firefox 8.0 is as follows:
(info.scale.min + info.scale.diff * factors.scale).toFixed is not a function on line 1088

I fixed this by using the parseFloat function.
factors.adjustedScale = parseFloat((info.scale.min + (info.scale.diff * factors.scale))).toFixed(4);

Thanks for getting back to me on the autoplay issue I had. Great Plugin btw!

Handling only two items

If i have only two items in the script, one stays in front of the other and the one on the back cant be seen or touched, it seems that only one exists, how can i improve this? Thank you

How to fix keyboard accessibility issues

Hello,

I'd like to fix a few issues that are related with keyboard browsing on my roundabout :

1. When you're browsing via keyboard, the focus goes to the first <li> child, even if it's not currently visible.
2. Furthermore, my roundabout is configured to autoscroll. Then it should stop if any of its child element has the focus.
3. If you keep tabbing from the first child element, it should give the focus to the next one AND move to it.
4. Finally, when all the childs have been focused, the focus should go out of the roundabout (to the next <a> element).

So I've tried the following code :

$(document).ready(function() {
    var interval;
    $('#roundabout-jeunesse ul')
        .roundabout({ duration: 1000 })
        .hover(function() { clearInterval(interval); }, function() { interval = startAutoPlay(); });
    interval = startAutoPlay();

    /// Give the focus to the first VISIBLE child !!!
    $("#roundabout-jeunesse").find("a").first().focusin(function() {
        $(this).parents("ul").find("li.roundabout-in-focus a").focus();
        return false;
    });

    /// If any of the child element has the focus, stop the autoplay ; then restart it if the roundabout loses the focus
    $("#roundabout-jeunesse")
        .focus(function() { clearInterval(interval); })
        .focusout(function() { interval = startAutoPlay(); });

    /// When tabbing, the roundabout has to move to the next <li> element
    $("#roundabout-jeunesse").find("a").bind("keydown", function(e) {
        var code = (e.keyCode ? e.keyCode : e.which);
        if (code == 9) { $('#roundabout-jeunesse ul').roundabout("animateToNextChild"); }
    });
});
function startAutoPlay() {
    return setInterval(function() { $('#roundabout-jeunesse ul').roundabout('animateToNextChild'); }, 3000);
}

First of all, I'm using the last version of roundabout, available here on GitHub. So I'm not sure if my AutoPlay code is the best one (at least it seems to work).
With the previous code, the point number 1 is indeed fixed.
But numbers 2, 3 and 4 simply don't work : the autoplay doesn't stop when tabbing through the roundabout, and the focus goes out of the roundabout before all the <li> child elements have been focused.

What am I doing wrong ? Any help on this would be greatly appreciated.

Thanx very much in advance !
Best regards,
Dupond

Roundabout conflicts with Easing.1.3.js

When declaring easing 1.3 the roundabout plugin acts kinda weird. it rotates a lot more times than it should normally.

Center Smaller Images

Is it possible to center an image that is in focus?

So if I have a carousel that has numerous photos of different sizes, the one in focus well vertically center instead of being aligned with the tilt?

How to update roundabout dynamically

Hi,
My UL is dynamically built, as I add LI items on the fly (After Init of roundabout). When I do this , the layout is not correct in the control. How do I force a recalc of the layout when a LI is added dynamically? I tried $("#MyUL").roundabout("relayoutChildren"); but that did not have any effect.

Thanks,
Mike

responsive option break autoplayDuration

when set responsive option to true and autoplay to true

the slider speed up when window minimized

my code:

$(document).ready(function() {
    $('ul').roundabout({
        autoplay: true,
        autoplayDuration: 5000,
        autoplayPauseOnHover: true,
        responsive: true,
});
        });

Excessive roundabouting

In using version 2.4 copied from the github repo with minimal options, as suggested by the lessons on the website page, the roundabout rotates several times before landing on the clicked element.

I switched to version 2.1.1 which was being used by the website and the problem went away, the roundabout behaved as normal and only rotated to the clicked element.

jQuery 1.7.2 support

I was using the latest version of jQuery and when I clicked an element in the carousel it would loop completely around every time (rotating n+1 times where n is the number of elements in the carousel). Similar for auto rotate. I switched down to jQuery 1.4.4 and received expected click behavior (switches to the item clicked). I tested in both FF3.6 on OS 10.5 and also on Opera 11.62 on Windows 7.

Grayscale (inactive)

Is it possible to setup grayscale option (along with opacity) for the inactive items?

Focused item(top object) delay

Hi.
I am experiencing a tiny issue.
The problem is that top layer item always bit comes in delayed ( let's say 100ms?).

i would like to know how to fix that.

example: http://jsfiddle.net/nori2tae/f5CjK/

• roundAbout ver. 2.1 (2.4 circular motion went crazy by the way. It is like adding 1 extra rotation when i press next/prev button)
• jquery: 1.7.2
• jquery easing: enabled

Dynamic adding of items

Is there anyway to add items to the roundabout dynamically without having to reload the entire roundabout? Ideally, I'd like to use the results of an AJAX request to populate a new item and have the roundabout focus on it.

clock demo and 2.4 version trouble

Hi there,

As I was trying to reproduce your brillant clock demo with latest bundle version, I figured out that the cycling number magic does not work with 2.4 version (all li items cycles), but final number is correct.

Blur / Opacity Problem in IE 9

Hey Guys, Blur and Opacity doesnt work in IE 9. Here is how i use the widget. Maybe you see the problem:

$(document).ready(function(){
(function($) {

var duration = 600;

$('.quote-widget ul')
    .on('ready', function() {
        $('.quote-widget').addClass('ready');

        if (Modernizr.textshadow) {
            $(this).find('li').not( $(this).find('li').first() ).css('color', 'rgba(255, 255, 255, .01)');
        } else {
            $(this).find('li').not( $(this).find('li').first() ).find('blockquote').css('opacity', 0.2);
        }
    })
    .roundabout({
        shape: 'rollerCoaster',
        minOpacity: 0.3,
        minScale: 0.5,
        duration: duration,
        btnNext: '.quote-widget .next',
        btnPrev: '.quote-widget .prev',
        clickToFocus: false,
        triggerFocusEvents: true,
        triggerBlurEvents: true,
        autoplay: true,
        autoplayDuration: 5000,
        autoplayPauseOnHover: true
    })
;

$('.quote-widget li')
    .on('focus', function() {
        //$(this).animate({color: 'rgba(255, 255, 255, 1)'}, duration);
        if (!Modernizr.textshadow) {
            $(this).find('blockquote').animate({opacity: 1}, duration / 2);
        }
    })
    .on('blur', function() {
        if (Modernizr.textshadow) {
            $(this).animate({color: 'rgba(255, 255, 255, 0.01)'}, duration);
        } else {
            $(this).find('blockquote').animate({opacity: 0.2}, duration);
        }
    })
;

}(jQuery));

    });

Changing direction of the "dropAnimateTo" option

Hello,

I would like my roundabout to animate to the next element after dragging and dropping the carousel to the left, and animate to the previous element after dragging and dropping the carousel to the right.

Is this possible? If so, how would i go about doing it?

Remote loading of items [data is undefined error]

Hi

I load the the ul list I want to create the roundabout from with a $.get and then I call .roundabout({ shape: 'square' }) ... this works the first time. As soon as I want to reload the ul list a second time with different items and call roundabout agaın ... I start getting a constant error logged as "data is undefined":

Error: data is undefined
Source File: js/jquery.roundabout.js
Line: 734

self = $(this),
data = self.data("roundabout"),
[line 734] bearing = (!data.reflect) ? data.bearing % 360 : data.bearing,

sample of what Im doing:

function loadItems() {
$.get("items.aspx?cid=" + $("#hdcid").val(), function(data) {
$("#content").html(data);
$('#main-slider ul').roundabout({ shape: 'square' });
});
}

Opera Support is very... Jumpy

I'm sure this is a problem with Opera's rendering engine, but it's very jumpy. Doesn't bother me that much, just curious if this was a known problem or if I'm the only one with this issue.

[Bug] jQuery 1.7.2 with easing plugin

when using jQuery 1.7.2 with easing plugin 1.3

and the roundabout animation will be cary mess up....

please fix it, thanks a lot a lot a lot.......

Autoplay in IE

With autoplay enabled and when you scroll past the roundabout carousel on transition the page will jump up to the carousel on each slide change in IE.

with jQueryUI animation broken

Hi,

i´m allready using jQuery UI in my Project and i wondered why roundabout animations are not correctly.
There is a wild animation :-)

I identified the problem to jQueryUI, only when i have remove jQueryUI from my Project roundabout animates correct.

Without the Effects modules it will working correctly.

Is there a solution?

Thanx Martin

scale images

at first: excuse my bad english .....

the problem: All the funny things with "roundabout" will working fine, but it would be better if the images in a moveable will be scaled when the moveable is not in focus.

Mouswheel

Im working on a basic mousewheel support for my roundabout.

I am using:
jquery.mousewheel.js 3.0.6 http://brandonaaron.net/code/mousewheel/docs
jquery.roundabout.js 2.3

My first working example looks like this:

instance.roundabout(settings.roundabout);

instance.bind('mousewheel', function(event, delta) {
  event.preventDefault();

  if (delta > 0) {
    instance.roundabout('animateToNextChild', 1, 'linear');
  }
  else {
    instance.roundabout('animateToPreviousChild', 1, 'linear');
  }
});

Now I am trying to create a circular animation on mousewheel movements like:
http://finnrudolph.de/ImageFlow/Examples#Enable_circular_mode
http://www.professorcloud.com/mainsite/carousel.htm

I read your comment on #13 (comment) and made some attempts with animateToDelta and animateToNearestChild but nothing worked like intended.

Could you please give me an example of how to create a circular animation with easing in response to mousewheel movements.

Thanks in advance and best regards.

Vertical drag/drop doesn't work

Example...

https://gist.github.com/1869930

If you uncomment line 15 the roundabout only responds to horizontal dragging and not vertical dragging.

Bad CSS. Would need a better example.

Hello,

On my blog I've set a roundabout carousel. It works, but the CSS code is far to be perfect.

For the moment, I use the following code :

.roundabout-holder { width: 700px; height: 25em; margin: 1em auto; }
    .ISIE67 .roundabout-holder { overflow: hidden; }
.roundabout-moveable-item { list-style: none; width: 20em; height: 20em; margin: 0; cursor: pointer; text-align: center; }
    .roundabout-moveable-item img { height: 100%; margin: 0 !important; }
    #page .roundabout-holder img { border: 0; padding: 0; }
.roundabout-in-focus { cursor: auto; }

The troubles are :

1. The images are distorted when their size is reduced.
2. The images are not centered as they should : in the back we can see that the image is on the right compared to the one at the front.
3. The width of the carousel is not the same in Firefox and IE. And whereas it's set at 700px; it seems to be a bit more (like 720 or 740px).
4. Is there a way to know exactly the height of the carousel ? I would need to set the height of my container at 20px at the top PLUS 20px at the bottom PLUS the height of the carousel.
5. Even though the width of the images is set in the HTML code, the CSS width is wider than the width of the image itself, so you can't click on the image at the back because of the width of the image at the front (not sure this is understandable at all ;))

Thanx very much for your help !
Best regards,
Dupond

Autoplay Hover Issue

When having roundabout stop autoplay on hover, and then firing the stopAutoplay method. All is well unless you mouseover the roundabout then the autoplay starts again. Which isn't a terrible thing. I'm sure I can write something to take care of this but I would just assume if I had stopped autoplay it would not start up again unless I restarted it. Either way I'm very pleased with this plugin.

Different dimensions for active item

I think it would be great if we could change the dimensions for the active item - .roundabout-in-focus. I tried doing this in CSS, but since the styles are inline this does not apply.

It could be an option, maybe? The use case I'm thinking of is one in which I have several items, but I want to display more content on the active one. Maybe an image shows in the inactive ones, and I show the image and a descriptive paragraph or two with the active one.

Not positioning correctly

I can't get roundabout to the proper position on my web page. I've tried just about every css rule that I can think of. It won't center in my roundabout holder or the div I've put it in. Plus, in Safari and Chrome, I can't get the footer to clear it. I desperately need help with this.

Disconnect between the visible scroll and the memory of it

There is a disconnect between the scroll and the memory the roundabout has of it.

Say I scroll a bit from the far right hand side, and then point to this same far right hand side and click, when I barely start to drag then the roundabout is doing a sort of reset, to the position it has in its own memory.

This happens on my Firefox 10.0.2 on Linux Mint 12 and on Chrome 17.0.963.56 (Developer Build 121963 Linux) Built on Ubuntu 11.10, running on LinuxMint 12 but does NOT happen on my iPod Touch os 4.3.5.

Roundabout in Chrome 19 - Not working on OS X 10.7

On my side, it's causing an aw snap from google chrome since it has been updated in v.19
I am not sure if the issue reproduces on OS X 10.6. This is unique to Chrome, works well in Safari and others.

You can have a look at my issue here http://pascalmorabito.com/jewellery-joaillerie/ (i try deactivating roundabout and it worked well making it guilty as charged but this is not what i want obviously). Chrome 19 is supposed to be shipped with a new JS engine, so not sure how it affects Roundabout.

Do you have any idea what's the issue?

removing fixed height on .roundabout-holder breaks animateToNearestChild when dragging

Any change to the class rule for .roundabout-holder which results in anything other than a fixed height -- either specified in % or auto, or removed completely -- causes the drag behavior to break (animateToNearestChild, if I'm not mistaken) in such a way that when you release the mouse on drag, the roundabout does not move any further. Clicking or dragging still works, but it does not animate to the nearest child; it just stops moving unless acted upon by some other control. I'm using the latest versions of Roundabout (2.4), event.drag (2.2), and jQuery (1.7.2). Also, the setting of responsive to true does not affect this behavior. Here are two examples, side-by-side:

This one works:
https://dl.dropbox.com/u/92134327/roundabout_08_dragworks/index.html

This one doesn't:
https://dl.dropbox.com/u/92134327/roundabout_10_dragbroken/index.html

As you will see, they are nearly identical, except for commenting out the height setting for .roundabout-holder and adjusting the margins to somewhat center the container object within the browser.

Pager functionality available?

Hi!

First: Thank you for a superb and great plugin.

Is there a pager functionality available? I've looked at the whole page, but was not able to find anyone. There are of course event to pick up from. But I was wondering if there is a feature I overlooked or so?

Best,
Alonso

Mousewheel Support / getChildInFocus

Hi,

at the moment I using the mousewheel plugin from brandon aaron.
it is not as smooth as the drag drop extension but with the duration set to low values every fired event will be processed, yay.

the problem is that sometimes getChildInFocus returns false.
usually when the (bearing?) current position is 180° or 0°

can you give me a hint what im doing wrong?

best regards,
simon

the code i use

$('.coverflow').bind('mousewheel',function(e,delta,deltaX,deltaY){

                var cPos, nextPos;

                e.preventDefault();
                e.stopPropagation();

                cPos = $('.coverflow').roundabout("getChildInFocus");
                nextPos = cPos+delta;

                if(nextPos > 15 ) nextPos = nextPos-16;
                if(nextPos <  0 ) nextPos = nextPos+16;

                console.log("d:"+delta+" nextPos:"+nextPos+" cPos:"+cPos +" childCount:" +childCount);
                console.log(delta, deltaX, deltaY);

                $('.coverflow').roundabout("animateToChild", nextPos, 33);
            });

how i setup

$('.coverflow').roundabout({
                childSelector: ".coverflow_element",
                startingChild: <%=startingCover%>,
                autoplay: true,
                autoplayInitialDelay: 2500,
                autoplayDuration: 2500,
                autoplayPauseOnHover: true,
                enableDrag: true,
                dropEasing: "swing",
                responsive: false,
                clickToFocus: true,
                tilt: 0.0,
                minOpacity: 0.1,
                maxOpacity: 1.0,
                minScale: 0.1,
                maxScale: 1.0,
                shape: 'squareshrink',
                triggerFocusEvents: true

            })

there are 16 elements in the flow.

Mousewheel Examples:
http://flowplayer.org/tools/toolbox/mousewheel.html
https://github.com/brandonaaron/jquery-mousewheel

Linear easing not working

It appears the linear easing option is not working as it is supposted to do, since there is no smooth animation at all. The roundabout just instantly 'jumps' to the next list item. When I switch back to 'swing', it is working once again.

<script type="text/javascript"> $(document).ready(function() { $('#carouselContainer ul').roundabout(); interval = startAutoPlay(); function startAutoPlay() { return setInterval(function() { $('#carouselContainer ul').roundabout_animateToPreviousChild(1995, 'linear'); }, 2000); } }); </script>

Animation Broken in jQuery v1.7.2

Roundabout doesn't seem to animate anymore when used with jQuery v1.7.2. Need to look into this, but I'm a bit busy at the moment. Use with v1.7.1 for now.

Firefox problem with 3D demo

Your 3D demo don't work with Firefox 12 :
http://fredhq.com/projects/roundabout/demos/3d

You need to change this in your source :
"-moz-transform": "perspective(2000) rotateY(" + (rotateY_-1) + "deg)",
to :
"-moz-transform": "perspective(2000px) rotateY(" + (rotateY_-1) + "deg)",

It won't hurt to do the same on Webkit, but it is not necessary.