Articles, Resource by Muahammad Usman 8 Comments »

Overview:

I have received too many requests for a Bangla Font for Android. Unfortunately Android is not so matured in handling Unicode and Complex Script and there was no way of installing new font without rooting the device, but Samsung has come up with a great way allowing installing fonts. So I have created this Bangla Font which will work on Samsung Devices or other devices with custom font support, so now you can see Bangla in Applications, but don’t get too excited, the complex script (Jukto Borno and so) may not appear correctly in some devices, also some carriers may create some problems. I have tried a lot to solve the issue but I couldn’t, well I said Android is not that matured in that way. So this Font comes without any warranty, so I haven’t published it in the Android Market.
There is a proverb in Bangla:
নাই মামার চেয়ে কানা মামা ভাল

So please try to be happy at least now you can see Bangla in your apps without rooting the device

Installation:

• First of all don’t use Opera Mini browser for any of the step below, use Android’s default browser.
• Go to your device’s Settings > Application and make sure “Unknown sources” is checked. If you see any warning click OK.
• Download the Font file to your Phone or Tablet from this link http://j.mp/banglaf .
  Either go to browser and type this link http://j.mp/banglaf
  Or Scan the QR Code below with your Barcode Scanner app and go to the link (by tapping “Open browser” button)
  
  
  
  Or Download the file in your PC and transfer to Phone http://j.mp/banglaf
• Open the downloaded file by tapping, in your device and Install
• Go to Settings > Display > Font style and Select BanglaFont, tap OK then tap “Restart now”.

That’s it. Now start your device’s browser and visit the link http://j.mp/bangladroid if you see the idiom (nai mama) above then it’s okay.

If you like this please click the Facebook Like below or share this with your friends. You can also revert to the old font if you wish.

Project, Resource by Muahammad Usman 2 Comments »

Now you can Write cross platform Phonetic Bangla accross the web. No matter what the Operating System is, you can write phonetic Bangla in Facebook, Google, Yahoo or any other website with Google Chrome. You do NOT need any other software to be installed in order to use this. Rich text editors are not working with Bangla yet, we are working on it.

Download the Extension from Chrome Web Store.

Press CTRL + Q to switch between Bangla and English.

Just type and press Space and or Enter and it will be converted to Bangla.

Its powered by Avro, thank you Avro Team.

Enjoy

Articles, Lab Tools, Project by Usman No Comments »

This time I have a Gift for you. Its Stunning, Multiple Skin WordPress Theme allowing you full customization. Here are some of the features to rock you:

• Great Eye-catching Look.
• Multiple Skins – which will change the look of your site, you can develop your own skins.
• Fully Configurable Slideshow – show or hide it wherever you want.
• Unlimited Submenus – adjust automatically with screen edge
• Hybrid Look – you can use it on a blog site or a simple website or in a combination.
• Built-in Social Media + Widget
• Featured Post Widget
• Google Analytics Integration
• Custom Blog Menu
• WordPress 3.x.x Menus
• Pleasing Menu Animation
• More than 40 Formatting Styles with Shortcodes
• And lot more …

Its an open source project which is in beta stage, you can contribute to the project at github. Its released under BSD License and I don’t expect you to use it in ill tasks.

See a live DEMO of this site (after 5 mins it will be on original look)

Download from Here
if you don’t know how to install WordPress themes then read this tutorial.

Here is a list of shorcodes, apply these in your posts and see the magic.

Learn how to use shortcodes.

Lines

Example of line. You can omit type, in that case there will be no back to top link.

[line type="back" /]

Columns

Example of Columns

[one_third]

This is an example of one_third column. List of available columns:

one_half, one_third, two_third, three_fourth, one_fourth, one_fifth, two_fifth, three_fifth, four_fifth, one_sixth, five_sixth

[/one_third]

Icons

[icon type="smyle" /]

There are many icon types for you, here is a list:

arrowdown, arrowleft, arrowright, arrowup, callout, circle, dollar, email, equal, exclamanation, handdown, handup, hadright, handleft, handpointer, happy, info, ok, plus, power, question, quote, right, rotate, smyle, wrong and www

Boxes

[box color="lightgray" border_color="blue"]

Example of box, you can omit color and/or border_color for default setting.

[/box]

It requires WordPress 3.0.0 or higher.
Enjoy the the free stuff and don’t forget to share the awesomeness with your friends. Stay tuned for more amazingly free stuffs.

Articles, Lab Tools, Project, Tutorial by Usman No Comments »

If you have developed a large application you may have faced this problem, in some cases we have some settings or options to save in the database but the data is not so large to create a db table for it, also it may do not require many rows. In that case we should have a table for settings, where we can store all our settings or options with a key then retrieve it. Our option can be a text value or an array or an object. WordPress has a really good feature for such cases its the Option Mechanism. By using the appropriate function, options can be added, changed, removed, and retrieved.

I loved this feature too much that I added such feature in my CodeIgniter applications, because I don’t always use WordPress. Now I want to share my code with you which may help you in various tasks. Its not the exact same as WordPress. I have used 4 functions for it add_option, update_option, get_option and delete_option. The good part is you can store a PHP array, object or a string value (including number) with add_option(‘name_of_option’,'value’) or with update_option(‘name_of_option’,'value’) and whenever you retrieve your data with get_option(‘name_of_option’) it returns the data with the same format.
(Sorry, if you have used it in WordPress you may already know it and some info below, but its for those who haven’t used).

You may download the code from github, also any contribution is highly appreciated.

Functions:

add_option(‘name_of_option’,'value’) will store data in the db with ‘name_of_option’ if the ‘name_of_option’ is already used it will return false, use add_option if you want to store a data for the first time such as installing an app.

update_option(‘name_of_option’,'value’) will update the ’name_of_option’ if it is already used. If ’name_of_option’ is not found it will add ’name_of_option’. So use update_option in general case.

get_option(‘name_of_option’) will return the value of ’name_of_option’ in original data type. Will return false if option is not found.

get_option(‘name_of_option’) will return the value of ’name_of_option’ in original data type. Will return false if option is not found.

Usage Example:

Below is the usage for CodeIgniter controller, I have made it as a CodeIgniter Helper. You will find instructions below on how to implement this Helper. I assume you have database set up in application/config/database.php

public function index()
{
	//load our helper,
	//better to autoload it by editing application/config/autoload.php
	$this->load->helper('option_helper');

	//text value example
	update_option('username','Usman');
	echo get_option('username');
	//array example
	$user_info=array(
		'username'		=>	'Usman',
		'profession'	=>	'Developer',
		'location'		=>	'Sylhet, Bangladesh',
	);
	update_option('user_info',$user_info);
	$return_value=get_option('user_info');
	print_r($return_value);
	echo $return_value['location'];

	//delete example

	delete_option('username');
	//delete_option('user_info');
}

Implementation:

1. Create a table in your database like below (of course its MySQL) :

CREATE TABLE IF NOT EXISTS `tbl_option` (

`option_id` bigint(20) NOT NULL AUTO_INCREMENT,

`option_name` varchar(50) COLLATE utf8_unicode_ci NOT NULL,

`option_value` longtext COLLATE utf8_unicode_ci NOT NULL,

`option_type` varchar(20) COLLATE utf8_unicode_ci NOT NULL,

PRIMARY KEY (`option_id`),

UNIQUE KEY `option_name` (`option_name`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=59 ;

2. As I have made a CodeIgniter Helper for this, keep the code in application/helpers folder (in most cases) and name it option_helper.php. I haven’t used any model for simplicity.

3. Copy the code below and paste it to your option_helper.php, that’s it.

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
function add_option($name,$value)
{
      $CI =& get_instance();
      $CI->load->database();
	$query=$CI->db->select('*')->from('tbl_option')->where('option_name',$name)->get();

	//option already exists
	if($query->num_rows() > 0)
		return false;

	$data_type='text';
	if(is_array($value))
	{
		$data_type='array';
		$value=serialize($value);
	}
	elseif(is_object($value))
	{
		$data_type='object';
		$value=serialize($value);
	}

	$data=array(
		'option_name'=>$name,
		'option_value'=>$value,
		'option_type'=>$data_type,
	);
	$CI->db->insert('tbl_option',$data);
}

function update_option($name,$value)
{
	$CI =& get_instance();
	$CI->load->database();

	$data_type='text';
	if(is_array($value))
	{
		$data_type='array';
		$value=serialize($value);
	}
	elseif(is_object($value))
	{
		$data_type='object';
		$value=serialize($value);
	}

	$data=array(
		'option_name'=>$name,
		'option_value'=>$value,
		'option_type'=>$data_type,
	);
	$query=$CI->db->select('*')->from('tbl_option')->where('option_name',$name)->get();

	//if option already exists then update else insert new
	if($query->num_rows() < 1) return $CI->db->insert('tbl_option',$data);
	else		  return $CI->db->update('tbl_option',$data,array('option_name'=>$name));
}

function get_option($name)
{
	$CI =& get_instance();
	$CI->load->database();
	$query=$CI->db->select('*')->from('tbl_option')->where('option_name',$name)->get();
	//option not found
	if($query->num_rows() < 1) return false; 	 	$option=$query->row();

	if('text'==$option->option_type)
		$value=$option->option_value;
	elseif('array'==$option->option_type || 'object'==$option->option_type)
		$value=unserialize($option->option_value);

	return $value;
}

function delete_option($name)
{
	$CI =& get_instance();
	$CI->load->database();
	return $CI->db->delete('tbl_option',array('option_name'=>$name));
}

If you have found it useful, please comment below. Any bug report or suggestions are most welcome.

Project by Usman 2 Comments »

Its being a long time since we planned to develop a Bangla language related application for Android. After a long discussion we decided to create a Bangla Dictionary based on Google Dictionary. The main-pain was the font, Android is not yet matured enough to handle Unicode. After some challenges we successfully integrated universal Bangla font with our new Android app. We have published the app in the Android Market. The day we published the app totally amazed us with an overwhelming response, we never expected our app will be loved by so many people. Few days ago the total downloads exceeded 5000 with 30 ratings averaging 4.6 / 5 . The number may not be that high for an international audience focusing app, but its real high for Bengali people focusing app. Download the app from the market by clicking here.

Works fine with most devices, some Android devices with less or no complex script(most of these are called Jukto Borno in Bangla) support may show some Bangla words (with Jukto Borno) broken. Devices with complex script support show everything perfectly.

Tutorial by Usman 3 Comments »

Facebook Applications are getting much popular these days, its good, but the bad is Facebook frequently changes its API, which causes the resource and tutorials on this subject to be obsolete. That’s why I decided to write a up to date post on how to create an IFrame based Facebook Application using PHP. I am using PHP SDK (3.1) and Graph API, you have to download PHP SDK from here. Well, I am covering the coding part here and not going through how to create and setup a Facebook Application, if you don’t know how then this article might be a good read.

I will create an app which will show all friends’ name. So we will learn, how to …
-Include PHP SDK
-Authenticate the user
-Set scope or permission
-Get friend list
-Print friends’ names

I am using an index.php file and a folder named fb_sdk which will contain facebook.php and base_facebook.php obtained from Facebook PHP SDK (path_to_php_sdk/src/).  Now we will start writing code in index.php

First we will include the PHP SDK file like below:

require 'fb_sdk/facebook.php';

Now we will instantiate the PHP SDK, here we will provide the Application Id (appId) and Application Secret (secret) obtained from our App settings in Facebook.

$facebook = new Facebook(array(
  'appId'  => 'your_app_id',
  'secret' => 'your_app_secret',
));

Now we will get user info from Facebook to check if the user is authenticated or not

$user = $facebook->getUser();

// We may or may not have this data based on whether the user is logged in.
//
// If we have a $user id here, it means we know the user is logged into
// Facebook, but we don't know if the access token is valid. An access
// token is invalid if the user logged out of Facebook.

if ($user) {
  try {
    // Proceed knowing you have a logged in user who's authenticated.
    $user_profile = $facebook->api('/me');

  } catch (FacebookApiException $e) {
    error_log($e);
    $user = null;
  }
}

Now if the user is not authenticated or user has not allowed our app to access certain info then we will redirect user to a URL called loginUrl to allow our app to access his info. As we need user’s friend list only we are asking for read_friendlists permission only. You can ask for additional permissions if you need, a list permissions can be found here.

// Login or logout url will be needed depending on current user state.
if ($user) {
  $logoutUrl = $facebook->getLogoutUrl();

} else {
  $loginUrl = $facebook->getLoginUrl(array(
            'scope' => 'read_friendlists', //you can add more permissions here separated by commas
			'redirect_uri'=>'https://apps.facebook.com/usman_test_app/' //give your app's canvas URL here, its just example
            )
       );
    //redirect user to loginUrl
    echo "<script type='text/javascript'>top.location.href = '$loginUrl';</script>";
    exit;
}

Now we have permission to access user’s friend list. So we have to get the friend list using the api() function. The returned value will be an array, then we will loop through the array and print the friend’s name.

?>
<!doctype html>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
  <head>
    <title>Facebook App Example</title>
  </head>
  <body>
    <?php if ($user){
			//lets get the friend list
			$friends   = $facebook->api('/me/friends');
			//check if we have a valid list
			if(!is_array($friends))
				exit("Unable to get friend list.");

			//now we will print friend name from array
			foreach($friends['data'] as $friend)
			{
				echo $friend['name'].'<br/>';
			}
	?>

    <?php } ?>

  </body>
</html>

Well we are done now. You have to put index.php and the fb_sdk folder in the root of your app folder. You can access the app by visiting your Canvas URL If you like the post please share it and comment below. Also you can comment if you have any problem or relevant question.

Articles by Usman 5 Comments »

jQuery, a micro JavaScript framework with a lightweight footprint as well, is loved by developers of the generation. It provides scalability for developers by introducing plugin development. Thousands of jQuery plugins overwhelm the web, of which I have selected a few to introduce in this article. Hope these will help you build better web.

1 ) wijmo

wijmo is a collection of awesome jQuery UI Plugins, which are enough to make impressions on users mind, a must check.

View Demo or Download Plugins

2 ) jQuery Cycle Plugin

The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more. It also supports, but does not require, the Metadata Plugin and the Easing Plugin.

View Demo Download Plugin

3 ) zLayer

zLayers is a jQuery plugin that allows you to orientate an element based on the position of your mouse to the page’s window, or element’s parent.

View Demo Download Plugin

4 ) jQTouch

A jQuery plugin for mobile web development on the iPhone, iPod Touch, and other forward-thinking devices

View Demo or Download Plugin

5 ) jQuery Face Detection

An excellent plugin which detects face from photo, almost like Facebook Tagging.

View

6 ) MOUSE OVER ANIMATION FOR TEXT MOATEXT

You can use this jQuery plugin for adding flavor to your web site. By this plugin, text messages on your site are animated on mouse over. jQuery animate function is called for each character of text. You can see very interesting effects so many characters animate at the same time.

View Demo Download Plugin

7 ) FULL 3D JQUERY AND FLASH COMBO CAROUSEL

It will turn an list of images into a full 3D carousel based on the dimensions of the div surrounding the list. jQuery plugin takes the list and embeds the images from the HTML into a dynamically rendered Flash SWF file. Employs Flash 10 for the rendering in full 3D.

View Demo Download Plugin

8 ) ANIMATION SLIDER ROTATION

Tiny Circleslider is a circular slider / carousel. That was built to provide webdevelopers with a cool but subtle alternative to all those standard carousels. Tiny Circleslider can blend in on any webpage.

View Demo Download Plugin

9 ) POPULAR-ON-TWITTER WIDGET

Another Topsy-enabled jQuery plugin to list the most popular posts on your website, from your Twitter timeline or for some keyword within a selected period of time. Links are displayed with number of tweets and score -which is calculated by the influence of the people talking about them and affects on sorting those links.

View Demo Download Plugin

10 ) zWeatherFeed – Yahoo! Weather Plugin

This plugin will read the current weather for a location using Yahoo! Weather. It produces structured HTML with in-built CSS classes for styling. Simple and easy to use.

View Demo Download Plugin

We will be releasing some really cool jQuery Plugins soon, follow us on Twitter to stay updated.

Articles by Halal IT Team 2 Comments »

WordPress is one of the most successful blogging platforms/CMSs (Content Management Systems) on the internet. It is user friendly and customizable. Developers can customize it using it’s built-in functions and APIs without changing the core WordPress, such as making plugins, themes etc.

This tutorial is about making your own WordPress theme, through this I’ll only explain how you can make a WordPress theme. Before you start keep one thing in mind that, this tutorial is going to teach you the very basic, the core part of  WordPress theming, which means if you read this article you will not become a WordPress geek but you can design/create a unique theme for yourself or for public use. So lets start…

What is a WordPress theme: Basically WordPress theme is the user interface of a WordPress bloging site, it defines the look of the site.

Requirements for this tutorial:

1. You need to know PHP, HTML and CSS and basic use of WordPress.
2. A text editor.
3. Several web browsers.
4. A server, local or remote.

Note: Every browser does not produce/show the same output, specially the positioning is a little complicated in Internet Explorer series browsres. So it is very important to test your theme in more than one browsers. I basically test in IE 6,7,8 and Google Chrome.

How WordPress theme works:

1. index.php: WordPress uses index.php file for front page, e.g. when you write your site url on the browser’s address bar WordPress loads index.php and shows it on the browser screen. This file has four parts. Header, Sidebar, Content and Footer.
2. style.css: The style.css file is the style sheet file of the theme. This file is responsible for the look of your theme.
3. header.php: It generates the look of header in index.php file.
4. sidebar.php: This is the sidebar look. This will be used as a navigation bar in your theme and also widgets will be shown here.
5. footer.php: This is the footer look.

Content is the part of your index.php file, like other template files content does not require an individual template file.

** Important: We have discussed about index.php, style.css, header.php, sidebar.php and footer.php files. These files are main files of the WordPress theme. To make a theme these files have to be created first and it is possible to make a theme only using these files but it will be a very basic theme or not a perfect theme at all. So, what makes your theme perfect ? The answer is that, you have to create some more template files. These are:

• archive.php
• single.php
• page.php
• comments.php
• search.php
• searchform.php etc.

There are more but for this tutorial it’s enough, because this is a fundamental tutorial, just a begnning.

I will discuss about these (mentioned above) files later on this tutorial.

** Now we will go step by step and every step is important for this tutorial, so don’t ommit any part of this article, otherwise you wont be able understand it.

Step-1: First of all create a new folder in your wordpresswp-contentthemes folder and give a name related to your theme. WordPress themes are stored in thames folder. So if you want to name your theme “Myblog”, you should create this folder inside the wp-contentthemes, so WordPress can recognize your theme as Myblog.

Step-2: Copy the style.css file came with demo.zip and paste it in your theme e.g. Myblog folder and create an html file and name it index.php in the same folder.

Step-3: Now copy and paste the header.php, sidebar.php, searchform.php, comments.php and footer.php files from Mytheme folder to your new theme folder (Myblog).

Understanding the header.php file:

<title><?php bloginfo('name'); ?></title>

<-- Gets the title of your WordPress blog. -->

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />

<!-- Returns the style.css file’s link with full path/url and name. -->

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />

<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />

<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

Above lines are Standard HEAD for WordPress.

<span class = "blog_title">

<a href="<?php bloginfo('url'); ?>" title="Blog Home"><?php bloginfo('name'); ?></a>

<!-- Returns the blog name. -->

</span>

<br />

<span class="blog_description"><?php bloginfo('description'); ?></span>

<!-- Returns the blog descripton if have any. -->

<?php bloginfo('url'); ?>

<!-- This will link to the homepage of your blog. -->

Understanding the sidebar.php file:

<?php include(TEMPLATEPATH . '/searchform.php'); ?>

<!-- Includes the search form. -->

<?php get_calendar(); ?>

<!-- Adds the calender inside the sidebar. -->

<?php wp_list_cats('show_count=1&title_li='); ?>

<!-- Adds all post cetegories inside the sidebar. -->

<?php wp_get_archives('type=monthly'); ?>

<!-- Lists all monthly archives and shows them inside the sidebar. -->

** Sidebar is the main navigation of your site. Administrator can add widgets in the sidebar from admin panel by drag and drop. If any widget has been added by the administrator to the sidebar then manually (By php codes) added stuff will be gone (php codes will not work), otherwise codes will add items in the sidebar.

Understanding the footer.php file:

This file will only contain the footer content which is common for every page like the copyright.

In my example I have used the php function to show copyright date and added the link of Halal IT Site. Don’t forget to add <?php wp_footer(); ?> in your footer.php else many WordPress plugins don’t work properly.

Step-4: Now open the index.php file you have created before and write the following codes:

<?php get_header(); ?>

<!-- Includes the header.php file. -->

<div id="container">

<!-- The container div,  all contents will come here. -->

<!-- The WordPress loop goes here -->

</div>

<?php get_sidebar(); ?>

<!-- Includes the sidebar.php file. -->

<?php get_footer(); ?>

<!-- Includes the footer.php file. -->

** You have just created the index.php file for the theme. The codes above inside the php tags are WordPress’ built-in functions which includes header, sidebar and footer inside the index.php file. These functions work like include() function of php. The WordPress loop is the main part of the theme. This loop fetches the data from WordPress database and fills the container div with posts. Here it is:

<?php if (have_posts()) : ?>

<!-- If any post exists in database. -->

<?php while (have_posts()) : the_post(); ?>

<!-- fetches them till posts are finished. -->

<div class="post">
<?php the_content() ?>
<!-- Fills posts with post date, post category, post title, post body (the_content() function returns post text) etc and adds comments link. -->

</div>

<?php endwhile; ?>

<!-- Ends the loop. -->

<?php else : ?>

<!-- If post does not exist then Show “Not Found”. -->

<h2>Not Found</h2>

<?php endif; ?>

<!-- Closes if condition. -->

** This is it.

** Here is the list of the Theme files recognized by WordPress. Of course, your Theme can contain any other stylesheets, images, or files. Just keep in mind that the following have special meaning to WordPress.

archive.php

The archive template. Used when a category, author, or date is queried. Note that this template will be overridden by category.php, author.php, and date.php for their respective query types.

search.php

The search results template. Used when a search is performed.

single.php

The single post template. Used when a single post is queried. For this and all other query templates, index.php is used if the query template is not present.

page.php

The page template. Used when an individual page is queried.

comments.php

The comments template

** Archive.php, Search.php, Single.php and Page.php files are all most similar. Only the loop (container div) has been changed a little. But everything is possible by index.php file. But you should use the advantage of WordPress by using those template files in your theme, so copy and paste all the other files from Mytheme folder to your new theme folder (Myblog) and see the difference.

** Things to remember:

Don’t remove following lines from style.css file. These are useful to WordPress to know certain information about your theme. Every line is self descriptive. You are free to change. WordPress will show these information in the admin panel.

Theme Name: My Blog Theme

Theme URI: http://www.halalit.net/blog/wp-content/themes/Mytheme

Description: This is my first WordPress theme.

Version: 1.0

Author: Heera

Author URI: http://www.halalit.net/about

** Screenshot.png file: WordPress uses this file to show a preview of your theme in admin panel, so take a screenshot of your theme and save it in the theme folder with png or jpg extension.

This is a very basic of WordPress theme design recipe. You can a extend it and play through it as you wish.

** You will find more advanced information at http://codex.wordpress.org/Theme_Development.

New Projects, News by Usman 6 Comments »

We have recently come on agreement with Turkish Social Networking Company to build their website and to take the maintenance. Its an offshore web development project. We are really excited to take all the challenges that comes during the website development. Despite it is an offshore web development project we are having great communication with the blessings of technology.

Articles, Lab Tools by Usman 10 Comments »

We have developed a jQuery Effect Plugin for our site to show our testimonials.  This is a rocking plugin which lifts the last element of a parent element to top and slowly takes other elements down. See a demo at our homepage http://www.halalit.net (see the testimonials section). You can download this plugin from here.

Usage:-

Add this to your body section

<div id="testimonials">
<div>
Your 1st text or image.
</div>

<div>
Your 2nd text or image.
</div>
<div>
Your 3rd text or image.
</div>
<!-- You can add as many as you wish-->

</div>

 Javascript

$("#testimonials").uplift({

timeout: 7000, //after how much time the effect starts

speed: 2000,//after starting how quickly effect finishes

show: 3,//how many elements to be visible all the time

easing: 'easeOutBounce'//the jQuery easing effect (requires easing plugin)
});

 That's all, you are done. You can configure it from above as comments suggest.

 Enjoy the plugin with islamic open source license
 (not to be used in non-islamic purpose). 

Allah(/God) is the source of power.

If anyone wants to contribute to the development, just comment here. 

 

Supports all major browsers except Internet Explorer.

-Download the plugin.
-Visit the jQuery Plugin page.
-Visit jQuery Site.