plugin page:
http://plugins.jquery.com/project/SerialScroll

demo:
http://demos.flesler.com/jquery/serialScroll/

details:
http://flesler.blogspot.com/2008/02/jqueryserialscroll.html

quote:
"Introduction
This plugin allows you to easily animate any series of elements, by sequentially scrolling them. It uses jQuery.ScrollTo to achieve the scrolling animation. It is a very unrestricted plugin, that lets you customize pretty much everything from outside. You can use horizontal or vertical scroll, also combined. "

Comments

KrisBulman’s picture

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

mfb’s picture

The only place a patch is needed is jquery.jq.inc. You can add the plugins to that file and then run cvs diff -up

KrisBulman’s picture

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

KrisBulman’s picture

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 ?

mfb’s picture

What I would do is add it as two separate plugins, scrollTo and serialScroll.

KrisBulman’s picture

Thanks!

daddydo’s picture

Did exactly what mfb recommended. Included init.js ($(document).ready(function()) file too. All files were loaded. But an alert told me that this method was not supported. There is a conflict with the path to the container, that holds the content. I can't make it work. No javascript knowledge.

KrisBulman’s picture

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;
		}

ñull’s picture

Bump

That's what I needed to get scrollTo. Please include this for future release in head. I don't like to re-patch every time there is an update.

ñull’s picture

Status: Active » Reviewed & tested by the community
GiorgosK’s picture

Status: Reviewed & tested by the community » Needs work

only patches are reviewed and tested
I don't see any patch (code examples are not patches)