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="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </ 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>


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>

JScrollPane is a jQuery plugin that allows us to give a visual aspect to the scroll bars of any element, something that Internet Explorer is very simple because it just use CSS but the other browsers has never been implemented, something rare and absurd but there is everything in this world.

To use it, we obviously need to load jQuery from the Google libraries so before </ head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' /> <script type='text/javascript'

Here is an optional script that will allow us to use the mouse wheel:

<script type='text/javascript' src=' URL_mousewheel.js' />

and finally the plugin itself, either in its standard version or minimized:

<script type='text/javascript' src=' URL_jscrollpane.min.js' />

If you do not want to use external files, the latter two can be added directametne in the template:

<script type='text/javascript'>
//<![ CDATA [
/ / Here paste the contents of mousewheel.js
/ / Here paste the contents of jscrollpane.min.js
//]]>
</ Script>






And call the function using the class that we defined:

<script type="text/javascript">
$ (Function () {$ ('. Scroll-pane'). JScrollPane ();});
</ Script>

The possibilities are multiple, in the developer page there are several explanatory demos which combines the bar, you add buttons, etc.

Text Fade Out is an idea of CSS-Tricks that uses jQuery to create a text-blurs, cutting at a certain height and adding a button to expand.
Obviously, you must have added the jQuery library before </ head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript'/>

And then the script with the effect is very short :

<script type='text/javascript'>
//<![ CDATA [
$ (Function () {
var $ a, $ ps, $ up, totalHeight;
$ (" . textfadeout-demo. textfadeout-button . ") click (function () {
totalHeight = 0
$ A = $ (this);
$ P = $ el.parent ();
$ Up = $ p.parent ();
$ Ps = $ up.find ("p: not (' . textfadeout-more ')");
$ Ps.each (function () {totalHeight + = $ (this). OuterHeight ();});
$ Up.css ({"height": $ up.height (), "max-height": 9999})
. Animate ({"height": totalHeight});
$ P.fadeOut ();
return false;
});
});
//]]>


</ Script>



Already, now we use the three classes defined to create the HTML:


<Div class = " textfadeout-demo ">
<p> ....... the text to display ....... </ P>
<P class = " textfadeout-more "> <a href =" # "class =" textfadeout-button "> read more </ a> </ p>
</ Div>

Example :