“AviaSlide” Documentation by “Kriesi” v1.0


“AviaSlide - a jquery Slideshow plugin”

Created:23/05/2010
By: Christian "Kriesi" Budschedl
Email: Kriesi

Informations about Updates and New Themes are always announced on Twitter and Facebook. Twitter updates are usually more up to date, facebook updates are more detailed and easier to follow :)




Hello! First of all I would like to thank you for purchasing my script! :)
If you have any questions that are beyond the scope of this help file, please feel free to ask your question on the item discussion page.

This file will teach you how to set up and use the “Aviaslider”. It's actually not rocket science to use and you might just take a look at the different template files to understand most of the stuff, but especially the usage of some javascript options might be a little bit complicated sometimes :)

Have fun with your new theme!
Best regards
Kriesi


Table of Contents

  1. HTML Structure
  2. CSS Files and Structure
  3. JavaScript
  4. Sources and Credits

1) Folder Structure - top

A) HTML Structure - top

The HTML is valid html 5 and might be the easiest part of the whole script :)
The script pretty much works on every setup of html if configured correctly but out of the box its adjusted to work with an unorderd list with images inside:

<ul class="aviaslider" id='slider1'>
<li><a href="images/slides/1.jpg" title=""><img src="images/slides/1.jpg" alt="" /></a></li>
<li><a href="images/slides/2.jpg" title=""><img src="images/slides/2.jpg" alt="" /></a></li>
<li><a href="images/slides/3.jpg" title=""><img src="images/slides/3.jpg" alt="" /></a></li>
<li><a href="images/slides/4.jpg" title=""><img src="images/slides/4.jpg" alt="" /></a></li>
</ul>
		

If you want to see image captions just add content to the alt tag of the image, it will be automatically converted by the javascript:

<img src="images/slides/2.jpg" alt="A heading :: a description here" />

Since we cant use html markup within the alt tag there is a little trick you can use to create a heading for the descriptio as well as a description text:
Inside the alt tag first write down what you want to be your heading and follow it up with two colons "::", then write down the discription. The script will generate an additional html tag arround the "heading" so you can style it with css :)

To change the html markup of the slider (for example if you want to use nested divs instead of an unordered list you simply need to change an option in your javascript when calling the script, I will describe that in a few seconds in the Javascript section.


B) CSS Files and Structure - top

The CSS was created with simplicity in mind, if you look at the stylesheet you will notice it is separated within to areas: one that holds all code needed for the slider which is in fact very little. the remaining code is needed to style the demo page.

Classes you might need:

C) JavaScript - top

The script comes with quite a few options to modify the slideshow transition and general behaviour. In general most of the time you only need to set 3 or 4 options for a compeltly different slideshow experience, allthough there are many more options. I will first describe what each option does and will then list a few slideshow examples.

Basically the script gets called the following way (assumed we got the ul markup described above):

$('#slider1').aviaSlider();

This would be a call without options, therefore we would create a basic fade slideshow where images blend in one after each other without any special fancyness :)

If you want to call the script with some additional options that would look like this:

$('#slider1').aviaSlider({option1:"optionValue", option2:"optionValue", option3:"optionValue"});

Available Options:

blockSize: {height: 'full', width:'full'} - the size of the blocks in px or if a block should stretch across the whole image use the keyword full
Examples:

blockSize: {height: 'full', width:'full'} // default value
blockSize: {height: 80, width:80}
blockSize: {height: 'full', width:20}

This is the most important setting we got since it sets up how many blocks we got and also how big the should be: you could for example create only one fullwidth block and the slider would then behave like a basic fading slideshow since there is only one block to fade and that one has exactly the height and width of the images:
Fading Slider

Or you can set many small blocks with height and width of about 80px to create the fancy cube animation:
Diagonal Blocks

Or create blocks that differ in height and width so that they either are full width or full height stripes:
Dropping Curtain
Fading Slider

This options basically sets the tone for the whole slideshow. However please be aware of the following: the more blocks the script needs to create and animate the more resources are needed. So I would highly recommend to not create squares that are smaller than 15px * 15px


slides: wich element inside the container should serve as slide
Examples:

slides:"li"			//default value
slides:".featured"
slides:"div"

So if you would want to use nested divs instead of the unordered list you could set slides to ".featured" and use this markup instead:

<div class='aviaslider' id="frontpage-slider">
<div class="featured"><a href="images/slides/1.jpg" title="" ><img src="images/slides/1.jpg" alt="" /></a></div>
<div class="featured"><a href="images/slides/2.jpg" title=""><img src="images/slides/2.jpg" alt="" /></a></div>
<div class="featured"><a href="images/slides/5.jpg" title=""><img src="images/slides/3.jpg" alt="" /></a></div>
</div>

autorotation: once preloading has finished should the slider start autorotationg
Examples:

autorotation: true		//default
autorotation: false

autorotationSpeed: if autorotation is activated how long should each image be shown before changing the slide
Examples:

autorotationSpeed:3		//default
autorotationSpeed:8
autorotationSpeed:20

slideControlls: should the controll bullets be displayed or not
Examples:

slideControlls: 'items'		//default	
slideControlls: 'none'

appendControlls: the controlls are added to the html source code dynamically after this element
Examples:

appendControlls:""			//default (if empty they are added bellow the slideshow)
appendControlls:"body"
appendControlls:"#id-of-choice"

betweenBlockDelay: if the tranistion starts this duration sets the time delay between the appearance of each single block (value are miliseconds, the higher the number the slower the blocks fade)
Examples:

betweenBlockDelay:60		//default
betweenBlockDelay:30
betweenBlockDelay:200

animationSpeed: how long does it take for a single block to fade (value are miliseconds, the higher the number the slower the blocks fade)
Examples:

animationSpeed:900		//default
animationSpeed:2000		

transition: which image transition for a single block do we want: 3 set values: fade, slide and drop.
Examples:

transition: 'fade'			//default
transition: 'slide'
transition: 'drop'

When set to fade the block will just fade in from opacity 0 to 1
When set to slide the block will fade in from opacity 0 to 1 and in addition change its height and with, starting from 1px *1px, transforming to the size set in the options
When set to drop the block will fade in from opacity 0 to 1 and move down from the top


display: the animation pattern of the blocks
Examples:

display: 'diagonaltop'
display: 'diagonalbottom'
display: 'topleft'				//default
display: 'bottomright'
display: 'random'
display: 'all'

This sets the order in which the blocks are changing so they either fill row by row from top to bottom or vice versa or slide in diagonally or completly at random.
When set to "all" the first image transition will use diagonaltop, the second one will use diagonalbottom, the third topleft and so on. this will repeat after every 5 transitions. The option "all" basically calls a predefined transition order that can be set with the next option:


if display is set to "all" you can set a transition order
Examples:

transitionOrder: ['diagonaltop', 'diagonalbottom','topleft', 'bottomright', 'random'] //default 
transitionOrder: ['random', 'random','topleft']
transitionOrder: ['diagonaltop', 'diagonalbottom','diagonaltop' 'random']

switchMovement: changes the transition direction to the opposite after each slide. for example switches between topleft and bottomtight when "display" is set to topleft. or if "display" is set to diagonaltop it switches between diagonaltop and diagonalbottom
Examples:

switchMovement: false		//default
switchMovement: true

showText: shows image caption if alt text is defined
Examples:

showText: true			//default	
showText: false

backgroundOpacity: background opacity of the image caption background
Examples:

backgroundOpacity:0.8	//default
backgroundOpacity:1
backgroundOpacity:0.2

Example Slider:

These are the slideshows I used on my demo page with added options. As cou can see most of the times it is only a matter of changing a few option to achive a completly different result, so most of the time you simply dont need to specify all options. When copy/pasting these examples please make sure to change the id that gets selected either in the script or in addapt the html source code :)

Example
$('#frontpage-slider').aviaSlider({	
	blockSize: {height: 80, width:80},
	transition: 'slide',
	display: 'all',
	transitionOrder: ['diagonaltop', 'diagonalbottom','topleft', 'bottomright', 'random']
});

Example
$('#diagonal-blocks').aviaSlider({	
	blockSize: {height: 80, width:80},
	transition: 'slide',
	display: 'diagonaltop',
	switchMovement: true
});	

Example
$('#winding-blocks').aviaSlider({	
	blockSize: {height: 80, width:80},
	transition: 'slide',
	display: 'topleft',
	switchMovement: true
});								

Example
$('#randomized-blocks').aviaSlider({	
	blockSize: {height: 80, width:80},
	transition: 'slide',
	display: 'random'
});

Example
$('#droping-curtain').aviaSlider({	
	blockSize: {height: 'full', width:40},
	display: 'topleft',
	transition: 'drop',
	betweenBlockDelay:80,
	animationSpeed: 800,
	switchMovement: true,
	slideControlls: 'items',
	appendControlls: '.aviaslider'
});	


Example
$('#fading_curtain').aviaSlider({	
	blockSize: {height: 'full', width:40},
	display: 'topleft',
	transition: 'fade',
	betweenBlockDelay:150,
	animationSpeed: 600,
	switchMovement: true
});

Example
$('#fading-top-curtain').aviaSlider({	
	blockSize: {height: 40, width:'full'},
	display: 'topleft',
	transition: 'fade',
	betweenBlockDelay:150,
	animationSpeed: 600,
	switchMovement: true
});	

Example
$('#fullwidth-fade-slider').aviaSlider();

Example
$('#direction-fade-slider').aviaSlider({
	blockSize: {height: 3, width:'full'},
	display: 'topleft',
	transition: 'fade',
	betweenBlockDelay:10,
	animationSpeed: 400,
	switchMovement: true
});

Additional Javascript

Just to note: the scriipt comes bundled with a custom image preloader that is defined in the jquery.aviaSlider.js and jquery.aviaSlider.min.js files. This preloader loads images of the slideshow before displaying them so you dont get any clumpsy animations with half loaded images.

The script also calls the prettyPhoto Lightbox plugin in custom.js at line 6:

jQuery('a[href$=jpg], a[href$=png], a[href$=gif], a[href$=jpeg]').prettyPhoto({theme: "light_square"});

if you dont want to use the lightbox just remove this line of code


G) Sources and Credits - top


Once again, thank you so much for purchasing this piece of software. As I said at the beginning, I'd be glad to help you if you have any questions relating to this script. No guarantees, but I'll do my best to assist.

Best regards

Kriesi

Go To Table of Contents