FerroSlider jQuery Plugin
January, 03 2014
Version 2.3.3
Requirements:
Compatibility : firefox chrome safari internet explorer opera android ios
PAY ATTENTION: From now on, versions previous than 2 are no more supported.
Downloaded 43952 times
This plugins allows you to organize the contents of you website in a unusual and cool way and navigate through them with a sliding effect.
The final effect is similar to Mac's or Linux multiple desktops.
You can position content as you want: by row, by column or using a custom displacement.
FerroSlider 2 is really simple to use, due to the multiple available plugin's options.

If you like this plugin, find it useful and want to contribute to it's development , please donate with paypal:


For any comment, bug, personalization request or doubt, you can send me an email to madferro@gmail.com, or use the comments section.
Features
FerroSlider 2 allows you to:
How to use
1. Include nessesary JS files
You need to include FerroSlider 2's css and source javascript file.
Obviously you need to include jQuery library and jQuery Transit plugin to provide transitions.

2. Create an HTML content
Create the elements that will be organized by the plugin, e.g. : 
<div id="div1" class="slidingSpaces" title="Page 1">
	first page
</div>
<div id="div2" class="slidingSpaces" title="Page 2">
	second page	
</div>
<div id="div3" class="slidingSpaces" title="Page 3">
	third page	
</div>
<div id="div4" class="slidingSpaces" title="Page 4">
	fourth page	
</div>
<div id="div5" class="slidingSpaces" title="Page 5">
	fifth page	
</div>

3. Let's rock!!!
Fire plugin using jQuery selector. 
$(document).ready(function() {
	$('.slidingSpaces').ferroSlider();
});
The initialization is called giving the jQuery selector of each element to be organized by FerroSlider 2 (in our example every div has the class attribute set to 'slidingSpaces').
If the initialization is called as above, the plugin will use it's default values, otherwise you can give some custom parameters, e.g. : 
var matrix = [
	[
		{full:0},{full:1,moveDirection:'yx'},{full:0}
	],
	[
		{full:1},{full:1,first:true},{full:1}
	],
	[
		{full:0},{full:1,moveDirection:'yx'},{full:0}
	]
];

$(document).ready(function() {
	$(".slidingSpaces").ferroSlider({
		axis					: 'xy',
		displace				: displace,
		createMap				: true,
		mapPosition				: '85%_center',
		createSensibleAreas 	: true
	});
});
Read the Advanced Options section for a deeper explanation of custom parameters.
Advanced Options
The available parameters for this plugin are the following:

Parameter Available values Default value Description
ajaxLoading true | false false use AJAX to load contents
ajaxScript path to the script null script used to load contents via AJAX
autoSlide true | false false use it for image galleries. If set to true the sliding effect will be fired automatically
autoSlideTime number 5000 autoslide transition time
axis 'xy' | 'yx' null transition path. With 'xy' transition first moves horizontal then vertical, with 'yx' first vertical then horizontal. With default value (blank) transition moves in every direction: horizontal, vertical or diagonal.
container jQuery selector 'none' container of sliding contents. By default the container is the <body> element
createLinks true | false false create navigation links
createMap true | false false create navigation map
createPlayer true | false false create a visual player to manage transitions (play/pause, go next slide, go previous slide)
createSensibleAreas true | false false create sensible areas at the edge of the slides. They will appear when you move over the edge of the slide
createTimeBar true | false false create a visual countdown timebar as visual feedback of autosliding
displace 'row' | 'column' | <object> 'row' displacement mode of the contents. By default they're positioned as row. With 'column' they'll be displaced as a column. You can pass an <object> that defines the position of every single content. This is "The Matrix". For a deeper explanation of this option see The Matrix section.
disableSwipe true | false false disable swiping feature
easing any standard easing provided by CSS3 transition property 'ease' easing function to use for the transition. See "Transitions" section at jQuery Transit's homepage.
linksPosition 'top_left' | 'top_center' | 'top_right' | 'bottom_right' | 'bottom_center' | 'bottom_left' | 'center_right' | 'center_left' | 'center_center' | [custom pixels or percentage positioning] bottom_center set the position of the navigation link. The value is composed by <vertical position>_<horizontal position>.
Vertical position can be 'top', 'bottom', 'center', pixels (e.g. 10px) or percentage (e.g. 10%).
Horizontal position can be 'left', 'right', 'center', pixels (e.g. 10px) or percentage (e.g. 10%)
linksStyle 'row' | 'column' row display navigation links like a row (inline) or a column (like a list)
mapPosition 'top_left' | 'top_center' | 'top_right' | 'bottom_right' | 'bottom_center' | 'bottom_left' | 'center_right' | 'center_left' | 'center_center' | [custom pixels or percentage positioning] 'bottom_right' set the position of the navigation map. The value is composed by <vertical position>_<horizontal position>
Vertical position can be 'top', 'bottom', 'center', pixels (e.g. 10px) or percentage (e.g. 10%).
Horizontal position can be 'left', 'right', 'center', pixels (e.g. 10px) or percentage (e.g. 10%)
playerPosition 'top_left' | 'top_center' | 'top_right' | 'bottom_right' | 'bottom_center' | 'bottom_left' | [custom pixels or percentage positioning] 'bottom_center' set the position of the player. The value is composed by <vertical position>_<horizontal position>.
Vertical position can be 'top', 'bottom', 'center', pixels (e.g. 10px) or percentage (e.g. 10%).
Horizontal position can be 'left', 'right', 'center', pixels (e.g. 10px) or percentage (e.g. 10%)
preventArrowNavigation true | false false prevent navigation with keyboard arrows
swipeTime number 100 minimum number of milliseconds to accept a swipe action
swipeTreshold number 80 minimum number of swiped pixels to accept a swipe action
time number 300 transition time in millisecs
timeBarPosition 'top' | 'bottom' 'top' position of the timebar: at the top of the container or at the bottom
timeBarInsidePlayer true | false true encapsulate timeBar inside player. The position of the timeBar is still specified with the timeBarPosition parameter: with top timeBar will be rendered over the player, with bottom it will render under the player
tips true | false false render map title attribute with nice tooltips
tipsPosition 'top' | 'right' | 'left' | 'bottom' 'top' position of tooltips related to the navigation dot

The Matrix
"The Matrix" is an object that allows you to position the contents following a custom map.
With this special object you can define a grid of placeholder, where the contents will be placed.
This object reflects a mathematic matrix, where every cell is a little object that defines his contents behaviour.
Pay attention: Every object can behave in a different way!
Every cell contains an object that can use some parameters. Some of this parameters will overwrite the value of the generic parameter with the same name mentioned above.
Matrix available parameters:
Parameter Available values Default value Description
ajaxLoading true | false value of the generic 'ajaxLoading' param use AJAX to load contents. Overwrites generic 'ajaxLoading' value. The script used to load content via AJAX is the same defined by 'ajaxScript' generic param
first true | false false if set to true the object will be the first to be shown
full 0 | 1 0 if set to 1 in this cell will be placed a content, otherwise it will be empty
moveDirection 'xy' | 'yx' value of the generic 'axis' param defines the axis sequence in transition when moving from this element on. The behaviour is the same as the generic 'axis' param, but applies only to the object where is set
Let's see an example to better understand "The Matrix".
The matrix showed below: 
var matrix = [
	[
		{full:0},{full:1,moveDirection:'yx'},{full:0}
	],
	[
		{full:1},{full:1,first:true},{full:1}
	],
	[
		{full:0},{full:1,moveDirection:'yx'},{full:0}
	]
];
defines a "cross layout", where your content are displaced like the following image (real example taken from francescomugnai.com):


If an element of the matrix has the 'first' parameter set to 'true', after the initial rendering of the pages FerroSlider 2 will show that element as the starting slide.
Notice that in the top and in the bottom cell the parameter 'moveDirection' is set to 'yx'. This will cause animation moving from those contents first following the vertical axis and then the horizontal. So if from second page you want to go to the third, the path will be "second page" - "first page" - "third page"
AJAX loading
Contents can be loaded only when needed via AJAX.
Realizing this is very simple: you must only set the 'ajaxLoading' parameter to true and set the path of the script that will load contents with the 'ajaxScript' parameter, and obviously, write the script.
The script can be written in any language compatible with the jQuery AJAX machine.

Pay attention: when using AJAX, FerroSlider 2 calls the script giving the id of the element where the contents will be loaded. This is realized by an HTTP Request like this:

<path_to_script>?id=<id_of_the_element>

So in your script you can switch the contents to be loaded only by checking this value.
Ok I think an example will explain everything better, so here it is.
Let's see what I used in the third demo.
Here's the HTML: 
<div id="div1" class="slidingSpaces demo2" title="Page1"></div> 
<div id="div2" class="slidingSpaces demo2" title="Page2"></div>
<div id="div3" class="slidingSpaces demo2" title="Page3"></div>
<div id="div4" class="slidingSpaces demo2" title="Page4"></div> 
<div id="div5" class="slidingSpaces demo2" title="Page5"></div>
Here's the Javascript: 
$(document).ready(function() {
	$(".slidingSpaces").ferroSlider({
		ajaxLoading	: true,
		ajaxScript	: 'ajaxLoading.php',
		displace 	: 'column',
		easing		: 'snap',
		createMap	: true,
		mapPosition	: 'center_right'
	});
});
And this is the script that loads contents (written in PHP): 
echo "
Content of ".$_REQUEST['id']." loaded!

	

	Lorem ipsum dolor sit amet [...] //long text
As you can see the returned content is a very simple string, but you can check the given id to provide more complex contents.
The contents will be loaded only once, and then will be available until the page will be refreshed.
Using AJAX is recommended only for heavy contents, such as big images, very long text, videos, music and so on.
Background images
The background image management has been changed in FerroSlider 2.
Now, if you want a slide to have a background image, you only have to specify the path to image in a custom HTML5 attribute, named 'data-bgimage'.
For example (example taken from demo n°5): 

	
		Content of <div4>
Going mobile
Thank to CSS3 transitions, FerroSlider 2 permforms now much better on mobile devices than in the past versions.
It provides swipe navigation in the four directions : left, right, top and bottom. With simple finger swipe you can slide through pages.
Some functionalities are not available for mobile devices, they are;
This plugin is supported by a large range of devices, however it needs always a lot of testing. If you want to contribute go to the Beta tester section.
Public functions
FerroSlider 2 provides five public methods that can be called from outside:
Function Parameters Description
$.fn.ferroSlider.disableSwipe(flag) flag: true | false disable sliding feature according to the flag parameter: if true the swiping feature is disabled, if false is enabled. Useful combined with the events to disable swiping features on certain slides, see demo 7
$.fn.ferroSlider.getActualSlideId() - return the id of the current slide. No parameters provided
$.fn.ferroSlider.play() - plays auto transitions. No parameters provided
$.fn.ferroSlider.pause() - pauses auto transitions. No parameters provided
$.fn.ferroSlider.slideTo(id) id : the id attribute of the element to slide to slide to a certain element
$.fn.ferroSlider.slideToNext() - slide to next element. No parameters provided. If current element is the last, slide to first element
$.fn.ferroSlider.slideToPrev() - slide to previous element. No parameters provided. If current element is the first, slide to last element.

Events
FerroSlider 2 provides two custom events: startslide and endslide. The first is fired at the start of sliding transition, the second obviously at the end.
These events add two objects to the jQuery $.event object: moveFrom and moveTo. Each one of this object has some information inside: To catch this events, you can do like this: 
$(document).ready(function() {
	$(document).bind("startslide",function(){
		//do stuff
	});
			
	$(document).bind("endslide",function(){
		//do stuff
	});
});
For a more detailed example, see this demo;
Demos
Here's a list of some examples of different FerroSlider 2 configurations:
  1. no custom attributes, everything's default. Navigation only by key press (left and right arrow), drag or swipe;
  2. default layout (row), custom easing, navigation map bottom_center positioned;
  3. column layout, custom easing, navigation map center_right positioned, ajax loading;
  4. custom layout ("L" layout), custom easing, default transition axis, navigation map bottom_left positioned, contents in container, navigation links bottom_center positioned and with row layout;
  5. custom layout ("Cross" layout), custom easing, custom transition axis, background images;
  6. image gallery: autoslide with transition time of 5 secs, player bottom_10px positioned with timebar inside below, navigation map bottom_right positioned, tooltpis, container;
  7. row layout, sensible areas, console that shows event management. In slide 2 the swiping feature is disabled;
Some real and cool examples :
Download
Get the latest version of FerroSlider 2: download FerroSlider 2.3.3 .
Contacts
For any comment, bug, personalization request or doubt, you can send me an email to madferro@gmail.com.

   

Changelog
Beta tester
If you're interested in becoming a Beta tester, you are a great human being and I really appreciate it :)!!!
Please send me a message using the form below, giving your correct contact email.

Name

Email

Message


Send request


Comments
Leave a comment here if you want.

Name

Comment


Send comment