Cloud Zoom: Feature Rich Image Zoom Plugin

Cloud Zoom is a lightweight, highly customizable jQuery plugin that allows you to add image zooming in your web pages. You can use this plugin to create zoomable images with different features such as tint effect, inner zoom and soft focus. It is a cross browser plugin that works in all major web browsers including IE6.

Cloud Zoom is very easy to implement and is very well documented. You can easily customize the appearance of the smaller image, lens and zoom window using CSS. It offers several configuration options enabling you to customize its behavior including: height, width & positions of zoom window; tint; opacity; amount of smoothness/drift of the zoom image as it moves; enable or disable titles.

Below is a simple example HTML page which creates a single Cloud Zoom instance and gallery facility. Please study the page as it contains useful comments and tips. You can see the same page working here.
<html>
<head>

<!-- Load the Cloud Zoom CSS file -->
<link href="/styles/cloud-zoom.css" rel="stylesheet" type="text/css" />

<!-- You can load the jQuery library from the Google Content Network.
Probably better than from your own server. -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<!-- Load the Cloud Zoom JavaScript file -->
<script type="text/JavaScript" src="/js/cloud-zoom.1.0.1.min.js"></script>

</head>
    <body>

        <!--
        An anchor with class of 'cloud-zoom' should surround the small image.
        The anchor's href should point to the big zoom image.
        Any options can be specified in the rel attribute of the anchor.
        Options should be specified in regular JavaScript object format,
        but without the braces.
        -->

        <a href='/images/zoomengine/bigimage00.jpg' class = 'cloud-zoom' id='zoom1'
            rel="adjustX: 10, adjustY:-4">
            <img src="/images/zoomengine/smallimage.jpg" alt='' title="Optional title display" />
        </a>

        <!--
        You can optionally create a gallery by creating anchors with a class of 'cloud-zoom-gallery'.
        The anchor's href should point to the big zoom image.
        In the rel attribute you must specify the id of the zoom to use (useZoom: 'zoom1'),
        and also the small image to use (smallImage: /images/....)
        -->

        <a href='/images/zoomengine/bigimage00.jpg' class='cloud-zoom-gallery' title='Thumbnail 1'
        	rel="useZoom: 'zoom1', smallImage: '/images/zoomengine/smallimage.jpg' ">
        <img src="/images/zoomengine/tinyimage.jpg" alt = "Thumbnail 1"/></a>

        <a href='/images/zoomengine/bigimage01.jpg' class='cloud-zoom-gallery' title='Thumbnail 2'
        	rel="useZoom: 'zoom1', smallImage: ' /images/zoomengine/smallimage-1.jpg'">
        <img src="/images/zoomengine/tinyimage-1.jpg" alt = "Thumbnail 2"/></a>                  

        <a href='/images/zoomengine/bigimage02.jpg' class='cloud-zoom-gallery' title='Thumbnail 3'
        	rel="useZoom: 'zoom1', smallImage: '/images/zoomengine/smallimage-2.jpg' ">
        <img src="/images/zoomengine/tinyimage-2.jpg" alt = "Thumbnail 3"/></a>

    </body>
</html>

List of Really Useful JavaScript Libraries

Popular JavaScript frameworks probably provide every common function a developer may need. The ability to extend these frameworks with new plugins makes them even more powerful. But you may still face situations when you don’t want to use these frameworks or you may find lack of support for specialized functions. This is where a lot of really useful stand alone JavaScript libraries can provide help.

W3Avenue has compiled a list of really useful standalone JavaScript libraries that will help you when your favorite JavaScript framework like Prototype, jQuery, MooTools, etc don’t provide functions for your specific needs or you prefer not to use them for some reason.

Animation

  • JSTweener
    A tween library for JavaScript based on Tweener Class for tweening and other transitions via ActionScript code for Flash.
  • $fx() – JavaScript Animation Library
    $fx() is the really small (less than 4 KBs) and pretty flexible library to animate HTML elements. It lets you to alter any CSS property along time line by passing just simple configuration. Moreover you can combine effects, group them to the chains and run parallel, also you have ability to set different callbacks what gives you even more flexibility.
  • Facebook Animation
    Animation library gives developers an easy way to improve their user interface with a line of code or two. All animations are CSS based, so a working knowledge of CSS will really help you out here. An open-source version of FBJS Animation can work on pages outside of Facebook.
  • More Libraries: FX, Bytefx, Animator.js, jsAnim

Audio / Video

  • SoundManager
    SoundManager wraps and extends the Flash Sound API, and exposes it to JavaScript. The flash portion is hidden, transparent to both developers and end users.
  • Flowplayer JavaScript API
    The Flowplayer JavaScript API provides you with an easy-to-use, yet powerful way to control one or more Flowplayer instances on a html page. Flowplayer consists of two parts: the Flowplayer SWF object, that is a wrapper around a Flash object, and a JavaScript library that translates the easy-to-use API commands into the more complex interaction with the Flowplayer SWF object (that in turn controls the Flash object).

Cookies

  • Cookies
    This is a JavaScript library for accessing and manipulating HTTP cookies in the browser. You can get one or a list of cookies, set cookies, delete cookies, test if the browser accepts cookies. jQuery is not required to use this library, but jQuery bindings are available when jQuery is present on the page. When jQuery is available, you can cause form fields to automatically set cookies, or auto fill form fields with cookie values.
  • EasyCookie
    Simple & easy JavaScript cookie management script.

Cryptography

  • JavaScript MD5
    JavaScript implementation of MD5 allows you to perform simple cryptography.

Database

  • Taffy DB
    Taffy DB is a free and open source JavaScript library that acts as thin data layer inside Web 2.0 and Ajax applications. Compatible with major Ajax libraries, its main features include: CRUD Interface (Create, Read, Update, Delete), Sorting, Looping, Advanced Queries, etc.
  • ActiveRecord.js
    ActiveRecord.js is a cross browser, cross platform, stand-alone object relational mapper. It shares a very similar vocabulary to the Ruby ActiveRecord implementation, but uses JavaScript idioms and best practices. It can operate using an in memory hash table, or with a SQL back end on the Jaxer platform (SQLite and MySQL), Adobe’s AIR (SQLite) and Google Gears (SQLite).

Date / Time

  • Date.js
    Datejs is an open source JavaScript date library; which allows you to work with date and time effortlessly. It supports over 150 cultures and is packed with functions that allow you to set, parse, compare, change dates, etc.

Debugging / Logging

  • Firebug Lite
    Firebug is probably one of the most popular debugging extension for Firefox –  Firebug Lite is an alternative solution if you need to test your pages in Internet Explorer, Opera, and Safari?  It a JavaScript file you can insert into your pages to simulate some Firebug features in browsers.
  • Blackbird
    Open Source JavaScript Logging Utility. It offers a simple way to log messages in JavaScript and an attractive console to view and filter them.
  • NitobiBug
    NitobiBug is a browser-based JavaScript object logger and inspection tool – similar to Firebug. NitobiBug runs across different browsers (IE6+, Safari, Opera, Firefox) to provide a consistent and powerful tool for developing rich Ajax applications.

Fonts / Text / Typography

  • strokeText.js
    strokeText.js is an unobtrusive javascript library working in all the major browsers – Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. The library provides cross API text stroking capability for Canvas and VML. The (built in) sans-serif font is also adapted for SVG to ensure an identical representation.
  • typeface.js
    Allows you to embed custom fonts in your web pages so that you don’t have to render text to images. Instead of creating images or using flash just to show your site’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally.
  • Cufón
    Fast text replacement with canvas and VML – no Flash or images required.
  • Hyphenator.js
    Automatically hyphenates texts on websites if either the web developer has included the script on the website or you use it as a bookmarklet on any site.
  • More Libraries: sIFR, Facelift Image Replacement,FontJazz

Form Validation

  • LiveValidation
    LiveValidation is a small open source JavaScript library for making client-side validation quick, easy, and powerful. Two versions are provided – a prototype.js version, and a standalone version. Both are fully tested on most modern browsers with a comprehensive test suite.
  • wForms
    Unobtrusive JavaScript library that adds commonly needed behaviors to traditional web forms without the need for any programming skill.
  • Validanguage
    Validanguage is an inheritance-driven, unobtrusive, open source JavaScript validation library designed to be the feature-rich, user-friendly validation framework.
  • More Libraries: Yav, qForms JavaScript API

Flash

  • SWFObject
    SWFObject is an easy-to-use and standards-friendly method to embed Flash content, which utilizes one small JavaScript file.
  • AS3Wrapper
    It’s a JavaScript library, compatible with IE and Firefox, that enables entire Flash API accessible from regular script tags. Owing to the similarities between the two languages, coding Flash in JavaScript is actually incredibly natural, and what’s more, it also seems to have pretty nice performance!
  • Aflax
    JavaScript Library that enables developers to use JavaScript to fully utilize all of the features of Adobe’s Flash 8 runtime – including graphics, networking, video and camera support.

Game Programming

Graphs / Charts

  • PlotKit
    Chart and Graph Plotting Library for JavaScript. It has support for HTML Canvas and also SVG via Adobe SVG Viewer and native browser support.
  • JS Charts
    JS Charts is a free JavaScript based library that lets you create charts in different templates like bar charts, pie charts or simple line graphs. Just include jscharts.js file, prepare your chart data in XML or JavaScript Array and your chart is ready!
  • Flot (Requires jQuery)
    JavaScript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side. Flot is cross-browser and works with Internet Explorer 6/7/8, Firefox 2.x+, Safari 3.0+, Opera 9.5+ and Konqueror 4.x+.
  • More Libraries: JavaScript Diagram Builder

HTML Tables

  • SortTable
    Allows you to make all your tables sortable. It uses DOM, it is completely unobtrusive and it knows how to sort a variety of different data types.
  • DragTable
    Enable users to change order of table columns by simply dragging them.
  • KeyTable
    KeyTable is a JavaScript library which provides keyboard navigation and event binding for any HTML table. With KeyTable Excel style table navigation can be employed to provide features such as editing of a table without requiring a mouse.

Image Processing / Visualization / Drawing

  • Processing.js
    Processing.js uses JavaScript to draw shapes and manipulate images on the HTML5 Canvas element. The code is light-weight, simple to learn and makes an ideal tool for visualizing data, creating user-interfaces and developing web-based games.
  • Raphaël
    JavaScript library that will simplify your work with vector graphics on the web. It uses SVG and VML as a base for creating graphics and currently supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.
  • Pixastic Image Processing Library
    Allows you to perform a variety of operations on images using just a bit of JavaScript. The effects supported out of the box include desaturation/grayscale, invert, flipping, brightness/contrast adjustment, hue/saturation, emboss, blur, and many more.
  • VectorGraphics Library
    High Performance JavaScript Vector Graphics Library. Draw Line, Circle, Ellipse (Oval), Polyline, Polygon, Rectangle.
  • Reflection.js
    Allows you to add reflections to images on your pages. It uses unobtrusive JavaScript to keep your code clean. It works in all the major browsers – Internet Explorer 5.5+, Mozilla Firefox 1.5+, Safari, Google Chrome and Opera 9+. On older browsers, it’ll degrade and your visitors won’t notice a thing. Best of all, it’s under 5KB.
  • CVI Libraries (Canvas Vml Image Effects)
    The CVI libraries uses unobtrusive JavaScript to keep your code clean and they work in all the major browsers – Mozilla Firefox 1.5+, Opera 9+, IE6+ and Safari. All scripts are distributed under the Netzgestade Software License Agreement. License permits free of charge use on non-commercial and private web sites only. There are also Commercial Software Licenses available. Libraries: bevel.js, corner.js, curl.js, edge.js, filmed.js, glossy.js, instant.js, reflex.js, shiftzoom.js, snapfit.js, slided.js, sphere.js
  • Drag & Drop for Images and Layers
    A cross-browser JavaScript DHTML Library which adds Drag Drop functionality and extended DHTML capabilities to layers and to any desired image.
  • ExplorerCanvas
    Modern browsers like Firefox, Safari, Chrome and Opera support the HTML5 canvas tag to allow 2D command-based drawing. ExplorerCanvas brings the same functionality to Internet Explorer. To use, web developers only need to include a single script tag in their existing web pages.
  • Canvas 3D JS Library (C3DL)
    Provides a set of math, scene, and 3d object classes to make the canvas more accessible for developers that want to develop 3D content in browser but do not want to have to deal in depth with the 3D math needed to make it work. Requires Canvas 3d enabled browser (Firefox 3.5 or higher)
  • jsDraw2D
    Open Source JavaScript Graphics Library that allows your to draw advance drawings like cubic Bezier curve, general Bezier curve (The general Bezier curve can be of any degrees including linear, quadratic and cubic), open curve passing through given points and closed curve passing through given points. This is a pure JavaScript library that works without using another framework, plugins, SVG or VML.

Keyboard

  • Shortcuts.js
    Makes it easy to add keyboard shortcuts(or accelerators) to your JavaScript application.
  • QFocuser
    JavaScript class for keyboard navigable AJAX widgets for better usability and accessibility

Mapping

  • Mapstraction
    Mapstraction is a library that provides a common API for various JavaScript mapping APIs to enable switching from one to another as smoothly as possible. Developers can code their applications once, and then easily switch mapping provider based on project needs, terms and conditions, and new functionality.

Maths

  • Sylvester
    Sylvester is a JavaScript library designed to let you do mathematics with vectors and matrices without having to write lots of loops and throw piles of arrays around. It includes classes for modeling vectors and matrices in any number of dimensions, and for modeling infinite lines and planes in 3-dimensional space. It lets you write object-oriented easy-to-read code that mirrors the math it represents.

Regular Expressions

  • XRegExp
    XRegExp is a JavaScript library that provides an augmented, cross-browser implementation of regular expressions, including support for additional modifiers and syntax. Several convenience methods and a powerful recursive-construct parser are also included.
  • textMonster
    Lets you chain as many regular expressions as you want together and iterate over their results in a straightforward manner.

URL

  • JavaScript URL Library
    This JavaScript library facilitates the easy construction and deconstruction of URL strings by breaking the URL into it’s various components. This library is capable or taking a URL as a string or using the current window.location and parsing it into a URL object. Any of the components of the URL can then easily be manipulated as required and the modified URL string can be retrieved.
  • UED (URL Encoded Data)
    This script only consist of one function which will take an array as its argument and return the data encoded in UED format – as a string. You can use that string to send the data via POST or GET in the query part of the URL.

Utilities (Others)

  • MoreCSS
    JavaScript library that can assist you with all the daily JavaScript things like pop-ups, tabs, tooltips, hyphenation, advanced list styling and more without forcing you to learn any JavaScript. If you already know CSS you can easily use it using CSS like syntax.
  • Modernizr
    Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.
  • IE7.js
    IE7 is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.
  • Sizzle JavaScript Selector Library
    A pure JavaScript CSS selector engine designed to be easily dropped in to a host library. Sizzle supports virtually all CSS 3 Selectors – this even includes some parts that are infrequently implemented such as escaped selectors (”.foo\\+bar”), Unicode selectors, and results returned in document order.
  • DD_Roundies
    This is a JavaScript library that makes creation of rounded-corner HTML boxes easier, with a focus on Internet Explorer.
  • DD_BelatedPNG
    JavaScript library that adds PNG image support into IE6. You can use PNGs as the SRC of an <IMG/> element or as a background-image property in CSS. Both background-position and background-repeat work as intended.
  • SocialHistory.js
    Enables you to detect which social bookmarking sites your visitors use.
  • SyntaxHighlighter
    This JavaScript library helps you to display code with color coded syntax on your website.
  • PHP.js
    JavaScript library that ports PHP functions to JavaScript. By including the PHP.JS library in your own projects, you can use your favorite PHP functions client-side. Using PHP.JS may speed up development for PHP developers who are increasingly confronted with client-side technology.

Please feel free to suggest any addition to the list in your comments. You may also want to look at:

Really Useful Classes And Libraries For PHP Developers

Today millions of websites and servers across the Internet are powered by PHP. Originally created by Rasmus Lerdorf in 1995 so that anyone can easily create a Personal Home Page; PHP has come a long way and is now widely used as general purpose scripting language that is suitable for majority of web development projects.

Numerous PHP Frameworks have evolved to enable rapid web development with PHP. However even greater number of standalone PHP libraries and classes are available which provide similar benefits. W3Avenue has compiled a list of some really useful classes and libraries that every PHP developers should be familiar with. Whether you like to use a PHP Framework or prefer to work without one, your productivity can multiply with the help of these libraries and classes.

Database

  • ADOdbAn object oriented library written in PHP that abstracts database operations for portability. It is modeled on Microsoft’s ADO, but has many improvements that make it unique (eg. Pivot Tables, Active Record support, generating HTML for paging recordsets with next and previous links, cached recordsets, HTML menu generation, etc). Supports large number of databases including: MySQL, PostgreSQL, Interbase, Firebird, Informix, Oracle, MS SQL, Foxpro, Access, ADO, Sybase, FrontBase, DB2, SAP DB, SQLite, Netezza, LDAP, and generic ODBC, ODBTP.
  • RedBeanRedBean is an easy, lightweight ORM for PHP that doesn’t require any configuration and works out of the box. The only requirement is a database connection string; it offer a single setup-class that gets you up and running with just 1 single method invocation.
  • DoctrineDoctrine is an object relational mapper (ORM) for PHP 5.2.3+ that sits on top of a powerful database abstraction layer (DBAL). One of its key features is the option to write database queries in a proprietary object oriented SQL dialect called Doctrine Query Language (DQL), inspired by Hibernates HQL. This provides developers with a powerful alternative to SQL that maintains flexibility without requiring unnecessary code duplication.
  • PHPLINQA set of PHP classes mimicing C#3.0’s LINQ (Language Integrated Query) extension methods.PHPLinq currently features: LINQ operators (select, take, skip, orderBy / orderByDescending, thenBy / thenByDescending), Lambda expressions, and Anonymous types.
  • MimesisMimesis is an Open Source PHP Flat File Database low-level API designed to act as a backend for server-side scripts that require database functionality. Instead of parsing SQL statements, Mimesis uses PHP’s object-oriented constructs to provide a distinct class with various database manipulation methods.

Development

  • PHP CodeSnifferPHP CodeSniffer is a PHP5 script that tokenizes and “sniffs” PHP code to detect violations of a defined set of coding standards. It is an essential development tool that ensures that your code remains clean and consistent. It can even help prevent some common semantic errors made by developers.
  • phpDocumentorSimilar to Javadoc, and written in php, phpDocumentor can be used from the command line or a web interface to create professional documentation from php source code. phpDocumentor has support for linking between documentation, incorporating user level documents like tutorials and creation of highlighted source code with cross referencing to PHP general documentation.

Document

  • TCPDFAn Open Source PHP class for generating PDF documents. Requires no external libraries for the basic functions; supports all ISO page formats including UTF-8, Unicode, RTL languages and HTML.
  • PHPPowerPointBased on Microsoft’s OpenXML standard PHPPowerPoint Classes enables you to read and write PowerPoint files. Features include: setting presentation meta data (author, title, description, …), adding slides, adding images to your presentation and much more!
  • PHPExcelBased on Microsoft’s OpenXML standard PHPExcel Class enables you to read and write Excel files. Features include:  setting spreadsheet meta data (author, title, description, …), multiple worksheets, different fonts and font styles, cell borders, fills, gradients, adding images to your spreadsheet and much, much more!
  • PhpRtf LitePurpose of this library is to create RTF documents with PHP, which are compatible with Microsoft Word and Open Office Writer programs. Main features include: Document sections formatting: margins, paper size, borders and other (document can have more than one section); Headers and footer formatting; Paragraph control: background, borders, alignment and other; Font control: bold, italic, face, size, color (it’s possible to use html style tags); Embedded images (.jpg and .png formats); Tables formatting: sizes, borders, background and alignment of cells; UTF-8 support.
  • PclZipOffers compression and extraction functions for Zip formatted archives (WinZip, PKZIP). It gives you the ability to create an archive, list the content and extract all its content in the file system. PclZip defines an object class which represent a Zip Archive. This class manages the archive properties and offers access method and actions on the archive.

Email

  • Swift MailerSwift Mailer integrates into any web app written in PHP 5, offering a flexible and elegant object-oriented approach to sending emails with a multitude of features: Send emails using SMTP, Sendmail, Postfix or a custom Transport implementation of your own, Support servers that require username & password and/or encryption, Protect from header injection attacks without stripping request data content, Send MIME compliant HTML/multipart emails, Use event-driven plugins to customize the library, Handle large attachments and inline/embedded images with low memory use.
  • PHPMailerFull featured email transfer class for PHP. PHPMailer features: Supports emails digitally signed with S/MIME encryption, Supports emails with multiple TOs, CCs, BCCs and REPLY-TOs, Supports Text & HTML emails, Embedded image support, Multipart/alternative emails for mail clients that do not read HTML email, Redundant SMTP servers, SMTP authentication, Tested on multiple SMTP servers: Sendmail, qmail, Postfix, Gmail, Imail, Exchange, etc.

Form

  • SecurimageAn open-source free PHP CAPTCHA script for generating complex images and CAPTCHA codes to protect forms from spam and abuse. It can be easily added into existing forms on your website to provide protection from spam bots.
  • phpObjectFormsphpObjectForms is a fully object-oriented, highly customizable, easily extendable, library for creating and processing HTML forms without writing any HTML code. Main Features: Support for all the standard HTML form input elements, Server-side input validation based on regular expressions, Optional client-side JavaScript pre-validation, Support for template-based forms. The output forms presentation is highly tied with CSS, therefore it can be easily tuned without writing any code but only by changing the style sheet.

HTML / CSS

  • HTML PurifierHTML Purifier is a standards-compliant HTML filter library written in PHP. HTML Purifier will not only remove all malicious code (better known as XSS) with a thoroughly audited, secure yet permissive white list, it will also make sure your documents are standards compliant, something only achievable with a comprehensive knowledge of W3C’s specifications.
  • GeSHi – Generic Syntax HighlighterGeSHi is a syntax highlighter for HTML, written in PHP. Basically, you input the source you want to highlight and the name of the language you want to highlight it in, and GeSHi returns the syntax-highlighted result. But it doesn’t stop there – GeSHi has many powerful and unique features, including: The ability to change the styles of any highlighted element on the fly, Use of CSS classes to reduce the amount of output produced (GeSHi can also produce a stylesheet to be used with a language on the fly), XHTML 1.0 Strict + CSS2 compliance, Auto-caps/noncaps of keywords, Line numbering (both normal and fancy forms, see the demo, and many more!

Image / Media / File

  • AsidoA PHP image processing solution, with “pluggable” drivers(adapters) for virtually any environment: GD2, Magick Wand, Image Magick via shell, Image Magick via extension, etc. Asido offers the following functionality: resize images, watermark images, rotate imates, copy images, crop images, grayscale images, convert images.
  • PHP ThumbA light-weight image manipulation library aimed at thumbnail generation. It features the ability to resize by width, height, and percentage, create custom crops, or square crops from the center, and rotate the image. You can also easily add custom functionality to the library through plugins. It also features the ability to perform multiple manipulations per instance (also known as chaining), without the need to save and re-initialize the class with every manipulation.
  • WideImageWideImage is an object-oriented library for image manipulation. The library focuses on often-used image operations and ease of use. It provides a simple and unified way to loading and saving images from/to files, strings, database and even URLs (load only, must be enabled in PHP). Supports the most common image formats: GIF, PNG, JPEG, GD and GD2.
  • Smart Image ResizerAllows you to resize and crop any image on your website without touching the actual image or writing any code. Simply upload each image once at a high enough resolution and then reuse it at any size you want, anywhere you want. Features include: Resizes JPEGs, GIFs, and PNGs, Intelligently sharpens for crisp photos at any size, Can crop based on width:height ratios, Can color-fill transparent GIFs and PNGs, Built-in caching keeps image variations for optimal performance.
  • class.upload.phpThis PHP script uploads files and manipulates images very easily. The perfect script to generate thumbnails or create a photo gallery! It can convert, resize and work on uploaded images in many ways, add labels, watermarks and reflections and other image editing features. You can use it for files uploaded through an HTML form, a Flash uploader, or on local files.
  • getID3()A PHP script that extracts useful information (such as ID3 tags, bitrate, playtime, etc.) from MP3s & other multimedia file formats (Ogg, WMA, WMV, ASF, WAV, AVI, AAC, VQF, FLAC, MusePack, Real, QuickTime, Monkey’s Audio, MIDI and more).
  • PHP PSD ReaderPHP comes with built-in support to read and write images in many formats using the GD library. However, it does not support the Photoshop image format: PSD. This class fill partly that void by reading Photoshop PSD image files and creating a GD image resource from the Photoshop image bitmaps.

JavaScript / AJAX

  • PHPLiveXPHPLiveX is a lightweight PHP-JavaScript class library that helps you integrate AJAX to your PHP applications. Without a page is loaded again, you may call your PHP functions in the same page, submit your form to an URL and send a request to another page with any type of data.
  • XajaxXajax is an open source PHP library and JavaScript engine that allows you to easily create powerful, web-based, Ajax applications using HTML, CSS, JavaScript, and PHP that can asynchronously call server-side PHP functions and update content.

Microformats

  • Xmf ParserExtensible Microformats Parser for PHP 5. Currently supported Microformats include: xfn, rel-license, rel-tag, geo, adr, hcard, hcalendar, hreview, hresume.
  • iCalcreatoriCalcreator is a PHP class managing iCal formatted files for non-calendar systems like CMS, project management systems and other applications able to process calendar information. iCalcreator features create, parse, edit and select calendar and calendar components.
  • hKitA simple PHP5 tool for extracting common microformats from a page. The page can be presented as a string or a URL, and the result is handed back as a standard PHP array structure. hkit uses SimpleXML for parsing, and therefore requires PHP5.
  • TransformrA Simple set of XSLT and PHP tools for Transforming Microformats.

RSS & Atom Feeds

  • SimplePieAn open sources PHP class that provides an easy to use API for handling all of the dirty work when it comes to fetching, caching, parsing, normalizing data structures between RSS and Atom formats, handling character encoding translation, and sanitizing the resulting data.

Security

  • PHP Intrusion Detection System (PHPIDS)A simple to use, well structured, fast and state-of-the-art security layer for your PHP based web application. The IDS neither strips, sanitizes nor filters any malicious input, it simply recognizes when an attacker tries to break your site and reacts in exactly the way you want it to. Currently the PHPIDS detects all sorts of XSS, SQL Injection, header injection, directory traversal, RFE/LFI, DoS and LDAP attacks. Based on a set of approved and heavily tested filter rules any attack is given a numerical impact rating which makes it easy to decide what kind of action should follow the hacking attempt. This could range from simple logging to sending out an emergency mail to the development team, displaying a warning message for the attacker or even ending the user’s session.

Testing & Debugging

  • PHPUnitPHPUnit is a member of the  xUnit family of testing frameworks and provides both a framework that makes the writing of tests easy as well as the functionality to easily run the tests and analyze their results.
  • SimpleTestSimpleTest is is similar to JUnit/PHPUnit. It supports mock objects and can be used to automate the regression testing of web applications with a scriptable HTTP Client that can parse HTML pages and simulate things like clicking on links and submitting forms.
  • PHP DebugProvides assistance in debugging PHP code, by program trace, variables display, process time, included files, queries executed, watch variables… This information is gathered through the script execution and therefore are displayed at the end of the script (in a nice floating div or a html table) so that it can be read and used at any moment.

Web Services

Miscellaneous

  • WPGetWPGet is a script that is designed to allow you to include a short summary of your recent blog posts on your website. Specifically, it works with WordPress and is great for integrating a WordPress blog into a site that isn’t completely powered by the WP platform.

Additional Resources

Here are some additional resources to help you find PHP classes, libraries and code snippets that you may still be looking for:

Please feel free to suggest any addition, correction or updates in your comments. You may also want to look at:

40 Useful jQuery Techniques and Plugins

In this post, we present 40 useful but obscure jQuery plug-ins that will hopefully help you improve the user experience on your websites. We look forward to your ideas and suggestions in the comments to this post.

Tips, Hints, Navigation

TipTip jQuery Plugin

TipTip detects the edges of the browser window and will make sure the tooltip stays within the current window size. As a result the tooltip will adjust itself to be displayed above, below, to the left or to the right of the element with TipTip applied to it, depending on what is necessary to stay within the browser window. TipTip is a very lightweight and intelligent custom tooltip jQuery plugin. It uses ZERO images and is completely customizable via CSS.

JS-00 in 40 Useful jQuery Techniques and Plugins

Contextual Slideout Tips With jQuery & CSS3

A set of contextual slideout tips with jQuery & CSS3, which are ideal for product pages and online tours.

Js-t1 in 40 Useful jQuery Techniques and Plugins

jQuery Slider plugin (Safari style)

jQuery Slider is easy to use and multifunctional jQuery plugin.

JS-52 in 40 Useful jQuery Techniques and Plugins

jSquares

jSquares is a jQuery plugin that pops up an image and a description in an overlay on hover. It is basically identical to the image grid found on www.ted.com. Works like a charm in IE6+, FF 3+, Safari 3+ and Opera 10.

Js-x1 in 40 Useful jQuery Techniques and Plugins

Nav-o-Matic

Single sprite navigation is great, but we all know it can get a little bit tedious. All that measuring of pixel perfect photoshop slices, careful coding of your CSS and subsequent calculator bashing is enough to drive anyone to start microwaving fluffy kittens. Wouldn’t it be great to have a fancy online tool to take care of all the boring stuff for you in a few simple clicks? Well wish no more…

JS-58 in 40 Useful jQuery Techniques and Plugins

Jquery Two Sided Multi Selector

This Plugin converts a multi select list into a two-sided multi-select list. This means you display a list of options in the left hand box and items you select are moved into the right hand box.

JS-01 in 40 Useful jQuery Techniques and Plugins

jQuery MegaMenu Plugin

JS-11 in 40 Useful jQuery Techniques and Plugins

jQuery Keyboard Navigation Plugin

The jQuery Keyboard Navigation Plugin provides the capability for elements on a page to be navigated and activated via the keyboard’s up, down, right and left arrow keys.

JS-77 in 40 Useful jQuery Techniques and Plugins

FullCalendar – Full-sized Calendar jQuery Plugin

FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event).

JS-89 in 40 Useful jQuery Techniques and Plugins

Forms

iPhone Style Radio and Checkbox Switches using JQuery and CSS

A simple technique for creating radio button and checkbox switches with jQuery.

JS-86 in 40 Useful jQuery Techniques and Plugins

jQuery UI Selectmenu: An ARIA-Accessible Plugin for Styling a Custom HTML Select Element

Our latest contribution to labs is the selectmenu plugin, which is designed to duplicate and extend the functionality of a native HTML select element, and lets you customize the look and feel, add icons, and create hierarchy within the options. Best of all, it’s built with progressive enhancement and accessibility in mind, has all the native mouse and keyboard controls, and is ThemeRoller-ready.

JS-17 in 40 Useful jQuery Techniques and Plugins

A Better jQuery In-Field Label Plugin

This is a pretty nice effect, and it can really help to save space on forms. There are a billion different ways to implement this, and I don’t suggest you use the example from above because that was just a quick way to show the effect. So let’s walk through a couple of different implementation approaches and figure out the best way to implement this feature.

JS-24 in 40 Useful jQuery Techniques and Plugins

Sliding Labels

Tim Wright came up with a jQuery technique that presents labels in input fields by default but then slides them to the left (or up) rather than removing them on click. If JavaScript is turned off, the labels are displayed above the input fields. The small jQuery snippet works in all major browsers and can be used for input and textarea elements.

JS-59 in 40 Useful jQuery Techniques and Plugins

Login or Signup with jQuery

Some users doesn’t like to filling the registration form. So that I had implemented login and singup fields in same block just controlling with jquery and PHP. It’s is very simple javascript and basic PHP code.

Js-y1 in 40 Useful jQuery Techniques and Plugins

Uniform – Sexy forms with jQuery

Have you ever wished you could style checkboxes, drop down menus, radio buttons, and file upload inputs? Ever wished you could control the look and feel of your form elements between all browsers? If so, Uniform is your new best friend. Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.

JS-66 in 40 Useful jQuery Techniques and Plugins

Slideshows and Galleries

jQuery Quicksand plugin

Reorder and filter items with a nice shuffling animation.

JS-82 in 40 Useful jQuery Techniques and Plugins

Nivo Slider: Slideshow jQuery Script

Nivo Slider is a simple and powerful jQuery image slider plug-in that fits the bill. The tool has nine unique transition effects built in, as well as plenty of options to fiddle with: for instance, you can define functions to be applied before and after the image has changed, set the animation speed and activate pause on hover.

Slideshow in 40 Useful jQuery Techniques and Plugins

#grid

#grid is a little tool that inserts a grid onto the Web page. You can hold the grid in place and toggle it between the foreground and background. To display the grid, just press a hot key on your keyboard, and you can set your own short keys to switch views. #grid comes set up with a 980 pixel-wide container, with 20-pixel gutters, and assumes one lead of 20 pixels. You can download the source code (JavaScript and CSS) and use classes for multiple grids.

Analog in 40 Useful jQuery Techniques and Plugins

Improving The Content

Dynamic Footnotes With CSS and jQuery

Lukas Mathis has come up with an elegant solution to improve user experience with footnotes: his jQuery script shows the content of footnotes as soon as the user indicates that they are interested in it – i.e. when they move the cursor over the footnote symbol.

Footnote in 40 Useful jQuery Techniques and Plugins

jQuery Captify Plugin v1.1.3

Captify is a plugin for jQuery written by Brian Reavis to display simple, pretty image captions that appear on rollover. It has been tested on Firefox, Chrome, Safari, and the wretched Internet Explorer. Captify was inspired by ImageCaptions, another jQuery plugin for displaying captions like these. The goal of Captify is to be easy to use, small/simple, and completely ready for use in production environments (unlike ImageCaptions at the moment).

JS-88 in 40 Useful jQuery Techniques and Plugins

Copy to Clipboard with ZeroClipboard, Flash 10 and jQuery

With today’s post I will show you a contrived example to get you started. I eventually hope to add this to the contextMenu.js jQuery plugin that I use, but for now this should be pretty straight forward. I do want to note that in the demo and download I am loading the latest version of the jQuery library (1.3.1) from Google’s CDN for the first time in any of my posts. For more information on how to do this see the instructions from Google.

JS-41 in 40 Useful jQuery Techniques and Plugins

Layouts

Columnizer jQuery Plugin

This jQuery plugin will help you create a multi-column layout without complex CSS hacks. Works across all major browsers.

JS-71 in 40 Useful jQuery Techniques and Plugins

jQuery Grid Plugin

JS-50 in 40 Useful jQuery Techniques and Plugins

Charts and Graphs

Dygraphs: Create interactive graphs from open source Javascript library

Dygraphs is an open source JavaScript library that produces an interactive, zoom-able charts of the present time series. It is mainly designed to display the dense data sets and enable the users to explore and interpret them. It is a JavaScript Visualization Library.

JS-38 in 40 Useful jQuery Techniques and Plugins

gMap – Google Maps Plugin For jQuery

gMap is a lightweight jQuery plugin that helps you embed Google Maps into your website. With only 2 KB in size it is very flexible and highly customizable.

JS-65 in 40 Useful jQuery Techniques and Plugins

10 jQuery Plugins for Easier Google Map Installation

The plugins below offer not only an easier method to install a map, they also offer the option to add extra functionality, should you choose to need them. They also all come with a varied degree of docs, some are extensive and some non-existent, so choose your plugin wisely.

JS-78 in 40 Useful jQuery Techniques and Plugins

Images and Visual Effects

jQuery imageless buttons a la Google

This jQuery plugin is an attempt to recreate Google’s imageless buttons and prove that it doesn’t take a whole team of engineers and an endless cycle of code revision and quality control (their own words) to pull this off. I don’t know how Google did it, but my buttons automatically adapt to paddings and other styling you wish to use. They allow for a lot of stylistic customisatoin via a few lines of css while keeping all the display critical css rules hidden deep inside the plugin.

JS-67 in 40 Useful jQuery Techniques and Plugins

jQuery Presentation Plugin

jQuery Presentation Plugin: Say NO to Keynote!

JS-90 in 40 Useful jQuery Techniques and Plugins

jQuery pageSlide

This plugin allows any developer to recreate a similar interaction on their own website using a few simple lines of Javascript. By attaching the method to an anchor tag, pageSlide wraps the original body content into a wrapper and creates an additional block for the secondary content load. The slide is animated whenever the click event is invoked.

JS-74 in 40 Useful jQuery Techniques and Plugins

jqFancyTransitions: jQuery Image Rotator Plugin

jqFancyTransitions is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects.

JS-15 in 40 Useful jQuery Techniques and Plugins

A demo of AD Gallery

A highly customizable gallery/showcase plugin for jQuery.

JS-16 in 40 Useful jQuery Techniques and Plugins

Pines Notify jQuery Plugin

Pines Notify’s features include: timed hiding with visual effects, sticky (no automatic hiding) notices, optional hide button, supports dynamically updating text, title, icon, type, stacks allow notice sets to stack independently, control stack direction and push to top or bottom.

JS-51 in 40 Useful jQuery Techniques and Plugins

Animate Panning Slideshow with jQuery

In today’s tutorial we’ll take the makings of a classic slideshow, but use a different kind of transition to animate between slides. It may not fit every project, but diversity is always welcome in the world of web design.

JS-79 in 40 Useful jQuery Techniques and Plugins

Sponsor Flip Wall With jQuery & CSS

Designing and coding a sponsors page is part of the developer’s life (at least the lucky developer’s life, if it is about a personal site of theirs). It, however, follows different rules than those for the other pages of the site. You have to find a way to fit a lot of information and organize it clearly, so that the emphasis is put on your sponsors, and not on other elements of your design.

JS-39 in 40 Useful jQuery Techniques and Plugins

Last Click

CofeeScript

CoffeeScript is a little programming language that compiles JavaScript while simplifying the code that developers actually have to deal with. It works with current JavaScript libraries and compiles clean code, leaving even comments intact. Once developers familiarize themselves with how CoffeeScript works, they could potentially save themselves a lot of time and headaches with the simplified code.

Coffeescript in 40 Useful jQuery Techniques and Plugins

Brosho ‘Design in the Browser’ jQuery Plugin

With this Plugin you can style your markup right in your browser with a build-in element selector and CSS editor. Generate the CSS code of altered elements with one click and use it in your own stylesheet.

JS-62 in 40 Useful jQuery Techniques and Plugins

gameQuery – a javascript game engine with jQuery

gameQuery is a jQuery plug-in to help make javascript game development easier by adding some simple game-related classes. It’s still in an early stage of development and may change a lot in future versions. The project has a Google Code page where the SVN repository of the project is hosted and a twitter page where you can follow the daily progress of the development.

JS-13 in 40 Useful jQuery Techniques and Plugins

Mind-blowing JavaScript Experiments

The following JavaScript experiments demonstrates the amazing capabilities of the modern browsers such as Chrome and Safari. In this post I will showcase to you an array of experiments that will surely blows your mind off.

JS-35 in 40 Useful jQuery Techniques and Plugins

Is adding round-ups to our regular content a good idea?

What do you think, is adding more round-ups to our regular content a good idea?
Yes, absolutely!Yes, why not.No, rather not.No, absolutely not!It depends (see my comment)

Tooltip using CSS

Do you want to have custom tooltip without using JavaScript in your website? Using following code you will have custom tooltip in your website.

<style type=”text/css”>

a:hover {
background:#ffffff;
text-decoration:none;
} /*BG color is a must for IE6*/
a.customtooltip span {
display: none;
position: absolute;
padding: 2px 3px;
margin-left: 2px;
}
a.customtooltip:hover span {
display: inline;
background: #ffffff;
border: 1px solid #cccccc;
color: #6c6c6c;
}

</style>

Now use following HTML code that will generate custom tooltip on link.

This is <a target="_blank" class="customtooltip" href="#">Custom Tooltip<span>Custom Tooltip</span></a>.

Inner html tag in is using for tooltip text. By default this text is hidden popped up when user move mouse on Link.

The specified CGI application misbehaved by not returning a complete set of HTTP headers

By default WordPress uses a query string to identify a post. This is neither search engine friendly nor human friendly. A better way is to use a custom URI to better identify your posts.

Default word press url structure: /?p=1

Customized post url can be as follows:
/index.php/2009/03/sample-post/
/index.php/archive/sample-post/

When you try to change default url of wordpress then you may got an error something like “The specified CGI application misbehaved by not returning a complete set of HTTP headers“.

This error generated because you change the default behaviour of url implementation on IIS for PHP and there were no extension to handle that request. PHP can process customized url but by default; it can not. You have to modify php.ini to use custom url.

Step 1: Generate new php.ini file and place it into your root directory.

Step 2: Modify newly generated php.ini and write following two lines.

cgi.fix_pathinfo = 1
cgi.force_redirect = 0

You’ll create new php.ini for each domain or sub domain that is using custom url structure or if you have access to modify php original ini file then you only modify that and you do not need to create new php.ini file for each domain or sub-domain.

Permalink for WordPress – IIS 6 mod_rewrite FIXED

If you install WordPress on IIS you will notice your friendly URLs do not work.  This is because WordPress wants to use an apache add-on called “mod_rewrite.”  The quick rundown of that this does is it will take your friendly browser URL and actually change them to index.php on the back end.  One problem with this method is that IIS does not load apache mods.  Here is an easy and free way around this:

  1. On your IIS Server download and install ISAPI_Rewrite Lite.  This filter does the job of mod_rewrite for IIS.  When downloading make sure to use the free Lite version.  This Lite version does not limit the product very much and will be perfectly fine (and free) for our wordpress blog.  Just install Rewrite Lite to the default locations for this tutorial.
  2. Next add the ISAPI filter to your IIS Site.
    You will find this setting by right clicking yourIIS site -> properties -> ISAPI filters tab -> Add …  Name the filter whatever you wish and your path to your executable should be:
    C:\Program Files\Helicon\ISAPI_Rewrite3\ISAPI_Rewrite.dll
    Click OK on both windows to save your settings.
  3. Next navigate to C:\Program Files\Helicon\ISAPI_Rewrite3
    Here we will edit httpd.conf  (Note:  This is the difference between the pay version and the Lite version.  In the pay version you will need to edit the .htaccess file on your web folders root)
  4. Open the httpd.conf file in wordpad and paste in these lines:
    RewriteBase /
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ index.php?p=$1 [NC,L]
  5. Save and exit this file.
  6. To complete your IIS changes, Go to start, run and run the command:  iisreset /restart
  7. Now lets change your WordPress settings.  Navigate to http://yourblog/wp-admin
  8. Navigate to the left side menu bar -> settings -> Permalinks
  9. Now you get to choose how you want your posts to look.  I choose a custom setting and just: /%postname%  This is how you see this blog working today.
  10. Click “Save Changes” and you should see your new friendly URLs!