Your Ad Here

JqFancyTransitions is a jQuery plugin that allows you to create an image gallery with different transition effects between them.
To use it we have jQuery in the template so if you do not have it before </ head> add the library directamenete from Google:

<script type="text/javascript" src=""> </ script>

And below, the plugin, either by loading from a server where you have previously hosted:

<script type="text/javascript" src=" URL_jqFancyTransitions.js "> </ script>

or copy and paste the code and placing it between tags:

<script type="text/javascript">
//<![ CDATA [
... here copy and paste the contents of the file ...
</ Script>

You do not need anything else, now, to use, we have several alternatives that we can see explained in the page developers but the simplest is to place the images in a DIV like this:

<div id=" migaleria ">
<img src="URL_image1" />
<img src="URL_image2" />
<img src="URL_image3" />
... and continue to add as many pictures as you want...
</ Div>

Then call the function:

<script> $ ('# migaleria'). jqFancyTransitions ({options}) </ script>

We have several galleries on the same page, each identified by an ID attribute different (in this example migaleria) and the options are parameters to be added separated by commas:

Width and height set the size
Effect is the type of transition and may be wave, zipper or curtain
Position is the position from where you start transciĆ³n and may be alternate, top, bottom, alternate or curtain
Direction is the direction and may be fountainAlternate transciĆ³n, left, right, alternate, random or fountain
Delay is the time delay remains the imaegn visible (default is 5000 or 5 seconds)
Strips is a number indicating the number of "pieces" in which the image desompone (default 20)
StripDelay is the time that remains visible each "piece" (default 50)

Other options let you control who can add text to images, placing them in the alt attribute:

<img src="URL_imagen1" alt="Text to show" />

TitleOpacity indicates the opacity of the text
TitleSpeed ​​is the time it takes to be shown

Alternatively, we can use images instead of links

<a href=" URL_imagen1 />

In that case, the options are two:

Navigation can be true or false and add navigation buttons.
Links can be true or false to set whether images are links or not.

In this example, the options used are the simplest and the function called this way:

<script> $ ('# migaleria'). jqFancyTransitions ({width: 640, height: 400, direction: 'random', delay: 2000, effect: 'wave'}); </ script>