JS LightBoxes with Fancy Zoom Effect

Do you need to implement a lightbox that has the zoom effect when it is triggered? Take a look at the following resources! Some of the frameworks used to develop the scripts are JQuery, MooTools, and Prototype.

fancy-zoom.1.1

FancyZoom 1.1 is a LightBox designed to view images inline without reloading the web page. It provides a smooth, clean, truly Mac-like effect. It’s very simple to implement in the pages of your website and it doesn’t use any JavaScript libraries.

Features include:

  • Easy to implement (requires just two lines of code in your HTML page)
  • Focuses on the smoothest, most polished zooming animation possible
  • Preloads full-size images in the background on link mouseover
  • Offsets the full-size image from the page by drawing a nice drop shadow under it
  • Uses Safari 3’s “box-shadow” feature to draw the drop shadow natively, no images required

jquery-fancy-zoom

jQuery plugin: Fancy Zoom – This is the JQuery version of the FancyZoom script. It comes with a few changes:

  • Fixed the overlay bug in IE6
  • images are resized if size is bigger than document screen
  • FancyZoom can be applied directly on an image, no more link wrapper needed.

Zoomy JavaScript based loosely on Fancy Zoom by Cabel Sasser – Developer John Nunemaker rewrote the original FancyZoom script, making some changes to it such as:

  • Implementation of box rounded corners
  • Works with any HTML (images, text, headings, flash)
  • Width and Height of Zoom Box are configurable through optional setting or CSS

The package contains FancyZoom versions for JQuery, MooTools and Prototype.

jQuery Tools – A Collection of the Most Important UI Components

jQuery Tools is a collection of the most important user-interface components for today’s websites. It’s a single .js file that weights only 5.8 kb.

Tabs, ToolTips, Overlay, Expose, Flashembed and many more awesome features

The following tools are available:

  • jQuery library
  • Tabs (One of the most popular JavaScript tool on the web)
  • Tooltip (Great looking tooltips. Big or small. Pluggable effects.)
  • Scrollable (Allows you to scroll your HTML in wildly different ways)
  • Overlay (Visually appealing overlays. This tool is a significant part of the JavaScript/Web 2.0 landscape.)
  • Expose (Make your HTML elements stand out)
  • Flashembed

You can use all individual tools and or select only a combination of the tools you need.

The file size is definitely not the primary reason why this library speeds up your site. The fact that this tool is a single file makes it performance friendly. According to Yahoo experts, this is the first rule for making highly responsive websites.

Fancy (jQuery) AJAX Captchas – For an Awesome User Experience

Do you want to have a nice protection against SPAM on the forms of your website? Checkout the following scripts:

ajax-fancy-captcha-jquery-plugin

AJAX Fancy Captcha is a jQuery plugin useful to prevent your forms from being automatically submitted by bots. The coll thing about it is that you don’t have to type a security code to prove that you are a human. You only need to drag & drop an object into a specific area.

Catpcha’s security level is medium with the emphasis of nice looking and user friendly quality, while still offering reasonable protection against unwanted “guests”.

The basic design and its elements can be easily changed and customized.

s3-captcha-jquery-plugin

s3Captcha is a jQuery plugin made by an example of WebDesignBeach Ajax Fancy Captcha. Instead oftyping hardly readable letters and number you just have to select an icon from a set of icons.

Quick features:

  • It’s a very small and simple to setup script
  • Compatible with most modern browsers
  • Customizable: you can add new icons or change the current ones

Collection of Free ToolTips using AJAX, JavaScript & CSS

A tooltip is a short and informative text that appears in a box that pops out when you hover the mouse cursor over an element (link, button, div etc.).

1. DHTML JavaScript Tool Tips is a JavaScript Cross Browser library to create tool tips (information pop-up boxes). This script can be customized in multiple ways and may contain plain-text as well as HTML (images, line breaks).

dhtml-javascript-tool-tips

* Implementation
1. Download the JS File: wz_tooltip.js.
2. Include the library in your HTML page by inserting the following line in the BODY section of your page (it can be added after the last tag containing a tool tip):

<script language="JavaScript" type="text/javascript" src="http://www.your-domain-name.com/path/to/wz_tooltip.js"></script>

3. Each of the tags requires only the onMouseOver attribute (onMouseOut is not required):

<a href="photos.htm" onmouseover="return escape('Your text here')">Photos</a>

* Browsers Compatibility: Netscape 4 and 6+, Mozilla, Galeon, Opera 5, 6 and 7+, MSIE 4, 5+, Konqueror 3

2. Fading JavaScript Tooltips 2kb is an animated JS tool tip script that is very easy to use and lightweight. To see how the script is implemented check the index.html file from the ZIP archive.

fading-javascript-tooltips

Tested in: IE6+, FireFox, Opera, Safari

To see a walk-through of the code and the logic check this post.

Read more from this entry…

Creating an Exit Modal Box using the jQuery library

Shows up when the user is going to click close [X] button

Do you need to show a specific message to the visitors that leave your website? You can do that by initiating a modal box before they close the browser window.

To do this we need to include 2 JQuery files (the actual library and a plugin written by Eric Martin), the modal box’s CSS and the file that triggers the modal box based on the user’s action.

Read the rest of this entry…

Free AJAX GIF Preloaders

An AJAX image preloader will definitely give a professional look to your applications. Here are 2 online tools that can be used to generate the gif loaders:

ajaxload-logo

Ajaxload is an awesome tool that can be used to generate AJAX Loader Icons. To create one, you just need to select the indicator type, its background and foreground. Also, you can specify if you want to use a transparent color.

preloaders_net Preloaders.net is an excellent tool useful to generate GIF loaders from different categories: 3 dimensional (3D), Rectangular, Circular, Horizontal.


– the background and foreground color can be specified. A transparent background can be used too.
– you can specify custom sizes of the preloader
– an animation speed of the preloader can be set

Good luck!

How to Retrieve Yahoo! Weather using MagPie RSS and jQuery

retrieve-yahoo-weather
In this tutorial I will show you how to display the Yahoo! Weather on your website, using a PHP RSS Parser, called Magpie RSS and JQuery (AJAX). The Weather RSS Feed uses 2 parameters: ‘p’ for location & ‘u’ for degree units. The base URL for the Weather RSS Feed is http://weather.yahooapis.com/forecastrss. An address that gets the weather forecast in Sunnyvale, CA (zip code: 94089) in Celsius (c) looks like this: http://weather.yahooapis.com/forecastrss?p=94089&u=c.
Read more from this entry…

An AJAX (jQuery) Username Availability Checker with PHP Back-end

Did you notice how many sites have a verification tool for the ‘username’ field when you try to register? Many use the power of AJAX to check if the nickname has already been assigned to an existing member. This short tutorial gives you an idea of how you can make such a feature in the pages of your website. We’ll use JavaScript (JQuery) and PHP.

Let’s start creating the page where the visitor will type the “username”:

index.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>An AJAX Username Verification Tool</TITLE>
  <META NAME="Keywords" CONTENT="form, username, checker">

  <META NAME="Description" CONTENT="An AJAX Username Verification Script">

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>

<link rel="stylesheet" type="text/css" href="style.css" />

As you can see the JQuery library and the CSS file (will reveal its contents later) are included. Now let’s continue creating the script that takes the input value and sends it to check.php in order to determine if the username is already in use or not. I will explain you the code in detail below.

<SCRIPT type="text/javascript">
<!--
/*
Credits: Bit Repository
Source: http://www.bitrepository.com/web-programming/ajax/username-checker.html 
*/

pic1 = new Image(16, 16); 
pic1.src="loader.gif";

$(document).ready(function(){

$("#username").change(function() { 

var usr = $("#username").val();

if(usr.length >= 4)
{
$("#status").html('<img src="loader.gif" align="absmiddle">&nbsp;Checking availability...');

    $.ajax({  
    type: "POST",  
    url: "check.php",  
    data: "username="+ usr,  
    success: function(msg){  
   
   $("#status").ajaxComplete(function(event, request, settings){ 

	if(msg == 'OK')
	{ 
        $("#username").removeClass('object_error'); // if necessary
		$("#username").addClass("object_ok");
		$(this).html('&nbsp;<img src="tick.gif" align="absmiddle">');
	}  
	else  
	{  
		$("#username").removeClass('object_ok'); // if necessary
		$("#username").addClass("object_error");
		$(this).html(msg);
	}  
   
   });

 } 
   
  }); 

}
else
	{
	$("#status").html('<font color="red">' +
'The username should have at least <strong>4</strong> characters.</font>');
	$("#username").removeClass('object_ok'); // if necessary
	$("#username").addClass("object_error");
	}

});

});

//-->

</SCRIPT>

Read more from this entry…