Seria | Documentation

Documentation

1. About

Seria is a multi-purpose vertical slideshow plugin that can be used to create product showcases, galleries, display blog posts or news. Also you can use it to create portfolios in quite interesting way!

The key features of the plugin include: configurable visibility of adjacent photos, animated description for every photo, photo expand mode with panning, infinite or normal type of scroll and much more. Also Seria works on desktop browsers, mobiles and tablets!

2. Installation

I suppose you have jquery library and jquery-easing already installed. So start installing Seria by linking necessary files in <head> section of your index.html file. You need seria.css, respond.js (for IE8) and jquery.seria.min.js

<link rel="stylesheet" type="text/css" href="css/seria.css">
<!--[if lt IE 9]>
	<script type="text/javascript" src="js/respond.js"></script>
<![endif]-->
<script type="text/javascript" src="js/jquery.seria.min.js"></script>

Also you should copy 3 files from images/ folder to the corresponding folder under your site

seria-controls.png
seria-controls@2x.png
seria-preload.gif

The next step is to add markup for plugin



		
	
		
		
			
				
					<img src="pictures/pic1.jpg" alt="Picture">
					Caption for photo #1
				
			
			
				Photo title #1
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
				Aenean commodo ligula eget dolor. Aenean massa.
			
		
		
		
			
				
					<img src="pictures/pic2.jpg" alt="Picture">
					Caption for photo #2
				
			
			
				Photo title #2
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
				Aenean commodo ligula eget dolor. Aenean massa.
			
		
		
		
			
				
					<img src="pictures/pic3.jpg" alt="Picture">
					Caption for photo #3
				
			
			
				Photo title #3
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Basically you have container DIV with class .seria. Inside you have UL list with class .seria-list. Every LI item in that list has .seria-photo and .seria-about DIVs with appropriate content. You can have as manu LI items as you want!

When you have finished with the markup it's time to init plugin. To do so you should add following JS code into the <head> section of your index.html below the line where you linked jquery.seria.min.js file

<script type="text/javascript">
	$(document).ready(function(){
		$('#seria_1').seria({
			delay: 300
			easing: 'easeOutQuint'
		});  			
	});
</script>

If you want to use Seria with another JavaScript library like, for example prototypejs you should write init code in no-conflict mode as explained in this guide - http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

3. Plugin options

Below you can find plugin options with short explanation what they do

// default settings
var s = $.extend({
	css3: true,					// enable css3 transitions
	mode: 'carousel',			// scroll mode ("normal" or "carousel")
	delay: 0,					// scroll delay, ms
	duration: 500,				// scroll duration, ms
	easing: 'swing',			// scroll easing
	fade: 'none',				// description fade type ("none", "horizontal" or "vertical")
	fadeDuration: 300,			// description fade in/out duration, ms
	fadeEasing: 'swing',		// description fade easing
	fadeOffset: 40,				// fade effect pixel offset ("horizontal" or "vertical" fade type)
	fadeSync: false,			// sync description fade with scroll
	height: false,				// height of Seria container, px
	maxWidth: false,			// max-width of Seria container, px or % (usually image width)
	adjacentVisible: 70,		// visibility of adjacent photos (0 - not visible, 100 - fully visible)
	adjacentOpacity: 0.8,		// overlay opacity for adjacent photos (0 - 1)
	adjacentColor: '#fff',		// rgb color overlay for adjacent photos
	rewindFast: true,			// rewind fast or one-by-one (pagination)
	startWith: 0,				// item to display when plugin loads (zero-based number)
	centerImages: true,			// center images
	photoExpand: true,			// enable photo expand to bigger size
	photoExpandStyle: "style1",	// available styles - "style1" or "style2"
	photoPanning: true,			// enable panning on expanded photo
	navigation: true,			// enable navigation
	pagination: true,			// enable pagination
	onReady: function(){},		// ready callback
	onStart: function(){},		// scroll start callback (previous item, direction)
	onEnd: function(){},		// scroll end callback (current item, direction)
	onExpand: function(){},		// photo expand callback (current item)
	onCollapse: function(){}	// photo collpase callback (current item)
}, c);

4. Callbacks

This section explains Seria callbacks that you already might have noticed above. Inside all these functions "this" keyword refers to DOM node for Seria container.

onReady() - runs as soon as all images will be loaded by the browser

onStart(item, direction) - runs on start of every scroll. Accepts two arguments - DOM node for active LI item in .seria-list when scroll starts and scroll direction that can be "up" or "down"

onEnd(item, direction) - runs as soon as scroll ends. It also accepts two arguments. The first one is DOM node for LI item in .seria-list that will become active when scroll ends. Second argument is scroll direction - "up" or "down"

onExpand(item) - runs when you click expand button to enlarge photo. Function accepts single argument which is DOM node for current LI item in .seria-list

onCollapse(item) - runs when enlarged photo is collapsed back to initial state. Function accepts one argument which is DOM node for current LI item in .seria-list

5. API

Seria plugin provides following API methods

oneup() - method to scroll one item up
onedown() - method to scroll one item down
rewind(n) - method to scroll to particular item by index (zero-based index)
expand() - method to enlarge (expand) photo
collapse() - method to collapse photo

To invoke these API methods you should use jQuery trigger() or triggerHandler() functions. First argument to trigger() should be set to "seria" custom event type. Second argument will be API method name. For example to scroll one item up use this code

	$('#seria_1').trigger("seria", "oneup");

There is one method however that requires additional argument. It's called rewind(). Here is how to call rewind() to scroll Seria to fourth item (see http://api.jquery.com/trigger/)

	$('#seria_1').trigger("seria", ["rewind", 3]);

6. Mobile Layout

By default Seria plugin switches to mobile layout when screen width is or becomes less than 767px. If you want to change this value (for example you use responsive framework with specific set of grid widths) you need to open css/seria.css and find following media query @media only screen and (max-width: 767px) and simply replace 767px with another value

Thanks for reading!

Seria - jQuery Slideshow Plugin