Libraries

jQuery easyThumb - A PHP / jQuery Thumbnail Generator with Lightbox

The first version of jQuery easyThumb was released today. easyThumb is a plugin that uses both jQuery and PHP to generate thumbnails (to use in galleries etc.) on-the-fly. All you need to do is to make a unsorted list of images. No links or thumbnails are required, the library takes care of this - thumbnails are created automatically and are linked to the full size image. This integrates well with the Lightbox library as is shown in the online demo.

From the author:

jQuery easyThumb is a plugin for jQuery. It turns a list of full-scale images to a list of thumbnails on-the-fly. It uses a php-script to return a thumbnail for each image, and jQuery to generate the list.

Online Demo with Lightbox

Check out the original post to read more about easyThumb and to download the source code.

YUI Based Lightbox [Final] Released

Cuong Tham over at Code Central created a YUI based Lightbox library and has just released the final version. For those of you unfamiliar with Lightbox, check this out.

   

What's New in this release?

The most significant change in this version of the lightbox is that image thumbnails are no longer required for creating lightbox instance. That implies that you can create an image gallery without the presence of image thumbnails. The more exciting aspect of this new feature is that you can virtually grab any image from the internet and include it in your gallery.

Below is the detailed list:

* Ability to view full size and auto-fit version of the image
* Settings for changing background mask opacity and color
* keyboard shortcuts
* Tooltip panel for displaying extra information
* Navigation control toolbar
* Image transition effect
* External stylesheet for styling

Bug Fixes

* Fixed image goes outside of viewport bug
* Removed extra scrollbar when the image can be fit into the viewport

The lightbox has been tested in Firefox 2.0.0.6, IE 7, Opera 9.21.

Check out a demo with thumbnails and without thumbnails [I recommend the black or the white theme as they look best].

One thing to note is that this is a hefty Lightbox implementation, weighing it at around 63KB for all required JavaScript files whereas the original Lightbox library only required about 13KB of JavaScript. That's a high price to pay for a cool gallery. But nevertheless, thanks to Code Central for putting this out, it's nice to see the differences in their implementation. If nothing else, you can download their source and play with it in your sandbox.

Click here to read the full article and download the source code.

JavaScript Motion Tween - A JavaScript Animation Engine

Tagged:  

Philippe Maegerman has created a JavaScript animation engine for motion tweening similar to what's available in Flash through Actionscript. The library includes the following classes:

  • Tween class
    Tween.js is the base animation class
  • ColorTween class
    ColorTween.js extends the Tween.js class, its purpose is to manage transitions between two colors.
  • OpacityTween class
    OpacityTween.js extends the Tween.js class, its purpose is to manage opacity transitions on visual objects.
  • TextTween class
    TextTween.js extends the Tween.js class, its purpose is to manage text effects.
  • Sequence class
    The sequence.js class allows you to chain Tweens, it means that the Tweens that have been added via the 'addChild()' method will be executed in the sequence they have been added.

His blog includes documentation as well as working examples and sample code displaying the functionality of the library, including the Webber 2.0 Dock Menu Tutorial.

Full source code is also made available for download on the site.

If you're looking for something a little more heavy duty that comes with features other than just animation, then you probably want to check out one of the major JavaScript Frameworks that include animation support:

Please share your comments and experiences with JavaScript animation, these frameworks, or another framework with animation support not listed here.

Spellify 1.0 - An Automatic Text Field Spell Checker

Spellify is a script.aculo.us/prototype based spell checker for form fields that utilizes Google as its spell check engine. Last month, Spellify released version 1.0 - officially taking the application out of beta and bringing it to prime time.

Check out the short video below for a demo:

Homepage: spellify.com
Spell Check for Multiple Lines: spellify.com/extended.html

The Forms Demo:

Requirements
- PHP 4+ with CURL library installed (developed using PHP 4.4.6)
- script.aculo.us 1.8.0 (latest prototype.js, and effects.js required)

Browser Compatibility
IE7, FF2, IE6, Opera 9, Safari 3. May work in other browsers as well.

Visit the download page

Sparkline PHP Graphing Library

Tagged:  

If you are creating an application or widget that deals with complex data such as a stock ticker you probably want to graph the data. Sparklines are a great way to graph such data in a small space. In fact it is amazing how much information you can get by just a quick look at a Sparkline.

Below is an example of a Sparkline from http://sparkline.org/.

Examples

Back in the dot-com heyday, you might remember that Cisco, EMC, Sun, and Oracle were nicknamed "the four horsemen of the Internet". You might now say: "companies that ride together, slide together." Large 10-year charts of these four stocks.

 
  5-Year Close High Low
Cisco 19.55 80.06 8.60
EMC 13.05 101.05 3.83
Sun 5.09 64.32 2.42
Oracle 13.01 43.31 7.32

The below code example is how you make a simple bar graph Sparkline.

 setBarWidth(4);
 
 // Set the spacing between the bars
 $graph->setBarSpacing(2);
 
 // Add a color called "mygray" to the available color list
 $graph->setColorHtml("mygray", "#424542");
 
 // Set the background color to this new color
 // As of 0.2, if you didn't set the color beforehand,
 // your background would be black
 $graph->setColorBackground('mygray');
 
 // Begin the loop to add the data
 foreach ($data as $key => $value) {
 
 // Add the data
 // This will make one white bar with the relative value
 // of $value
 $graph->setData($key, $value, 'white');
 }
 
 // Draw all necessary objects for our graph
 // The height will be 16
 $graph->render(16);
 
 // Displays the graph by sending a 'Content-type: image/png'
 // header then outputting the image data
 $graph->output();
?>

You can get more information about the Sparklines PHP Graphing library at http://sparklines.org.

Now that you have the tools to create a Sparkline go make a cool new application or widget that use Sparklines.

ajax im 3.2 released

Tagged:  

Last month we had a post on the ajax chat and instant messaging clients created by unwieldly studios.

ajax im logo

I've just been notified that a new version their instant messenger ajax im 3.2 has been released, and there are many changes including:

  • a major overhaul of the code: everything (PHP and JS) is now
    object-oriented instead of procedural
  • multiple language support
  • admin panel added, supports searching for users, banning, kicking,
    and making/removing admin
  • PHP-based sessions implemented, so the username and password isn't
    sent on every message request
  • and many others.

ajax im buddy list

You can read more about ajax im at ajaxim.com and you can view a demo at ajaxim.net

Demo accounts are usernames "test", and "test[1 to 4]". Password is "test".

Google Ajax Feed API + Flickr Photo Feed + Mootools Image Reflection

Introduction
So this all started because I decided to play around with the Google Ajax Feed API, integrate it with the Flickr public photo feed, and add a Mootools Image Reflection script in to the mix to spice things up a bit.

Let's start with the Google Ajax Feed API and what it offers. With the AJAX Feed API, you can download any public Atom or RSS feed using only JavaScript, so you can easily mash up feeds with your content and other APIs like the Google Maps API. If you haven't had a chance to dig into it, you should. It's relatively simple and straightforward, is very quick to set up, and runs like a champ. First, you'll need to sign your site up for a API Key here.

Now let's take a look at the Flickr Photo Feed. Flickr is one of the biggest online photo management and sharing application in the world. They offer a free full blown API, but for this project I only used their public photo feed.

Finally, the third ingredient in this melting pot is an image reflection script based on the Mootools framework. Image reflection has become much more common in the Web 2.0 design style. This script provides a code based solution to creating reflections as opposed to hand creating them in an image editor like Adobe Photoshop. If you're not sure what I mean by image reflections, stay tuned for a quick and dirty demo.

Google Ajax Feed API
To begin using the Ajax API in a page, you first need to include the javascript code from google's server in your header, passing it your API key:

<script type=\"text/javascript\" src=\"http://www.google.com/jsapi?key=[your api key here]\"></script>

Next, initialize the API by calling

google.load("feeds", "1");

Specify your callback function by calling google.setOnLoadCallback(initialize); where initialize is the name of our callback function.


Finally, let's build the initialize function, to process the Flickr public feed after the API is ready.

function initialize() {      
	// this random number is used to guarantee we aren't getting a cached copy of the feed, which by default is in JSON format
	var randomnumber=Math.floor(Math.random()*1000000);
	
	// the flickr feed url is used to instantiate a new google feed object
	var feed = new google.feeds.Feed("http://api.flickr.com/services/feeds/photos_public.gne?rand="+randomnumber);

	// The container is a DIV that contains all the photos retrieved from Flickr
	// Each time this method is called, we need to erase the previous photos
	// with a little DOM manipulation
	var container = document.getElementById("feed");
	if(container != null){
		container.parentNode.removeChild(container);				
	}
	container = document.createElement("DIV");
	container.id = "feed";
	container.innerHTML = "<p class=\'loading\'>Loading...</p>";
	document.body.appendChild(container);

	// setNumEntries allows us to specify the number of elements Google will return
	// in the feed, the default is 4
	feed.setNumEntries(20);

	// we execute the load method to tell the api to fetch our feed
	// and we pass it our callback function
	feed.load(function(result) {
            if (!result.error) {               
	  // this removes our loading message
	  container.innerHTML = "";

	  // we loop through our result set (a JSON object)
              for (var i = 0; i < result.feed.entries.length; i++) {
	       // for each entry, we create a div, assign it a css class name,
	       // create a hyperlink back to the Flickr page contain the fullsize picture
	       // and create an image node for our thumnail
                   var entry = result.feed.entries[i];			
                   var div = document.createElement("div");
                   div.className = "imageDIV";			
                   var linkNode = document.createElement("a");
                   linkNode.href = entry.link;
                   linkNode.target = "_blank";				
                   var imageNode = document.createElement("img");
                   imageNode.id = "image"+i;
	       // parseImgURL is a method I wrote to parse out the thumbnail url from a node in
	       // in the JSON object since that contained other content
                   imageNode.src = parseImgURL(entry.content);
                   imageNode.border = 0;

	       // add the hyperlink to the image	, assign it to the div, and put it on the page
                   linkNode.appendChild(imageNode);		
                   div.appendChild(linkNode);
                   container.appendChild(div);

	       // finally, this one-liner is all we need to activate the reflection
	       // feature on the image we just added to the page. The first parameter
	       // in the add method is the image id, the second parameter is used for options
	       // like the height and opacity of the reflection. 
	       // .8 results in a reflection that is 80% of the height of the original image
                   Reflection.add('image'+i, {height:.8});
              }


            }
          });
}

Flickr Photo Feed
More information on the Flickr API can be found on their website.
For this project, I chose to only use their public feed (which doesn't require an API key).

Mootools Image Reflection
This script works in all browsers supporting the canvas tag: Firefox since version 1.5, Camino, Opera since version 9 and Safari since version 1.3. It also works in Internet Explorer 5.5 and more recent by using an alternative drawing technique.

Take a look at the Demo

Sources
Google Ajax Feed API: http://code.google.com/apis/ajaxfeeds/
Flickr Photo Feed: http://www.flickr.com/services/feeds/docs/photos_public/
Mootools Image Reflection Script: http://www.digitalia.be/software/reflectionjs-for-mootools

Syndicate content