odyniec.net

Archive for the ‘jQuery’ Category

New Version of ImgZoom in Development

Tuesday, March 9th, 2010

Last weekend I started working on the next version of imgZoom, the jQuery plugin that uses vector graphics to implement a smooth zoom effect on thumbnailed images. With the initial release (a couple months back), I boldly announced that I intend to one day turn it into a decent substitution for Lightbox, and I think I’m actually getting closer to that. The current version has the lightbox-esque features of displaying images in a window, and allowing to navigate between previous and next images.

I transformed one of my testing pages into a nicely-looking gallery, so if you want to take a look at the development version in action, be my guest. The gallery should work correctly in most browsers, only Internet Explorer might still have some issues — I’m working on that. As always, I’m open to feedback.

ImgAreaSelect 0.9.2

Saturday, February 20th, 2010

ImgAreaSelect version 0.9.2 is out. This version fixes a few minor bugs, and introduces a new option that allows you to completely remove the plugin from the image that it was attached to. Thanks to all the people who helped me by reporting bugs and sending feedback.

I have also added a new example to the Advanced Usage page — it demonstrates an extension of the plugin API that allows you to animate the selection area.

SelectList 0.1.2

Sunday, January 31st, 2010

I’ve just released a new version of the selectList jQuery plugin — no exciting new features, though, this release only fixes a bug that generated a JavaScript error in IE6 when there were no options in the original select field (thanks to CJ for reporting this).

SelectList 0.1.1

Saturday, October 31st, 2009

Here’s another minor update to one of my jQuery plugins — this time it’s selectList, version 0.1.1. The update is mostly a code cleanup, with one functional change — if a hint has been provided with the title attribute, it is always shown as the currently selected option in the dropdown list after each selection takes place (as requested by some).

ImgZoom 0.1.1

Friday, October 2nd, 2009

Today I released a new version of imgZoom. It’s just a minor update that fixes one bug and introduces the getOptions() API method.

I have also updated the documentation — it now includes a reference of the available API methods.

Learning jQuery 1.3 – Book Review

Monday, September 28th, 2009

Learning jQuery 1.3I recently had a chance to read “Learning jQuery 1.3″ by Jonathan Chaffer and Karl Swedberg. Having been using jQuery for quite a while in dozens of web development projects, and having released a few plugins, I consider myself an advanced user of this great library. However, my knowledge of jQuery comes almost exclusively from the official online documentation (particularly the API reference) and some occasional reading. So I thought this could be an interesting opportunity to compare my experience-based knowledge with a structured course in a book.

The book is divided into two parts — the first six chapters are a gradual introduction to the concepts of jQuery and its basic features, while the remaining chapters discuss the more advanced topics and show some real-world applications of the library.

I expected the introductory part of the book to be a bit boring, since I already knew all that elementary stuff, but I was pleasantly surprised to be wrong. The authors have managed to describe the basics (selectors, events, AJAX, etc.) really comprehensively, drawing attention to many details and subtleties. For example, the chapter about effects is nothing like the “how to amaze your visitors with cool effects” approach that many tutorials seem to take — instead, the reader gets a thorough explanation of topics such as custom animations and effect queuing.

The advanced chapters are even more interesting, demonstrating a number of practical examples of how jQuery can enrich users’ experience when dealing with common web application features, such as presenting data in tables and filling out forms. While the examples are quite complicated and lead to code snippets spanning several pages, they remain beginner-friendly, as all the new elements are introduced progressively, starting with the basics and adding more features along the way.

Last but not least, the book includes useful appendices that list numerous valuable online resources and development tools for jQuery users. There is also an excellent appendix on JavaScript closures, which is a very significant (and often misunderstood) subject for jQuery plugin developers, as well as anyone interested in advanced JavaScript programming.

What I consider the greatest strength of the book is the professional approach to web development that the authors take and try to pass to the reader. The book places great emphasis on good web development practices, especially accessibility issues — all the many examples conform to the concepts of graceful degradation and progressive enhancement, and the presented techniques can be safely implemented in accessible web applications.

I highly recommend the book to any present or future jQuery user. If you’re a beginner, it will help you learn jQuery and use it the right way. If you’re experienced, you might be surprised to learn a few new tricks (I was), or at the very least, you will find it an interesting read.

ImgAreaSelect 0.9.1

Friday, August 7th, 2009

I have just released an update to imgAreaSelect with a version number of 0.9.1. It fixes a nasty bug found in version 0.9 that affected the initialization stage, causing some unexpected behavior (like not being able to set the initial selection) and JavaScript errors.

Thanks to all the people who noticed the bug and reported it to me.

ImgZoom 0.1

Monday, August 3rd, 2009

Here’s yet another jQuery plugin made by yours truly. ImgZoom creates a smooth zoom effect for thumbnailed images by doing a graceful transition from the thumbnail to the full-size image. Feel welcome to take a look at the live demo.

There are already a few jQuery plugins that do this, but as far as I know they all achieve the zoom effect by gradually changing the dimensions of HTML image elements. ImgZoom, on the other hand, utilizes the vector graphics capabilities found in browsers (including Internet Explorer), which results in really smooth animation and allows for additional effects to be incorporated into the process.

I’m releasing the plugin a bit early, as it only has about half of the functionality that I intend to implement. My long-term evil plan is to make the plugin a viable alternative to Lightbox et al, with prev/next links, keyboard support and such. Anyway, I’ll be happy to get some feedback on this premature 0.1 release — let me know if you like the plugin, whether you think it would be useful, and what features you would like to see in future versions.

ImgAreaSelect 0.9

Monday, July 20th, 2009

I finally found enough time to finish developing the new version of imgAreaSelect, and I’m happy to announce it’s available for download.

This release brings a few major changes and new features — here’s a summary:

  • Styling the plugin is now done with CSS (the old styling options are still supported)
  • A new option has been added to show/hide the plugin with a fade effect
  • A new option has been added to get an instance of the plugin’s object
  • Some of the plugin’s methods have been made public and can be called through the instance
  • A new callback function has been introduced (onInit)

Implementing and testing the new features took me about one third of the total time I worked on this version, I spent the rest cleaning up and refactoring the code. As a result, although the new version has many new features, it’s actually a bit smaller that the previous release (0.8). The packed JavaScript file (included in the distribution package) is less than 8KB in size.

The plugin’s project page has also undergone some face lift and reorganization. The documentation is now on a separate page, and there’s a new examples page (at this moment, only three examples are included, but I will be adding more soon, I promise).

There is also a special bonus for all the people who want to modify the plugin’s source code and implement their own solutions based on it — I have made available an extensively commented version of the source code.

SelectList 0.1

Friday, June 5th, 2009

I have developed a new jQuery plugin, called selectList. It’s purpose is to transform the standard multiple selection box used in web forms into a nicely looking list that you can add items to and remove items from. So, it turns this:

Traditional selection box

Into this:

selectList

Apart from the more attractive appearance, the list approach is also better in terms of user friendliness, as all the selected items are shown to the user all the time. With the traditional solution, the user often has to scroll the box to check if all the desired options have been highlighted.

The plugin is actually an extension of the idea that I demonstrated in an article on multiple select fields that I wrote some time ago. Back when I wrote it, I thought of developing this plugin, and, well, I finally had a spare afternoon to write it (and half of night to deal with browser incompatibilities). Be my guest and take a look at the project page and some examples — as usual, your feedback is more than welcome.