jQuery.SerialScroll request

can anyone give me any tips on how to add a patch for this plugin?

What if a plugin requires 2 js files to run, do I just add an additional path in the same entry?

this one requires both jquery.scrollTo.min.js and jquery.serialScroll.min.js

ok, tested this.. it does not seem to load both files when you just add an additional path. Can anyone tell me how to make 2 js files load in the jquery.jq.inc ?

Thanks!

Do not include init.js, there is no need, just follow the instructions here..

Here is a working implementation of the demo page, (slideshow only):
IMPORTANT -> Float images left in your css
NOTE: I've added the jQuery.easing.easeOutQuart function to the page, instead of loading the whole jquery plugin because there is no minified version.

First, download the appropriate files, unzip them and upload the minified versions to your jquery_plugin folder. I renamed jquery.serialScroll-min.js to jquery.serialScroll.min.js and jquery.scrollTo-min.js to jquery.ScrollTo.min.js, prior to uploading them.

Download locations:
http://plugins.jquery.com/project/ScrollTo
http://plugins.jquery.com/project/SerialScroll

Now, load the JS files in jquery.jq.inc:

  'ScrollTo' => array(
    'name' => t('ScrollTo'),
    'description' => t('With this plugin, you will easily scroll overflowed elements, and the screen itself.'),
    'version' => '1.4.0',
    'url' => 'http://plugins.jquery.com/project/ScrollTo',
    'files' => array(
      'js' => array(
        $path .'/jquery.ScrollTo.min.js' 
	),
      'css' => NULL,
    ),
    'invocation' => NULL,
  ),

  'serialScroll' => array(
    'name' => t('serialScroll'),
    'description' => t('This plugin allows you to easily animate any series of elements, by sequentially scrolling them.'),
    'version' => '1.2.1',
    'url' => 'http://plugins.jquery.com/project/SerialScroll',
    'files' => array(
      'js' => array(
        $path .'/jquery.serialScroll.min.js', 
	),
      'css' => NULL,
    ),
    'invocation' => NULL,
  ),

Add to page with php input filter enabled:

<?php
jquery_plugin_add('ScrollTo');
jquery_plugin_add('serialScroll');
drupal_add_js(' $(document).ready(function() {

jQuery.easing.easeOutQuart = function (x, t, b, c, d) {
	return -c * ((t=t/d-1)*t*t*t - 1) + b;
};


	$("#slideshow").serialScroll({
		items : "li",
		prev :"#screen2 a.prev",
		next :"#screen2 a.next",
		offset : -230,
		start : 1, 
		duration : "1200", 
		force : true, 
		stop : true, 
		lock : false, 
		cycle : false, 
		easing: "easeOutQuart", 
		jump : true
	});
          });',
         'inline'
);
?>

	<div id="screen2">
		<div id="buttons">
			<a class="prev" href="#">Previous</a>
			<a class="next" href="#">Next</a>
			<br /><br />
		</div>

		<div id="slideshow">
			<ul>
				<li><img width="225" height="300" src="http://www.stockvault.net/watermark.php?i=9020" /></li>
				<li><img width="225" height="300" src="http://www.stockvault.net/watermark.php?i=8430" /></li>
				<li><img width="225" height="300" src="http://www.stockvault.net/watermark.php?i=7898" /></li>
				<li><img width="225" height="300" src="http://www.stockvault.net/watermark.php?i=7894" /></li>
				<li><img width="225" height="300" src="http://www.stockvault.net/watermark.php?i=3526" /></li>
				<li><img width="225" height="300" src="http://www.stockvault.net/watermark.php?i=7863" /></li>
				<li><img width="225" height="300" src="http://www.stockvault.net/watermark.php?i=7743" /></li>

				<li><img width="225" height="300" src="http://www.stockvault.net/watermark.php?i=7150" /></li>
				<li><img width="225" height="300" src="http://www.stockvault.net/watermark.php?i=7164" /></li>
				<li><img width="225" height="300" src="http://www.stockvault.net/watermark.php?i=7149" /></li>
				<li><img width="225" height="300" src="http://www.stockvault.net/watermark.php?i=4922" /></li>
				<li><img width="225" height="300" src="http://www.stockvault.net/watermark.php?i=9307" /></li>
				<li><img width="225" height="300" src="http://www.stockvault.net/watermark.php?i=9922" /></li>
				<li><img width="225" height="300" src="http://www.stockvault.net/watermark.php?i=9976" /></li>
			</ul>
		</div>

	</div>

Add this to your custom CSS file in your theme:

#screen{
	position:relative;
	height:425px;
	width:725px;
	margin-top:40px;
}
	#screen .next, #screen .prev{
		position:absolute;
		top:200px;
	}
	#screen .prev{
		left:10px;
	}
	#screen .next{
		right:10px;
	}
	
	
	
#screen2{
	position:relative;

	width:900px;
	margin:20px;
}
	#screen2 #buttons{
		border:1px solid #777;
		margin-bottom:5px;
		width:679px;
	}
	
	#screen2 #buttons a{
		margin:10px 10px;
		color:#69C;
	}
	#screen2 .prev{
		float:left;
	}
	#screen2 .next{
		float:right;
	}

#slideshow{
	overflow:hidden;
	width:680px;
	border:1px solid #777;
}

	#slideshow ul{
		width:3900px;
		padding-left:225px;
	}

		#slideshow li{
			float:left;
			margin:0 16px;
			cursor:pointer;
		}