Mootools

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…)

As I enjoy using MooTools and since almost all my work here is centered around it, I was pleasantly surprised when Packt Publishing asked me to review “MooTools 1.2 Beginner’s Guide” by Jacob Gube and Garrick Cheung. Now, that I read the book, I must tell you that things would have been a lot easier for me when I started to learn MooTools if I had this book.

One of the main problems with MooTools in my opinion is that entry level is set a bit high and you need some programming knowledge to be able to start learning it. Docs on mootools.net are simply great but in some cases aren’t very helpful, especially if you’re trying to learn the framework. That happens because they assume you already know things that you probably don’t. This usually ends with searching for additional information on different blogs, talking to people, waiting for answers and mainly wasting a lot of time. (more…)

There are times when we need to display a bit too much content in a small space. One way to do it is by using tabs. Fancy tabs is a tabs navigation display that tries to cover most situations, from AJAX loaded tabs to auto navigation and multi purpose usage. To make things easier when designing the interface, all CSS is all external giving the possibility to change skins very easily without interacting with the JavaScript code.

Main features for this tab navigation system are:

- tabs can be rotated automatically but setting the number of milliseconds between them;
- ajax content in tabs;
- auto resizing according to tab content;
- tab highlight with smooth effect between classes in CSS;
- highly customizable from CSS;
- multiple entrance tab content effect ( fade, slide-fade ); (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…)

WP MyTube is the Wordpress plugin implementation for YouTube MooTools player embed with attached playlist. Simply put, this plugin will allow you to easily insert YouTube videos into your Wordpress blog posts based on username or video id only. The attached playlist will display the user videos giving you the possibility to add several videos and only one player in your blog posts. This is very useful, for example, if you are a publisher that wants to display his youtube videos into a blog post.

Videos are added to your posts when you either add them or on edit. No special other settings for it except the stylesheet if you want to change the looks. To add videos to you blog posts, when you add/edit a post you’ll notice a new “add media” icon in shape of a tv. Simply click it, fill in the necessary information and the plugin will add the custom code to your pages. Hit save and that’s it.

If you want to add more than one player into a single post, well, you can do that. The plugin allows any number of players to be displayed in a single post without problems.

Further more, you can style the player to have a default look and if you want a second player to have a different look, you can add custom CSS class to it by passing the class name when you insert a new player. (more…)

MyTube is a MooTools 1.2 plugin developed using the available player API and data API from YouTube. Basically, if you’re an YouTube publisher or simply someone who wants to display some videos pulled from YouTube on his website, this is for you.

For example, if you want to display some related (or not) videos into a post in your blog, instead of displaying 3-4 players for each video, you can have only one player and attached to it into a playlist, all 4 videos so your users can choose what to play.

The script is completely unobtrusive giving the possibility to display multiple playlists with attached video players retrieved from YouTube based on either an user name to pull videos from or simply by using the video ID you can get from any YouTube video link. All embedding and displaying is done by the script, no special knowledge needed except some CSS. (more…)

Featured articles gives the wordpress blog admin the possibility to display posts in a slick n cool way on the home page, just above the first post from the loop. It’s developed for Wordpress 2.7.1 with the help of MooTools 1.2, probably the best JavaScript framework around ( please don’t try to argue on this on the comments ).

From the available plugin options I’ll mention the possibility to display any number of posts you feel comfortable with, the order in which they will appear ( newest, oldest or random ) and thumbnail display. Since I remembered the thumbnail, some explaining on it. The thumbnail represents the first image encountered in each separate post. If none available, none displayed.

For further settings on display options, there’s the JavaScript class. The script itself resides inside the script folder of the plugin directory. For this you can set timings between slides, whether to show numbered paging or not, how the slides will slide ( left or top ) and other. (more…)

MooTooltips gives you the possibility to create bubble tooltips on HTML elements in an easy manner and with the possibility to set each tooltip’s behavior individually. It’s also possible to display as tooltip content the content of an HTML element from the page, some text you want to input or the result of AJAX calls.

Tooltips can be set directly on the rel parameter of any HTML element and simultaneously when you create a new class instance.

For example, if tooltips are set directly on the element (let’s say an anchor), the rel parameter will have a value like: <a … rel=”{content:’some_element_id’}” and that’s it. The tooltip displayed will have as content the ’some_element_id’ content. Or if you there’s only the need to display some text, it will look like this: <a … rel=”{text:’Some text I want to display in my tooltip’}”. AJAX calls are also simple. To display the tooltip with some remote AJAX retrieved content, simply use as rel the following: <a … rel=”{ajax:’some_page.html’}”.

To start the inline declared tooltips, a CSS selector is needed so basically all tooltips declared on page must have the same CSS class in order to get the script started. Optionally, there’s the possibility the pass a container for the tooltips; if none is provided, the script will scan the entire document. (more…)