#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2007
    Posts
    18
    Rep Power
    0

    Roundabout with content


    I am using the jquery roundabout plugin which works great for the first part of this roundabout. However I need to add a div that contains text, and that needs to change whenever an animation starts on the roundabout.

    here is what i have now, which works only once, and doesn't count the other items in the list.

    Code:
    		var $j = jQuery.noConflict();
    		$j(document).ready(function() {
    			$j('ul.roundabout').roundabout({
    				btnNext: ".next",
    				btnPrev: ".prev",
    			});
    			
    			$j(".next").click(function() {
    				$j("ul#icon li").fadeOut().next();
    			});
    		});
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2007
    Posts
    18
    Rep Power
    0
    No reply yet, either no one knows, or i'm not providing enough or accurate code.
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    There are many, many jQuery plugins. Some are much more popular than others. Fortunately, this one seems to have fairly good documentation.

    I'd hazard a guess that new links are created for each slide. Use the animationStart event to trigger the change in the text.

    Try the following. (I did not include code for dealing with what happens when you reach the last list-item or when you want to get the previous one.)
    Code:
    		var $j = jQuery.noConflict();
    		$j(document).ready(function() {
    			$j('ul.roundabout').roundabout({
    				btnNext: ".next",
    				btnPrev: ".prev",
    				animationStart: function(){
    					var item=$j("ul#icon li:visible");
    					item.fadeOut(function(){
    						item.next().fadeIn();
    					});
    				}
    			});
    		});
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2007
    Posts
    18
    Rep Power
    0
    Originally Posted by Kravvitz
    There are many, many jQuery plugins. Some are much more popular than others. Fortunately, this one seems to have fairly good documentation.

    I'd hazard a guess that new links are created for each slide. Use the animationStart event to trigger the change in the text.

    Try the following. (I did not include code for dealing with what happens when you reach the last list-item or when you want to get the previous one.)
    Thank you for the reply, i really appreciated it.

    I found this function too, but i was unable to get it working. I applied your suggestion, and ran into the same problem. However i was able to find that using only a "callback" would get me any kind of response.

    So i was able to get it to display the items next in the list, but like you said, i am unable to figure out how to get it to go backwards.

    Here is what i have so far:

    Code:
    	var $j = jQuery.noConflict();
    	$j(document).ready(function() {
    		$j('ul.roundabout').roundabout({
    			tilt: -4,
    			btnNext: ".next",
    			btnPrev: ".prev",
    			btnNextCallback:function(){
    				var item = $j("ul#icon li:visible");
    				item.fadeOut(function(){
    					item.next().fadeIn();
    				});
    			},
    			btnPrevCallback:function(){
    				var item = $j("ul#icon li:visible");
    				item.fadeOut(function(){
    					item.prev().fadeIn();
    				});
    			},
    			clickToFocusCallback: function(){
    				var item = $j("ul#icon li:visible");
    				item.fadeOut(function(){
    					item.next().fadeIn();
    				});
    			}
    		});
    	});

IMN logo majestic logo threadwatch logo seochat tools logo