fredleblanc / roundabout Goto Github PK
View Code? Open in Web Editor NEWA 3D Turntable jQuery Plugin.
A 3D Turntable jQuery Plugin.
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,
});
});
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
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.
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.
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.
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() {
$("#content").html(data);
$('#main-slider ul').roundabout({ shape: 'square' });
});
}
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 :
Thanx very much for your help !
Best regards,
Dupond
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.
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()
});
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.......
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.
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,
Is it possible to setup grayscale option (along with opacity) for the inactive items?
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.
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
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.
Is there some method one could use to offset the start of autoplay of roundabouts in differing ids?
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?
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?
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.
Example...
https://gist.github.com/1869930
If you uncomment line 15 the roundabout only responds to horizontal dragging and not vertical dragging.
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
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/
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.
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.
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.
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?
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.
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
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
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
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!
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.
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));
});
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.
Hello,
I'd like to fix a few issues that are related with keyboard browsing on my roundabout :
<li>
child, even if it's not currently visible.<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
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.
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
My roundabout looks tilted upward. How do I make all the images horizontally aligned?
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.
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.
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!
When declaring easing 1.3 the roundabout plugin acts kinda weird. it rotates a lot more times than it should normally.
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.
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.
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)
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 !
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
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?
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.