Connect With WRD
feed via e-mail
feed via e-mail

Archive for the ‘Effects’ Category

WideImage is an object-oriented PHP image library.

Color Palette Icon
It is written in PHP 5 and requires only GD2 library for manipulating images.

The library is very suitable for new generation web applications (for easier mashups) as it supports loading images from any URL besides loading them from a file, string or a valid image source.
 

Some features of WideImage:

  • Transformations: crop, resize, rotate, flip, mirror
  • Conversions: graysclae, negative, truecolor, palette
  • Colors/channels: merge, mask, filter, get channels, correct gamma…

jqPuzzle is a jQuery plugin which enables you to create sliding puzzles from any image.

The created JavaScript puzzle can have the shuffle & solution options besides the moves made & seconds played.

JavaScript Puzzle

jqPuzzle is highly configurable as the options in the interface can be enabled/disabled, number of rows & columns of the puzzle to be created can be defined & more.

How to use?

After inserting the jquery.jqpuzzle.js & jquery.jqpuzzle.css files to your webpage, simply give the class="jqPuzzle" to any image. That’s all.

JavaScript Image Effects is a library that you can instantly create effects like rotate, blur, emboss & more.

Emboss Effect

Using such a library is very functional in situations where you may need to add an effect to lots of images, need to provide an interface to the users for creating effects & so.

How to use?

After inserting the imagefx.js file into your webpage, you have 2 options:

<script type="text/javascript" >
jsImageFX.doImage(document.getElementById("myimage"), "blur");
</script>

or

<img src="image.jpg" imagefx="blur" /> 

where both are very easy to apply.

Every image effect is not available in every browser and a comprehensive browser compatibility chart can be found in the website

Magic Toolbox is a set of JavaScript image effect solutions.

These include zoom, magnify and thumb features.

JavaScript Magnify Effect

These JavaScript solutions do not rely on JavaScript framework, they are well-documented and some have installation instructions for other like Joomla, Drupal, osCommerce & more.

They are free only for non-commercial use and need a license for commercial websites.

WebDesignerWall has a very nice trick to decorate your images and photo galleries without editing the source images.

The trick is very simple. All you need is an extra <span> tag and apply a background image to create the overlaying effect.

CSS Image Manipulation

Benefits of this CSS image decoration:

  • Saves time: no need to create every decorated image file
  • Keeps original source images
  • Flexible: change the decoration anytim.
  • Cross-browser compatible

Phototype is a client/server-side image manipulation library, based on Prototype and supports all kinds of image manipulations.

JavaScript Image Manipulation

How it works?

Clientside JavaScript codes sends the commands to the serverside PHP – GD library image renderer and displays the rendered image.

Using Phototype, you are able to rotate, resize, flip and do some other cool effects to images.

Fotonotes is a collection of scripts for annotating images. Simply, it lets you add notes over images.

JavaScript Text On Images

With the help of a PHP file (supports PHP4 & PHP5), every note added to the images are stored in JPEG headers in XML format.

There is a very nice example on the website which you can try the code.

Download package includes classes for alternate storage strategies like databases.

Fireworks.js is a JavaScript file which helps you create configurable fireworks effects in your website.

Besides using it, it is also a nice example of JavaScript effects and script fired sounds to get inspired.

JavaScript Fireworks

This JavaScript uses SoundManager for script triggered sounds and supports different types of fireworks effects including the "exploding-disappearing" and "random explosions".

Image processing is needed in almost every web application like creating watermarks, uploading & resizing avatars, cropping them & similar tasks.

Asido is a feature-rich image processing class for PHP that fits to any environment like GD2, Magick Wand and Image Magick. It supports both PHP4 & PHP5 (newer versions support only PHP5).

An example of adding a watermark to an image:

PHP Image Watermark

And the code:

<?php
include('./../../asido/dev/class.asido.php');
asido::driver('gd');
$i1 = asido::image(
      'the-source-image.jpg',
      'filename-with-which-you-want-to-save-the-result.png'
);
asido::watermark($i1, 'put-the-watermark-image-here.png');
$i1->save(ASIDO_OVERWRITE_ENABLED);
?>

It is really simple and clear.

Asido can:

  • resize
  • watermark
  • rotate
  • copy
  • crop
  • grayscale
  • convert

images with ease. To develop faster, Asido is worth a try.

Scrollovers is a way to quickly and easily add flair to your web pages, giving your users an experience they weren’t expecting.

It is simply a JavaScript that helps creating rollover image-like links with text .

Mouse Over Text Link

How to use Scrollovers?

Insert the scrollovers.js file to your web pages and create your links like this:

<a href="[YOUR PAGE HERE]" class="scrollover" type="scrollover">[YOUR TEXT HERE]</a>

And the last add the styles with the color palette of your preference like below:

<style>
   a.scrollover {color: #557AFF;}
   a.scrollover em:first-line {color: #FF5B3C;}
</style>

And that’s it. 

Uptime Robot
feed-holder
FeedBurner
  • PSD to HTML
  • aXmag - Flash Page Flip Magazine Software, PDF to Flash Converter
  • ManageWP
    PSD to HTML