PhotoShow is a free and open source PHP application for creating and managing a web gallery.

The application works without a database and uses the folder structure for creating the hierarchy of the galleries (supports unlimited sub-galleries).

Images can be added either from the admin panel via a drag 'n' drop uploader or directly from the filesystem. Organizing the folders/images, editing and deleting them are also accomplished with the same methods.

There is support for multiple users and groups where each can have different permissions.

PhotoShow can auto-generate thumbnails of images, display the EXIF data and allows others to comment them.

Tooltips are tiny user interface elements which are very useful in displaying information "on request" without breaking the attention/focus.

WRD had previously featured qTip and it now has a new version, qTip2, with lots of improvements and new, exciting features.

The plugin can display the tooltip in any position wanted, plays nicely with image maps and they can be set to follow any element (handy for drag 'n' dropped and animated items) or mouse.

Tooltips can be styled completely, there is an optional Themeroller support and they can even be displayed as modal windows.

It has built-in Ajax integration and can load any remote data. qTip2's website has lots of creative demos including 3rd part service and various popular plugin integrations.

P.S. The download package can be customized to şnclude only the features needed and a converter exists for upgrading from the 1st version.

bgStretcher is a jQuery plugin that proportionally resizes the background-image to fill the entire viewport.

It can be used with a single image just for the resizing feature or multiple images as a slideshow.

The slideshow can be browsed with pagination and prev-next buttons besides the autoplay and there are multiple transition types offered.

Further customization is possible by defining the slideshow speed, delay between each item and sequence mode (in an order or randomly).

Also, methods exist for playing and pausing it from any custom events.

Mimicking the interactions offline is always popular in the world of computers.

Page-flips are one of the most popular ones of them in web design. They are implemented very successfully in Flash, many websites, documents, magazines are being created/published each day.

With the capabilities of new web technologies, we can also expect them to be accomplished using only HTML, CSS and JavaScript (remember "20 Things I Learned"? It is also open source).

There are several easy-to-use jQuery plugins that offer a good page-flip experience and help creating book-like interfaces. Here they are:

Turn.js

A jQuery plugin that has lovely and smooth page flip transitions.

The first page acts as the cover and the rest can be browsed by simply turning the pages from any desired corner.

Turn.js is only 15kb, works on mobile & tablet browsers as well and makes use hardware acceleration.

jPageFlip

jPageFlip is a highly customizable jQuery plugin for book-like interfaces.

It can -optionally- flip pages on mouse clicks and has support for transparent + semi-transparent image files.

P.S. The plugin performs better on WebKit browsers.

Read the rest of this entry »

Flotr2 is an open source library for HTML5 canvas charts and graphs which is a fork of the popular flotr without the dependency of Prototype JS framework and has many improvements.

The library is framework independent and has support for line, bar, candle, pie and bubble charts.

There are lots of customization options offered like the ability to define titles, subtitles, colors, labels on/off and so many others for each and every possible variable.

Flotr2 outputs are interactive, they can be set to respond to the actions of the user. And, they can be extended with plugins (there are already several ones that can add interactions, new decorations, etc.).

Charts and graphs work in all major browsers (including IE6) and they are mobile compatible.

Almost every website needs a form. Whether it is for asking visitors to contact you, an online job application or an event registration.

Also, forms need to be secure, user-friendly and the data collected must be reachable for analyzing/responding easily.

Ajax Form Pro, a professional and downloadable PHP application, which was featured before, now has a new version with more features and they are giving away 3 Developer licenses ($67/each) and offering a 20% discount to WRD readers.

Joining the giveaway is so easy, details are mentioned at the bottom of this and here is more information about the app:

The application has an administration panel for creating a form with:

• any input types (including file uploads)
• settings like the text to be displayed (or redirection to any URL) after submission, if the contents of the form will be e-mailed to anyone..
• custom styling and layout
• captcha enabled or not

and allows us to integrate it into web pages either with the generated PHP code or via an iframe.

Form can be styled either with the settings provided or using a custom CSS for advanced/complete styling.

It is created with usability in mind; the validator is real-time, works as-you-type, forms degrade gracefully for users without JavaScript and an option exists for displaying them inside a lighbox (so you can provide a link to anything which will display the form without leaving the page).

To sum up, Ajax Form Pro is a so useful application not only for creating secure forms but also for keeping/reaching the data collected in a single, organized interface.

A discount for WRD Readers

Ajax Form Pro is offering a 20% discount to WRD readers with the coupon code AFPWRD (which is valid for the next 2 weeks).

Here are the shortcuts to the pages for using the coupon codes:

• Single License
• Developer License
• Extended License

How to join the giveaway?

In order to get a chance win one of the 3 Developer Licenses, simply comment to this post and winners will be selected randomly with the query below on 8 February 2012 (1 week later):

SELECT * FROM wp_comments WHERE comment_post_id=2779 AND comment_approved=1 AND comment_type='' GROUP BY comment_author_email ORDER BY RAND() LIMIT 3

Good luck to everyone.

The winners

Here they are:

• Kunule (comment #506883)
• Leon (comment #506936)
• chromus (comment #506748)

Congratulations and thanks very much for joining.

Tree menus are great for displaying nested data in a user-friendly and easy-to-browse interface.

jOrgChart is a jQuery plugin which converts nested unordered lists into tree menus but with an organization chart-like output.

It has support for any depth, clicking each item can show/hide the sub-levels and drag 'n' dropping elements from one node to another is possible, the interface will adjust the levels accordingly.

There is no limit in the contents to be used inside each item, any HTML elements are supported (except  <ul> and <li>) and the plugin is so handy for visualizing hierarchical data (org. chart, family tree, computer network, etc.).

When we need to clip an irregular shape from an image and use it on the web, PNG is the most common answer as it is the only image format used by all web browsers that support alpha channels.

However, PNG images come with a penalty of size (if the source is a photograph) compared to similar sized JPEGs.

polyClip.js is a script, built on jQuery, that allows us to clip any image with imagemap coordinates using HTML5 Canvas.

For implementation on many images, "how practical would it be to use polyClip.js" is open to discussion however, for only few images, it can be a huge byte-saver.

And, it is supported in most browsers including IE7 (with Excanvas).

WordPress offers a huge space for creativity and flexibility when designing and developing new websites.

Any type of website can be built on top of it: from blogs to newspapers, corporate websites to landing pages and even social networks. All you need is a theme coded to handle that functionality.

Yes, WordPress theme development. That is an easy process for experienced hands who knows the capabilities of the application and familiar with its functions and "not too hard" for others.

To simplify developing new themes, there are awesome WordPress theme frameworks and starter themes that you can use as a base for skipping the repetitive steps and begin with an optimized playground.

Here are the 34 free and good-quality ones that will save your time from searching them. And, in the bottom, you can find a comparison table for these WordPress theme frameworks.

Roots

The main power of this framework is its extremely clean WordPress code output, clean head and URLs (even for the head, CSS and JS paths).

Upon its activation, it automatically applies many useful customizations (like creating a homepage, defining the permalink structure, etc.).

Roots has 2 widget areas and it includes Blueprint CSS, 960.gs, the 1140px Grid, Adapt.js, Less Framework 4, Foundation by Zurb, and Bootstrap by Twitter.

Skeleton

It is a theme aimed at helping you build simple, uncluttered, useable, and mobile-friendly websites.

Skeleton has styling for typography and form elements + includes simple tabs and accordions.

The theme is based on and inspired from Skeleton Responsive Boilerplate, Theme Options Framework, Thematic Framework, Formalize and TwentyTen Theme.

P.S. There are also optional styles for bbPress and Jigoshop.

Read the rest of this entry »

In order to save space and display the content only when requested, expanding/collapsing panels are used widely.

Using jQuery, such a functionality is very easy to implement with methods like toggle, show, hide and several others.

jQuery-Collapse is an ultra-lightweight (<1kb minified) plugin built specifically for this case with added features.

It allows us to define the HTML elements to be hidden and displayed when needed with a simple function that has callbacks for integrating custom events.

There is also cookie support which remembers the state of the content panels and displays them accordingly when the page is re-visited.

The plugin is also designed with WAI-ARIA in mind that helps the web pages being more accessible to people with disabilities.

And, it is also cross-browser, completely tested in major browsers (including IE6).