JavaScript

ZoomIt is a JavaScript image zoom developed for MooTools 1.3 (1.2 compatible) and jQuery that allows display of detailed, large images based on smaller images that can be placed into the context of web pages. A new approach, different from the previous one (that can be seen here) allows easier placement and implementation along with possibilities of styling using CSS classes placed in stylesheets. The two script versions (for jQuery and MooTools) offer the very same functionality so whatever your preference, you get the same thing no matter what JavaScript framework you use.

The script allows mouse events customizations meaning that the zooming process can be started on either click or mouse movement over the thumbnail image. Also, moving the zoomed area can be set to work with drag or mouse movement over the image. The big image that displays the details has a loader CSS class on it that is available as a parameter (allowing to customize the loader in any way you want) and it also has “memory” capability, meaning that at a later time the user zooms the image, the previous position will be displayed by default. The script works well in all major browsers (Firefox, Safari, Chrome, Opera) with the latest versions. Older browser versions haven’t been tested but it shouldn’t be a problem with them (in case there is, please leave a comment below). (more…)

Featured Articles Lite for Wordpress is a powerful plugin that enables a very easy and intuitive setup for a JavaScript slider that will display and rotate posts or pages.
Having plenty of options that can be set directly from Wordpress admin, it allows an imaginative use to suit the style of the blog displaying it.

Except the admin parameters and default themes that come with it by default, it can be customized even more by creating new themes to suit the general look requiring only some medium knowledge of HTML and CSS.

Starting with version 2.3 (compatible with Wordpress 3.1+), all JavaScript for the slider is written in jQuery; this prevents any conflicts between various JavaScript frameworks you might be running on your Wordpress blog. Other improvements are multiple sliders creation and management, widget support to easily display any slider into your widget areas, clear manual implementation code that you can put into the theme files to display any slider anywhere you want it to.

Bottom line, from start to finish, it will take only minutes to display articles into the slider and to choose where to have it shown in your blog. (more…)

SlideItMoo plugin for Wordpress implements the MooTools plugin having the same name into an easy to use plugin that allows you to set image galleries into your posts and pages with only a few clicks. The JavaScript source can be found here with various examples and implementation instructions.

If you know SlideItMoo, you know that it can be used in various ways ( as banner rotator, image slider, featured content presentation etc. ) but this Wordpress plugin only implements the image slider functionality for the horizontal slider. As for features, it allows displaying as many image sliders as needed into a post or page, each having its own properties and images. Also, you can call the plugin from your template files by passing it only 2 arrays, one containing the slider settings and one containing the images ids. Everything is kept as simple as possible to allow you to easily define sliders into your posts. (more…)

Developed using MooTools 1.2, SelectoMoo is a plugin that replaces the default select box element from a form with a stylish, CSS/JavaScript based select box. It offers the possibility to completely change the appearance by only using CSS style sheets so changing design turns into a pretty simple task.

The behavior tries to mimic the one of a classic select element, meaning it supports keyboard navigation between form fields ( by pressing tab key ), it opens on label click, when opened navigation can be done by keyboard ( up, down, enter for selecting an option ) or mouse ( mouse wheel for navigation, click to select option ).

Once a selection is made, if the list is reopened by the user, the selected option gets highlighted to ease navigation and let the user know that a selection was made and what it was. Also for navigational purposes, there are different CSS classes for hovered entry and currently selected entry. (more…)

This image zoom script is developed having as inspiration the similar type of image zoom created in flash that usually displays a small thumbnail showing the region zoomed on it and a bigger image that displays the region showed on the thumbnail. I’ve seen this kind of approach used mainly on e-commerce shops that needed to present a more detailed image of a product.

This particular image zoom is developed using MooTools 1.2 and it’s just for demonstration purposes since I never needed such a script in any of my projects. Any help or suggestions on making it more robust would be very appreciated.

In order to work properly, the two images (the thumbnail and the corresponding large image) must be proportional in size. When moving the zoomed area on the thumbnail, the script calculates the position on the zoomed image that it should display so it’s very important that the dimensions are proportional. The two images are located in the pictures directory, into different folders: the thumbnail’s folder is pictures/thumb and the larger image is in pictures/big.

The JavaScript is structured as a class and all CSS styles are mainly external and can be maintained from the stylesheet. (more…)

I suck at flash. Well, maybe not quite suck ( I started learning FLEX ) but I’m not that proficient yet. Luckily this guy knows what he’s doing . I absolutely love what he’s done with SiFR. And, as I stated in previous posts on this blog, I also love MooTools. So I thought to give it a try and mix the two. Keep reading to see what I’ve achieved.

Please note that the script below works only with sIFR 2.0.7.

For those of you that may not know, SiFR is a very clever way to substitute HTML titles (h1, h2…) with pretty looking flash titles right after the page loads. Brilliant idea giving the fact that pure HTML titles look like crap no matter how much styling you put on them. What you do is basically take the SiFR.fla source file, embed in it your own font, generate the .swf file and start using it. (more…)

I’ve been using Mootools for some time by now but this is my first article on it. For those of you that don’t know what Mootools is, I’ll tell you only this: It’s my life saver when it comes to JavaScript. The moment I found out it exists, I started using it and enjoyed every moment. Go check the official page for more details.

In this example I will present you a very easy, unobtrusive way to create a drop down menu. We will need the Mootools core build and the Fx.Slide component found in the More Builder. (more…)