Manual rotation via external pager elements?

This is really outside the scope or rotor.module. If you want to do this, you will need to write some JavaScript of your own. Rotor is powered by jQuery.cycle... The examples on this page should show you what you need to do: http://malsup.com/jquery/cycle/int2.html

I'm upgrading this ticket into a feature request. I think it would be fairly simple to provide a means of specifying the css selector used to select DOM elements to be used as previous/next buttons.

My apologies for reviving a year old topic, but I was looking for some advice/assistance. Is there a way to have next and previous buttons appear when one hover the mouse over a rotor? I was able to get the functions working adding in the lines from #3 into the rotor.js, but I was hoping to find a way to have them appear when one hovers over a rotor automatically. In case I am being unclear, you can find an example of the effect I'd like to achieve on the front page of the Steam website (http://store.steampowered.com/ - and my apologies if this feels like plug for their site). Any assistance/guidance would be greatly appreciated!

So after about a week of brainstorming, I had an epiphany last in the wee hours of Thursday morning that I believe provides a decent solution to this request. I have refined a few thing this morning, and wanted to share what I'd done, in case it might help the Drupal Community and the Rotor Banner Module. Much thanks goes to #3 (tom-a-spol-sro) for the hints about adding the manual previous and next items that Malsup's JCycle already includes. This code relates to the 6.x-2.7 version of this module.

In the rotor.js file that comes with the module, I added the 2 lines mentioned in #3
Original rotor.js code (starts around line 28)

$items = $rotor.find('div.rotor-items');
	$items.cycle({
  		timeout: settings.time * 1000,
  		speed: settings.speed,
  		fx: settings.effect,
  		randomizeEffects: settings.randomize,
  		pause: settings.pause,
  		cleartypeNoBg: true,
  		pager: $('div.rotor-tabs', $rotor),
  		pagerAnchorBuilder: function(idx, slide){
  			return $('div.rotor-tabs .rotor-tab:eq(' + idx + ')', $rotor); 
  		}
  	}).css('visibility', 'visible');

Modified rotor.js code

$items = $rotor.find('div.rotor-items');
  	$items.cycle({
  		timeout: settings.time * 1000,
  		speed: settings.speed,
  		fx: settings.effect,
  		// Added for Next/Previous Button Support from #3 at http://drupal.org/node/452922
  		next: '#next_rotor',
  		prev: '#prev_rotor',
  		randomizeEffects: settings.randomize,
  		pause: settings.pause,
  		cleartypeNoBg: true,
  		pager: $('div.rotor-tabs', $rotor),
  		pagerAnchorBuilder: function(idx, slide){
  			return $('div.rotor-tabs .rotor-tab:eq(' + idx + ')', $rotor); 
  		}
  	}).css('visibility', 'visible');

On my own site(s), I've created a custom content type I call a SpotLight. I've created my own view to have it cycle through items using taxonomy filters, and it functions more/less just like the included content Rotor type that this module includes (it uses Rotor for the style for transition setting and timings, and pulls fields for display).

In my Views UI, I added this bit of code to the header for any of my SpotLight displays that utilize the Rotor style. This creates/adds 2 small div regions that a place arrow graphic and corresponding prev/next text "buttons".

<div class="spotlight-prev">
<a href="#" id="prev_rotor">
<img alt="Previous Image" src="/sites/your-site-name-here/files/images/prev.png" />
<h3>
Prev
</h3>
</a>
</div>

<div class="spotlight-next">
<a href="#" id="next_rotor">
<img alt="Next Image" src="/sites/your-site-name-here/files/images/next.png" />
<h3>
Next
</h3>
</a>
</div>

The final step was to add some CSS styling to get the 2 regions to display in the proper location, and hide/show based on the mouse hovering over the spotlight block. This was achieved using a similar technique to how Drupal core and other modules will have some options appear when you hover over a region, like the "Configure" option one typically gets when you hover over a block.

/* Allows for SpotLight Navigation when hovering over images */
	
	div.block div.spotlight-prev, div.block div.spotlight-next
	{
		font-size: 0.9em;
		position: absolute;
		top: 15px;
		visibility: hidden;
		z-index: 40;
	}
	
	div.block:hover div.spotlight-prev, div.block:hover div.spotlight-next
	{
		display: block;
		visibility: visible;
	}
		
		/* Creates Floating Region for "Prev" clickable arrow and text */
		.spotlight-prev
		{
			background: url(../images/transparentblackoverlay.png) repeat;
			left: 0px;
			padding: 0px 7px 0px 5px;
			margin: 0px;
			width: 68px;
			height: 50px;
			float: left;
		}
		
			.spotlight-prev img
			{
				padding: 0px;
				margin: 0px;
				float: left;
				clear: none;
			}
			
			.spotlight-prev h3
			{
				padding: 0px 0px 0px 4px;
				line-height: 50px;
				float: right;
				clear: none;
			}
		
		/* Creates Floating Region for "Next" clickable arrow and text */
		.spotlight-next
		{
			background: url(../images/transparentblackoverlay.png) repeat;
			right: 0px;
			padding: 0px 5px 0px 7px;
			margin: 0px;
			width: 68px;
			height: 50px;
			float: right;
		}
		
			.spotlight-next img
			{
				padding: 0px;
				margin: 0px;
				float: right;
				clear: none;
			}
			
			.spotlight-next h3
			{
				padding: 0px 4px 0px 0px;
				line-height: 50px;
				float: left;
				clear: none;
			}
		
		/* Sets hyperlink color and decoration for text portion of link */
		.spotlight-prev a, .spotlight-prev a:link, .spotlight-prev a:active, .spotlight-prev a:hover, .spotlight-prev a:visited,
		.spotlight-next a, .spotlight-next a:link, .spotlight-next a:active, .spotlight-next a:hover, .spotlight-next a:visited
		{
			text-decoration: none;
			color: #beed3d;
		}

The results if anyone is interested can be seen on a live site http://www.ortho.ufl.edu/

The only caveat I have found is that for instances where you might have more than one rotor display on a page, the manual advance (prev or next) will rotate ALL displays using the rotor style.

mrfelton, if I were to add a similar cycle/items line item in the rotor.js that references a different selector, what's the likelyhood it would break the rotor functionality? I might try and test this on my own a bit on a test site, but in theory, add an addition cycle/item reference that would only have the manual advance functionality added, that would allow me to selectively chose which displays receive the manual advance command.

The solution for next and previous button in comment #3 is interesting. But I don't know where should I add these 2 lines?

<a href="#" id="example_prev">PREVIOUS</a>
<a href="#" id="example_next">NEXT</a>

In which page or file?

Using the Views UI (/admin/build/views), select the View you wish to add those 2 lines to. On the configuration pane, you will see a section in the left column near the bottom called Header. Paste those 2 lines in there, and save your View. It should now display properly.

hey tom-a-spol-sro and GatorBat, thanks for the help. This saved me a lot of time. I also ended up putting the delay of the slides to 9999 seconds so that now they only move when the user wants but still maintains the beauty of the rotor.

PS, to anybody else out there doing this, don't forget to clear your cache after making the changes to the JS. :)

I think this is a great feature. I would recommend that this be added to an already great module.

I tried both #3 & #6. Works well when page only have a one rotor block. I have two rotor block in the page. When click on 'next' both rotor block jumping to next item. Please help me to solve this.