Some times ago I was working on app where for each category we had to assign random color in case that user didn’t choose one. A few day ago I needed to generate random color again. Instead of copy/paste code from one place to another much better is to create re-usable module. Also, this might not be unusual request and potentially could be useful to others.

just.RandomColor is Javascript random color generator in one of hex, RGB, RGBA formats and it can return object with color data or CSS string. It can be used on both, client and server side.

Usage is really simple and you can find more details in DOCUMENTATION.

For bugs of suggestions please write a issue on GITHUB.

If you’re interested to see just.RandomColor in action I’ve prepare small DEMO.

More then a year ago my very talented designer friend Jovan Stanojevic presented me idea of Circle Music player which will play local .mp3 files. This is his original idea, but after we start to work on this a few things were changed.
[He have more great designs which you'll see if you go to his dribbble profile]

Idea was to create music player that looks really cool and easy to use, but also to experiment with HTML5 and CSS3. Since that some of those stuff are supported by Chrome only this will not work in other browsers.

This music player have only basic options, but still is very functional. You’re able to play local .mp3 files from selected folder, pause, rewind, shuffle and repeat them, change volume and mute. We have a few ideas for features that might be interesting to implement later:

- store playlists in localStorage for later use,
- read ID3 tag from MP3 for song data,
- drag’n'drop for arranging playlist,
- support more audio formats,
- use keyboard to control player …

We could find some compromises to make this work on more browsers, but some of the reasons why this works in Chrome only are:

- webkitdirectory is used for getting list of files from selected folder,
- webkitNotifications to see notification about next song even when tab is not in focus,
- styling input type range …

As I said, this is experiment only and I’m not sure if anybody will use music player from browser on regular basis.

If you have some suggestions and want to contribute feel free to do that on GitHub.

Progress bars are really useful to indicate to user that something happens and when it will be approximately done. They are useful on page where assets should be preloaded before page is shown to user. That’s why is important that progress bar code is light weight so it can be loaded really fast at the start.

jQuery UI have progress bar widget and you can find a lot of other plugins which do the same thing. But if you learn how to write your own progress bar you’ll have more ability to change and adjust to your needs. And it’s only 4 lines of jQuery code.

First we should create DOM elements. All we need are two div elements, one in other. First one will be progress bar holder and you can put it whenever you want on your page. Another one is progress bar indicator. Something like this:

<div id="progressBar"><div></div></div>

Now, we need some basic CSS for those elements. We will set width, height and colors:

#progressBar {
		width: 400px;
		height: 22px;
		border: 1px solid #111;
		background-color: #292929;
}

#progressBar div {
		height: 100%;
		color: #fff;
		text-align: right;
		line-height: 22px; /* same as #progressBar height if we want text middle aligned */
		width: 0;
		background-color: #0099ff;
}

And at the end we need one function with 4 lines of code. It’s a simple function that accept two parameters.

	function progress(percent, $element) {
		var progressBarWidth = percent * $element.width() / 100;
		$element.find('div').animate({ width: progressBarWidth }, 500).html(percent + "% ");
	}

First parameters is percentages that progress bar should show and other one is jQuery object of progress bar holder. If we want to set progress bar to 80% all we have to do is:

progress(80, $('#progressBar'));

Of course before all of this we need to include jQuery library on our page.

This simple progress bar can be easily styled with CSS. I’ve create a few skins that can be downloaded from GitHub. Feel free to create your own skins and send me pull request.

GrooveShark is one of the web services which I’m using on daily basis. Actually, I have one computer which I use only to play music from my GrooveShark playlists, while I’m sitting on couch. But problem is when I want to skip or pause some song. I have to get up because I can’t hit those small controls buttons with wireless mouse from 2m range.

So, as every lazy developer, I’ve tried to make my life easier so I don’t have to move from my couch. That’s why I create this small Greasemonkey script which will show controls buttons over the whole screen. If you have similar problem you should install Bigshark.

First you gonna need Greasmonkey add-on for FireFox which can be found here.

After that visit this link which will add Bigshark script to you.

Then all you have to do is to start Bigshark script from Greasemonkey and visit GrooveShark.com. If you did everything right you’ll see big blue button with “Big Shark” title at the top of the page. After you create your playlist just click on that button and enjoy in music.

I like experiment with data visualization on client side. For that purpose, of course, I need some data for development phase. Since that development phase means that something constantly change, I had to find a way to make my life easier. That’s why I wrote a group of JavaScript range functions which helps me to create array of different types and formats of data really fast.

I just had to put them in some namespace, so “just” was good enough. Coincidentally, JUST can be acronym for JavaScript Useful Stuff, so I’ll probably use it more in the future. I’m still looking word for T, so any suggestion is welcome.

For now, there are 4 functions, arrayShuffle, range, rrange and orange.

just.arrayShuffle

This one should be pretty intuitive since it just shuffle your array. Shuffle algorithm is Fisher-Yates which is common for this task. It receive only one argument which is array and returns shuffled array.

just.range

Range function accept 3 parameters, start, end and step returns array of integer values. First value of array will be start parameter and each next will be incremented by given step until it reach value of end. Similar as Python range function.

just.range(4,15,2);

will return:

[4,6,8,10,12,14]

just.rrange

Random range returns array of random length between given scope where each value of array is random integer between custom scope.

just.rrange([10, 150], [5,10]);

This will return array of 5-10 elements where each value is between 10-150 eg.

[12, 99, 29, 136, 71, 100]

just.orange

This one also returns array, but values are not integer. It will return array of objects created from provided template. It accepts template with values from which new object will be created and number of objects that should be created. It’s the best to explain on example:

// prepare template
 var template = {
    value: [10,1,2],
    name: ['ten ','one','two']
 }

// create array of 3 elements based on template
just.orange(template, 3);

And this will create array of object who will look like this:

[
	{
		value: 10,
		name: 'ten'
	},
	{
		value: 1,
		name: 'one'
	},
	{
		value: 2,
		name: 'two'
	}
]

REAL LIFE EXAMPLE

Recently I started to work on tutorial for creating animated bar graphs and I needed data for testing. I wanted to test how it will look like with random number of elements and with random values. So, I just combine methods described above.

var template = {
	title: just.arrayShuffle(['CSS','JAVASCRIPT','HTML','PHP','MYSQL']),
	value: just.rrange([50,100],[3,20]),
	color: just.arrayShuffle(['#0099FF', '#91D6BC','#E83A25','#DE70A0','#9900FF'])
}
var dataArr = just.orange(template, 3 + Math.random() * 20 );

And I got something like this, so I can iterate and draw graph bars.

[
	{
		color: "#91D6BC",
		title: "HTML",
		value: 54
	},
	{
		color: "#DE70A0",
		title: "PHP",
		value: 81
	},
	{
		color: "#9900FF",
		title: "MYSQL",
		value: 65
	},
	{
		color: "#E83A25",
		title: "JAVASCRIPT",
		value: 70
	}
]

This approach will not be so great for large amount of data. For larger datasets each element should probably be created dynamically when we need it. It should be great if we could use JavaScript Generators for that purpose, but for now they are part of JavaScript 1.7 which is supported in FireFox only.

I like winter because of holidays and snow. Not big fan of going to shopping and buying New Year gifts and presents, but I am fan of snow and snowboarding. That’s why I enjoy watching how snow falling even if that’s only on my monitor.

Idea is to create one snowflake initially, clone that snowflake at some time interval and add random values for properties for each of them. And it’s done in less than 1kb minifed.

First include jQuery and jquery.snow.js or jquery.snow.min.js in head of your document:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script src="jquery.snow.js"></script>

Than, anywhere in you document call snow plugin like this:

<script>
$(document).ready( function(){
        $.fn.snow();
});
</script>

This plugin have few options that you can play and adjust snow falling effect:

minSize - min size of snowflake, 10 by default
maxSize - max size of snowflake, 20 by default
newOn - frequency in ms of appearing of new snowflake, 500 by default
flakeColor - color of snowflake, #FFFFFF by default

Parameters can be passed like this:

$.fn.snow({ minSize: 5, maxSize: 50, newOn: 1000, flakeColor: '#0099FF' });

Be careful with newOn parameter since that frequently appearing of new snowflake can affect on performance.

There are a lot of different jQuery News Ticker plugins with lot of options that you can use. Do you want to learn how to create one on your own in only 4 lines od jQuery code ?

Idea is pretty simple, take first element from list, apply some disappearing effect on it and on callback attach it to the end of the list.

First we have to create HTML with list of our news, something like this:

	<ul id="ticker">
		<li>
			jqBarGraph is jQuery plugin that gives you freedom to easily display your data as graphs. There are three types of graphs: simple, multi and stacked.
		</li>
		<li>
			Learn how to create image gallery in 4 lines of Jquery
		</li>
		<li>
			jqFancyTransitions is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects.
		</li>
		<li>
			mooBarGraph is AJAX graph plugin for MooTools which support two types of graphs, simple bar and stacked bar graph.
		</li>
	</ul>

Now, let’s put some style on this. We will set height of our visible ticker area and set overflow to hidden. If we want only one news to be visible at the time than ticker height should be the same as height of each element of the list. For more visible news at same time we just have to multiply height of each element with number of news that we want to be visible and set that as height of ticker.

#ticker {
	height: 40px;
	overflow: hidden;
}
#ticker li {
	height: 40px;
}

Of course, you can and should add more style here, but this will be enough to make your ticker to work.

Ok, we have layout set and now it’s time for make this news to start ticking. First we will create function which will apply disappearing effect on first element, append that element to the end of the list after it disappear and revert effects changes. After that, all we have to do is to call that function in desired intervals.

And here is plain code:

function tick(){
	$('#ticker li:first').slideUp( function () { $(this).appendTo($('#ticker')).slideDown(); });
}
setInterval(function(){ tick () }, 5000);

Of course, you can change slideUp with any other animation that you like, just don’t forget to revert effects on element after transition. Next example will set opacity to 0 for first element.

function tick(){
	$('#ticker li:first').animate({'opacity':0}, 200, function () { $(this).appendTo($('#ticker')).css('opacity', 1); });
}
setInterval(function(){ tick () }, 4000);

And please don’t forget to include jQuery at the head of your document

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

That’s it, news ticker is done. Take a look at the demo, download source code or leave a comment.

I always find it interesting to see who from people that I’m following on Twitter follows me back and also to see how those people are related with each others. I was looking the best way to present that visually and presenting connections as dots and put those dots in rings sounds like a good solution to me.

Main idea was to create this to work on client side only. Using AJAX for getting the data, localStorage to store them and SVG for visual presentation. So, this will work only in ‘modern browsers’, such as Chrome 10, Firefox 4 or IE9.

First I had to pull followers and following data for desired Twitter account. Since that Twitter API returns 100 results per request I had to create recursive function to gather all the data. Twitter API allows only 150 request per hour, so if you have more than 15000 followers and following accounts in total, you’ll exceed that limit, but that number of dots and rings will be hardly presented nicely either way.

Also, because of Twitter API limitation I decided not trying to check how my connections are connected between each other. However, that’s really interesting for me and I’m sure I’ll do that in future.

After getting all responses I check how I’m connected with each account. Each account is marked as follower, following or friend (people who follow me and I follow them). Now I got one object and stored that object in browsers’ localStorage. Again, if you have large number of followers and following account there will be a problem since that localStorage limit, for most browsers, is 5MB.

Final step was to create visual part and I choose SVG to do that. Basically, I used simple math to create rings of Twitter accounts. There is no specific rule in which order accounts will be shown. I just place them as dots with different settings (color, radius) for each type of account. I could not resist to add some animation even though it is not really smooth in some cases. You can hover each dot to see more details and clicking will redirect you to Twitter user account.

That part should be upgraded with different rules how to decide which account will be in which ring. Maybe by popularity or some other criteria. Feel free to share your suggestions with me or try to upgrade code by yourself, it can be found on GitHub.

Last night I started to work on Wordpress theme for blog and I got an idea that every post should have their own background color and that maybe those colors can be in gradient. Since that that’s very boring to do manually, I’ve decide to write jQuery plugin which will do that job.

Gradienter is easy to use, and with small effort you can have really interesting color effect on your page.

Since that this is jQuery plugin, we should include jQuery and Gradienter JavaScript files in our page:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="gradienter.js"></script>

After this, at the bottom of the page we have to apply Gradienter on desired elements and optionally set parameters.

$(element).gradienter();

Gradienter have only three parameters:

color_start: 'FFFFFF' // first color in gradient
color_end: '000000' // last color in gradient
prop: 'background-color' // on which CSS property should apply gradient

So, if we want that all elements with ‘box’ class have gradient started from #56B2CB and finished with #164E5D, all we have to do is next:

$('.box').gradienter({ color_start: '56B2CB', color_end: '164E5D' });

Note that colors are in HEX format, without #.

Changing the ‘prop’ parameter gradient can be applied to all CSS properties that have color (background-color, color, border-color).

Recently I wrote article how to create image gallery with description in 4 lines of jQuery code. Now, I will do the same thing with two other popular JavaScript frameworks, MooTools and Dojo.

Task is the same. One large image, description bar, few thumbs bellow, large image and description should change when thumb is clicked. Same rules, HTML and CSS code as here will be used.

Dojo code

dojo.query('#thumbs img').onclick( function(e){
	dojo.attr('largeImage','src',dojo.attr(this,'src').replace('thumb','large'));
	dojo.attr('description','innerHTML',dojo.attr(this,'alt'));
});

MooTools code

$('thumbs').getElements('img').addEvent('click', function(event){
	$('largeImage').set('src' , this.get('src').replace('thumb','large'));
	$('description').set('html',$(this).get('alt'));
});

and again, just for comparation:

jQuery code

$('#thumbs img').click(function(){
	$('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
	$('#description').html($(this).attr('alt'));
});

As you see approach is the same, only difference is in syntax, and if you are familiar with one JavaScript framework, you don’t need much effort to switch on another. But, if you learn JavaScript you will be able do use full power of those frameworks. So, don’t be lazy and start now.

Few days ago friend asked me to build image gallery with thumbnails for her web page. Request was pretty simple, she wanted large image and few thumbnails bellow that. Also, large image should have bar with description. When user click on thumb large image and description should change.

My idea was to use alt tag of thumb image for large image description. I already did that for jqFancyTransitions. Also, I was impatient to use jQuery’s delegate method in real life. So this is my image gallery with thumbs and description in 4 lines of jQuery.

First prepare images for gallery, large images and thumbs. We need some naming convention so let’s naming large images with suffix _large and their thumbs with suffix _thumbs. For every image we will have pair, image_xx_large.jpg and image_xx_thumb.jpg. In this example all large images will be 565×280px and thumbs will be 100×100px.

Next thing is to include jQuery in head of your document:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

After that we need layout to hold one large image and all thumbs. We need one panel with large image and description bar. Also, we need holder for thumbnails.

<div id="gallery">
	<div id="panel">
		<img id="largeImage" src="images/image_01_large.jpg" />
		<div id="description">First image description</div>
	</div>

	<div id="thumbs">
        <img src="images/image_01_thumb.jpg" alt="1st image description" />
        <img src="images/image_02_thumb.jpg" alt="2nd image description" />
        <img src="images/image_03_thumb.jpg" alt="3rd image description" />
        <img src="images/image_04_thumb.jpg" alt="4th image description" />
        <img src="images/image_05_thumb.jpg" alt="5th image description" />
	</div>
</div>

We should add some style to our gallery:

#thumbs { padding-top: 10px; overflow: hidden; }
#thumbs img, #largeImage {
 border: 1px solid gray;
 padding: 4px;
 background-color: white;
 cursor: pointer;
}
#thumbs img {
 float: left;
 margin-right: 6px;
}
#description {
 background: black;
 color: white;
 position: absolute;
 bottom: 0;
 padding: 10px 20px;
 width: 525px;
 margin: 5px;
}
#panel { position: relative; }

Now, when we have layout and CSS prepared we should add functionality to our image gallery. When user click on thumb, large image should be changed as well as description. We will replace ‘thumb’ to ‘large’ in src attribute of largeImage and use alt attribute of thumb for description. That can be achieved with following jQuery code:

$('#thumbs img').click(function(){
	$('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
	$('#description').html($(this).attr('alt'));
});

And that’s it, you have fully functional image gallery for your site.

The better way for this is to use delegate method of jQuery. With delegate you’ll be able to dynamically load thumbs and use them without bind event listeners for new thumbs.

$('#thumbs').delegate('img','click', function(){
	$('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
	$('#description').html($(this).attr('alt'));
});

Delegate method is added in jQuery 1.4.2. Check more about delegate().

Coin Slider 4 WP will show your featured posts as image slider and rotate them using unique effects provided by jQuery’s Coin Slider.

Implementation is very easy, after you download and activate this plugin, just paste one line of code in your template and Coin Slider 4 WP is ready to use.

Follow next steps to set this plugin:

1. Upload coin-slider-4-wp folder to the `/wp-content/plugins/` directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress
3. Put <?php include (ABSPATH . ‘/wp-content/plugins/coin-slider-4-wp/coinslider.php’); ?> in your template
4. For each post that you want to be featured you must have custom field (csImage by default) with full url to image and optionaly field (csText by default) with text for title bar.

On options page you can change default parameters:

Width: in pixels, 565 by default
Height: in pixels, 290 by default
Number of Squares per Width: Coin Slider use square based animations.  7 by default
Number of Squares per Height: 5 by default
Be careful, if you set large number of squares animation may not be smooth
Slide Display Duration: in miliseconds, 5000 by default
Slide Transition Effects: there are three types: random, swirl and rain. All of those effect you can see here
Hide Navigation: check this if you don’t need prev/next buttons and navigation squares below slider
Image field: set custom field for image that should be used in gallery. By default you can use csImage field, but if you want you can change that. This is useful if you already use some gallery plugin and you want to change to  Coin Slider 4 WP
Text Field: this field is optional. Content for this field will be displayed in gallery title bar bellow title. By default name of this field is csText but you can change if you want to use some other field

If you prefer Joomla instead WordPress you should try Coin Slider for Joomla created by Daniel Pardons.

After jqFancyTransitions I decided to release new jQuery image slider plugin with more unique transitions effects. I have ideas for new effects and after I didn’t find that somebody already implement that I create Coin Slider.

Thanks to you and your comments Coin Slider have lot of features that jqFancyTransitions didn’t have at the beginning.  Basically it’s a latest (and improved) version of jqFancyTransitions but with new ‘fancy’ transitions effects.

jqFancyTransitions slice your images in stripes, while Coin Slider slice them in squares. And that’s the main difference. With changing order of appearing those squares I achieve random, swirl, rain and straight effects.

While I was working on this I felt like I’m on college again. Creating order of squares appearance remind me on my college projects when I spent few night and days trying to solve some problem. Random and straight was simple, but swirl effect give me some trouble. Fortunately, I’m working with Milos Popovic who like to solve those kind of problems and he help me about swirl function. Kudos to Milos!

For rain effect I spent few rainy hours to built it and that’s why I gave him that name. Naming things is something that I’m not good at.

How to use

Download jQuery, Coin Slider javascript file and CSS file and include them on your page:

<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="coin-slider.min.js"></script>
<link rel="stylesheet" href="coin-slider-styles.css" type="text/css" />

Add slider content and create one div with an id and put images and image descriptions, similar to:

<div id='coin-slider'>
	<a href="img01_url" target="_blank">
		<img src='img01.jpg' >
		<span>
			Description for img01
		</span>
	</a>
	......
	......
	<a href="imgN_url">
		<img src='imgN.jpg' >
		<span>
			Description for imgN
		</span>
	</a>
</div>

At the end all you have to do is to call Coin Slider:

<script type="text/javascript">
	$(document).ready(function() {
		$('#coin-slider').coinslider();
	});
</script>

Example

Coin Slider have a lot of options for helping you set slider as you want. If you want to have 900px wide slider, without navigation and with 5sec delay between images you’ll do this:

<script type="text/javascript">
	$(document).ready(function() {
		$('#coin-slider').coinslider({ width: 900, navigation: false, delay: 5000 });
	});
</script>

List of all options

width: 565, // width of slider panel
height: 290, // height of slider panel
spw: 7, // squares per width
sph: 5, // squares per height
delay: 3000, // delay between images in ms
sDelay: 30, // delay beetwen squares in ms
opacity: 0.7, // opacity of title and navigation
titleSpeed: 500, // speed of title appereance in ms
effect: '', // random, swirl, rain, straight
navigation: true, // prev next and buttons
links : true, // show images as links
hoverPause: true // pause on hover

Notes

Be careuful with spw and sph because large numbers can cause transitions problems.
If you don’t set effect all effects will be implemented by random.

Check the demo of ‘The More Awesome jQuery Image Slider’

mooBarGraph is AJAX graph plugin for MooTools which support two types of graphs, simple bar and stacked bar graph. This plugin made graph from your JSON data and is compatible with all major browsers including IE6.

This is jqBarGraph on steroids. It have almost all jqBarGraph possibility, plus some new features, like url bars, info boxes, negative values, AJAX data loading…

Features

* You can set label, color, url and tooltip text for every bar
* Bars can be simple or stacked
* Legend can be created automatically
* Data can be loaded with AJAX and can have negative values for simple type
* Compatible with all major browsers including IE

How to use

First you should create element in which you want to create graph. It can be something like:

<div id="myGraph"></div>

After that data array must be created. There are two types available: simple and stacked.

Array for simple type should be like this and everything except value is optional:

new graphData =  new Array(
    [value1,label1,color1,url1,tooltip1],
    [value2,label2,color2,url2,tooltip2],
    .....
    [valueN,labelN,colorN,urlN,tooltipN]
    );

For stacked type also only value is required and everything else is optional. It should look similar to next code:

new graphData =  new Array(
    [[value11,value12,...,value1M],label1,color1,url1,tooltip1],
    [[value21,value22,...,value2M],label2,color2,url2,tooltip2],
    .....
    [[valueN1,valueN2,...,valueNM],labelN,colorN,urlN,tooltipN]
    );

After you create container and data, you have to create mooBarGraph object with prepared arguments.

window.addEvent('domready', function() {
    var myGraph = new mooBarGraph({
        container: $('myGraph'),
        data: graphData
    });
})

This will be enough to create bar graph based on your data, but you can pass few additional options. List of options is in next section.

mooBarGraph options

You should always have container and data options:

container // element in which you want mooBarGraph to be created
data // array of data for mooBarGraph

Other options are optional (list is shown with default values):

width: 400 // width of graph panel in px
height: 300 // height of graph panel in px
title: false // graph title. can use html tags
barSpace: 10 // space between bars in px
color: '#111111' // default color for your bars
colors: false // array of colors. it will be used for parts of stacked type or will be repeated for simple type
sort: false // 'asc' or 'desc', this can be used only for simple type
prefix: '' // string that will be show before bar value
postfix: '' // string that will be shown after bar value
legend: false // set to true if you want to lefend box be created
legendWidth: 100 // width of legend box in px
legends: false // array of values for legend
showValues: true // for stacked bars type only. false to hide values in sub bars.
showValuesColor: '#fff' // color for values in parts for stacked type

AJAX data loading

All you have to do is to call draw() function of your mooBarGraph object and pass url who will return data in JSON format.

myGraph.draw(url);

Example usage:

html

<a href="#" onclick="myGraph.draw('ajaxdata.php')>click here for new data</a>

ajaxdata.php

for($i=0;$i<10;$i++){
    $ajaxData[$i][] = rand(-5,5);
}

$ajaxData = json_encode($ajaxData);
echo $ajaxData;

The draw() function also can accept array as argument and create graph dynamically.

myGraph.draw(arrayOfData);

With all of this options you can create really cool presentation of your data as you can see on mooBarGraph demo page. If you can and want to contribute check github.

Yesterday Google announced new service, Google Buzz, a new way to share updates, photos, videos and more, and start conversations about the things you find interesting. Today you can have Google Buzz posts on your WordPress site.

Google Buzz Er is Wordpress plugin for showing public Google Buzz posts for selected Google account. All you have to do is to set Google account username and optionally number of posts. From 1.2 version Google Buzz Er have sidebar widget.

Features
* Custom title
* Showing images from post
* Sidebar widget
* Custom color scheme

How to install

In header of your site add following line of code:

<?php include (ABSPATH . '/wp-content/plugins/google-buzz-er/google-buzz-er.php'); ?>

1. Upload google-buzz-er to the /wp-content/plugins/ directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress
3. Drag widget on your sidebar – or -

On place where you want Google Buzz ER to be shown put:

<?php GoogleBuzzEr(); ?>

After that go on Google Buzz ER settings page and set your Google account username (without ‘@gmail.com’) . It’s simple like that.

Changelog

1.1
* Sorting posts by publishing time

1.2
* Added sidebar widget feature
* Removed include for header section

1.3
* Custom title in header
* Option for showing images from posts
* Width for images from posts

1.4
* Using curl for getting Google Buzz data
* Check if there are posts
* Set box, posts, links color from admin page
* Choose if Google Buzz logos will be displayed

Twitter Flock is Wordpress plugin for showing multiple accounts tweets with different color scheme for every account. Also, there are setting allowing you to control how your tweets will look like and will they cache or not.

One of the things that make this plugin different form other are tabs above Twitter Flock box. This tab shows accounts avatars so visitors can click on them and see only tweets from that account. From 1.1 version Twitter Flock have sidebar widget.

With Twitter Flock you can:

- show tweets from multiple accounts or only one account,
- cache tweets for faster page load,
- set different color scheme for every user,
- show only tweets with defined hash tag,
- link url inside of tweets,
- display tab with accounts avatars so visitors can select which account tweets wants to see,
- easy implement as sidebar widget,
- custom header title

You should follow those steps in order to install Twitter Flock on you Wordpress:

1. Upload `twitter-flock` directory to the `/wp-content/plugins/` directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress
3. Add this <?php include (ABSPATH . ‘/wp-content/plugins/twitter-flock/twitter-flock.php’); ?> in header of your template
4. Put <?php TwitterFlock(); ?> in your template on place where you want Twitter Flock to show tweets or
5. Drag widget on your sidebar
6. Set options on admin panel

Twitter Flock, beside standard options, have and some not-so-standard features.

My favorite feature and main reason why I made this plugin is possibility to show only tweets with chosen hash tag and remove that hash tag from tweets. So, now on workshop.rs I can show only those tweets that I select with #ws hash tag and I will not bother you with rest of my tweets.

Another cool feature is tab bar above Twitter Flock box so your visitor can choose only tweets from selected account. Also, you can choose different colors for background and text for every user separately.

Changelog

1.2
* Header title
* Option for exclude jQuery in case of conflict

1.1
* Sidebar widget
* No need for inlude line in header
* Fixes problem with new avatar appereance

Some content on our pages are more important than other and we want to made him eye catching. There are lot of techniques to achieve that.  One of them is jqIsoText.

With this plugin we’re changing size of letters in text. It starts from one font size and increment or decrement to other font size. On that way we’re getting something similar to isometric projection. That can be done for whole block of text or for every word in some text.

First download jQuery and jqIsoText and include on your page like this:

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

After that all you have to do is to select element on which you want to apply effect and call jqIsoText.

<script>
$(".elem").jqIsoText();
</script>

This plugin have only three options: fromSize, toSize and split. The first one is the size of first letter, second is the size for middle letter in text and third one is if you want to threat every word from text separately. E.g. if you want that your text in h1 tags starts from 50px, go to 20px and threat every word separately you should use next code snippet.

<script>
$(".elem").jqIsoText({ fromSize: 50, toSize: 20, split: 'yes' });
</script>

You sholud use this plugin for titles or some important line of text. Using this for long text may be difficult for reading and can cause opposite effect. Also, this can be used only for text nodes.

ftFeatured is Wordpress plugin for creating image gallery with fancy transition effects of featured posts. You can choose between three types of transition effects: curtain, wave and zipper. Also, you can set width, height, delay time, number of posts etc.

This WordPress plugin is based on jQuery jqFancyTransitions plugin and is very easy to use. After you activate this plugin and set custom field for image, all you have to do is to paste one line of code in your template on place where you want your ftFeatured gallery.

You should follow this steps for install and set Fancy Transitions Featured Gallery:

1. Download plugin
2. Put ftFeatured folder in your wp-content/plugins folder
3. Activate ftFeatured from admin panel
4. Go to Settings on a admin panel and set options
5. Create custom fields for your post
6. Paste <?php include (ABSPATH . '/wp-content/plugins/fancy-transitions-featured-gallery/ftFeatured.php'); ?> in your template where you want ftFeatured to be displayed.

There are few options for Fancy Transitions Featured Gallery:

Width: in pixels, 500 by default
Height: in pixels, 332 by default
Number of Stripes: jqFancyTransitions use stripes based animations abd there are 20 stripes by default. If you set large number of stripes animation may not be smooth
Slide Display Duration: in miliseconds, 5000 by default
Slide Transition Effects: there are three types: curtain, wave, zipper. All of those effect you can see here
Image field: set custom field for image that should be used in gallery. By default you can use ftImage field, but if you want you can change that. This is useful if you already use some gallery plugin and you want to change to  Fancy Transitions Featured Gallery
Text Field: this field is optional. Content for this field will be displayed in gallery title bar bellow title. By default name of this field is ftText but you can change if you want to use some other field

Changelog

1.0.1
* Solved problem with plugin paths

1.1.0
* Work on all posts and pages not only on front page

1.2.0
* Valid XHTML Markup

1.3.0
* Option to show posts from one category

I was looking all over the Internet for some jQuery gallery plugin with some interesting transition effects. I found a lot of great plugins but they all have pretty same transition effects. Mostly that was fading and sliding effects. I wanted something different so I decide to made my own slideshow gallery plugin for jQuery. That’s how was born jqFancyTransitions.

My main idea was to build some ’strip curtain’ effect and I start from that. But, while I was building this some other effects just pop up and I decided to adjust code and include some of those effects. Now, there are ‘wave’, ‘zipper’ and ‘curtain’ effect, plus options that can be used for custom effect. You can see how it works on examples and documentations page.

At the beggining you will need to download jQuery and jqFancyTransitions and include them on your page similar like this :

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

After that you will need some placeholder with some images for your slideshow. Text from alt tag will be used in title bar in your slideshow.

<div id='slideshowHolder'>
 <img src='img1.jpg' alt='img1' />
 <img src='img2.jpg' alt='img2' />
 <img src='img3.jpg' alt='img3' />
</div>

When you set everything time is to call jqFancyTransition and tell him where to do his job. You will probably need to set width and height for your gallery. That can be done with next code:

<script>
$(document).ready( function(){
	$('#slideshowHolder').jqFancyTransitions({ width: 400, height: 300 });
});
</script>

The code above is enough to made your fancy transitions gallery 400px wide and 300px high. If you want you can change transition effect with one of predefined values:

• wave
• zipper
• curtain

Of course, you can made custom effect with set of options that you can use to set speed, number of strips, direction, type of effect, etc. Bellow is list of all parameters and their values that you can use.

effect: '', // wave, zipper, curtain
width: 500, // width of panel
height: 332, // height of panel
strips: 20, // number of strips
delay: 5000, // delay between images in ms
stripDelay: 50, // delay beetwen strips in ms
titleOpacity: 0.7, // opacity of title
titleSpeed: 1000, // speed of title appereance in ms
position: 'alternate', // top, bottom, alternate, curtain
direction: 'fountainAlternate', // left, right, alternate, random, fountain, fountainAlternate
navigation: false, // prev and next navigation buttons
links: false // show images as links

You can try to change those options and see what kind of effect you will get. Basically, you can change position and direction parameters and you will see variety of jqFancyTransitions effects. Also you can check examples and documentation page where you can see few examples with photos made by my friends Goran Jovanovic, Igor Srdanovic, Ivan Jekic and Marko Manojlovic who is also design layout for that page.

IMAGES AS URLS

Since 1.7 version images can be urls. All you have to do is to add url below images. Similar to this:

<div id='slideshowHolder'>
 <img src='img1.jpg' alt='img1' />
 <a href ='http://workshop.rs'/></a>
 <img src='img2.jpg' alt='img2' />
 <a href ='http://workshop.rs/projects/jqbargraph'></a>
 <img src='img3.jpg' alt='img3' />
 <a href ='http://workshop.rs/projects/moobargraph'></a>
</div>

After that just add links: true in call.

Changelog

- 1.5
navigation

- 1.7
images can be urls

- 1.8
class for active navigation number ( ft-button-IDOFHOLDER-active )
description bar is not part of ‘navigation’ option

jqBarGraph is jQuery plugin that gives you freedom to easily display your data as graphs. There are three types of graphs: simple, multi and stacked. All you have to do is to pass your data to this plugin. This plugin is compatible and fully tested with Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+.

Of course, there are a lot of settings to tune appearance of your graph, as are animation, color scheme, dimensions etc. Also, you can additionally change look and feel of graph via CSS.

You will need jQuery in order to make jqBarGraph working. First, you need to download jQuery and jqBarGraph plugin and include them on your page. Similar to this:

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

Now, we need array of data from which we want to create graph. There is two type of data array for jqBarGraph. First is for simple bar graph type, and second is for multi and stacked bar type.

For simple bar graph type data for one bar should look like this: [value, label, color]. Label and color are optional. This is example for simple bar graph type:

 arrayOfData = new Array(
[10.3,'Jan','#f3f3f3'],
[15.2,'Feb','#f4f4f4'],
[13.1,'Mar','#cccccc'],
[16.3,'Apr','#333333'],
[14.5,'May','#666666']
); 

For multi and stacked type of graph you should send data in next format: [[value1, value2, value3, ..., valueN], label]. It should look similar to this:

arrayOfData = new Array(
[[14,54,26],'2007'],
[[8,48,38],'2008'],
[[4,36,57],'2009']
); 

After you set your data array you just need to say in which div you want graph to be created. All you have to do is:

 $('#divForGraph').jqBarGraph({ data: arrayOfData }); 

The code above is enough to display your data as bar graph. But if you want to made your graph prettier you can achieve that with next set of parameters:

data: arrayOfData, // array of data for your graph
title: false, // title of your graph, accept HTML
barSpace: 10, // this is default space between bars in pixels
width: 400, // default width of your graph
height: 200, //default height of your graph
color: '#000000', // if you don't send colors for your data this will be default bars color
colors: false, // array of colors that will be used for your bars and legends
lbl: '', // if there is no label in your array
sort: false, // sort your data before displaying graph, you can sort as 'asc' or 'desc'
position: 'bottom', // position of your bars, can be 'bottom' or 'top'. 'top' doesn't work for multi type
prefix: '', // text that will be shown before every label
postfix: '', // text that will be shown after every label
animate: true, // if you don't need animated appearance change to false
speed: 2, // speed of animation in seconds
legendWidth: 100, // width of your legend box
legend: false, // if you want legend change to true
legends: false, // array for legend. for simple graph type legend will be extracted from labels if you don't set this
type: false, // for multi array data default graph type is stacked, you can change to 'multi' for multi bar type
showValues: true, // you can use this for multi and stacked type and it will show values of every bar part
showValuesColor: '#fff' // color of font for values

This graph will work without any additional CSS, but it can easily be styled via CSS. I was paying attention that you will have enough selectors to achieve anything you want with CSS. If you create something cool it will be nice if you share that with all of us.

Changelog

1.1

* Compatibility with jQuery 1.4.2+