Documentation (Genoa and older) / English / Skins / Adding fancy JavaScript FX to your layouts

Adding fancy JavaScript FX to your layouts Adding fancy JavaScript FX to your layouts

Basic approach to including JavaScript effects in your Cotonti layouts.

[title]Introduction[/title]

This tutorial will show you how to insert already created JavaScript effects in your layouts. I'm not going to teach you how to write the JavaScript code because purpose of this tutorial is Cotonti-JavaScript connection and not learning the basics of JavaScript.

If you want to learn how to write JavaScript code from scratch, I suggest you visit W3 Schools and read their JavaScript tutorials. Also you should learn how to work with JavaScript frameworks/libraries such as jQuery and mootools.

Today I'm gonna show you how to add an image/content slider to your Cotonti skin.

We will be using a jQuery slider called Easy Slider 1.7. The author of this plugin is Alen Grakalic from cssglobe.com. For the complete list of EasySlider options and demos, please visit CSSGlobe.com.

I have been using this plugin in few of my projects and with small tweaking you can get nice results.

Let's begin!

First, you'll have to download the Easy Slider 1.7. You can get it from here: Easy Slider - cssglobe.com

Unzip it somewhere on your local disk and open the easyslider1.7 folder.

Image 1: Files 01.html, 02.html and 03.html are demo previews of this plugin. Check them out!

What's so great about those demo html files is that by viewing their source code you can see what files are necessary for this plugin to work.

For the sake of this tutorial, I'll be using 02.html file. The source code looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Easy Slider jQuery Plugin Demo</title>
	<meta http-equiv="content-type" content="text/html;charset=UTF-8" />    
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/easySlider1.7.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){	
			$("#slider").easySlider({
				auto: true, 
				continuous: true,
				numeric: true
			});
		});	
	</script>
	
<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />	
	
</head>
<body>

<div id="container">

	<div id="header">
		<h1>Easy Slider jQuery Plugin - Numeric and continuous demo</h1>
	</div>

	<div id="content">
	
		<div id="slider">
			<ul>				
				<li><a href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview" /></a></li>
				<li><a href="http://templatica.com/preview/7"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>
				<li><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview" /></a></li>
				<li><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
				<li><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>			
			</ul>
		</div>
			
		<h3>Usage</h3>
	
<pre>$(document).ready(function(){	
	$("#slider").easySlider({
		auto: true,
		continuous: true,
		numeric: true
	});
});</pre>
	
		<p><a href="http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider" title="read more about this jquery plugin">back to the article</a></p>
		
		<p><strong>Easy Slider</strong> jQuery Plugin is brought to you by <a href="http://cssglobe.com" title="web standards magazine and css news">Css Globe</a> and supported by <a href="http://templatica.com">Css Templates</a> by Templatica</p>

	</div>

</div>

</body>
</html>

We now see that in order for this plugin to work, we need to have this lines:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){	
			$("#slider").easySlider({
				auto: true, 
				continuous: true,
				numeric: true
			});
		});	
	</script>
	
<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />

between <head></head> tags in our skin files.
So, where are those tags in our .tpl files?
I bet they are located in our header.tpl file :)

You can also figure out which div container in 02.html file is used for displaying slides from this code:

<script type="text/javascript">
		$(document).ready(function(){	
			$("#slider").easySlider({
				auto: true, 
				continuous: true,
				numeric: true
			});
		});	
	</script>

#slider in the above code refers to div with id="slider". That means that easySlider function will be used for slider div. If you want to learn more about jQuery, please visit jQuery website

Everything between <div id="slider"></div> will be used for displaying image slider on your website. The code:

<div id="slider">
			<ul>				
				<li><a href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview" /></a></li>
				<li><a href="http://templatica.com/preview/7"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>
				<li><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview" /></a></li>
				<li><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
				<li><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>			
			</ul>
		</div>

You'll need to place this code in your .tpl file depending on where you want it to output. This can be any .tpl file!

So, after we figured out what we need and where we want it, we can start modifying our .tpl files!