Tools, Tips and Tricks for Web Developers

IMDb Search Suggestions with jQuery Autocomplete

2011-10-30T11:08:00.001-05:00

In conjunction of my previous posts on IMDb Scraper API and jQuery Autocomplete with multiple search suggestions, on popular demand, I’ve created yet another search suggestion tool to fetch suggestions from IMDb.com. I’ve implemented a simple PHP Proxy script to get search suggestions from IMDb and format it according to jQuery Autocomplete Widget’s JSON data format.

For downloading and a guide to setup the suggestions tool on your website please visit the demo page on my labs section. You will need the suggest.php and imdbImage.php Proxy files for pulling content from IMDb.

Demo: http://lab.abhinayrathore.com/imdb_suggest/

IMDb’s suggestion API provides Title Name, Title Id, Cast, Type and Poster URL to display in the dropdown. You can customize the JavaScript code for your needs. IMDb has a leechers policy in place for media images so I’ve also included a PHP Proxy script to show IMDb Posters on search dropdown.

del.icio.us Tags: IMDb,IMDb Search Suggestions,IMDb Autocomplete.

jQuery Autocomplete with Multiple Search Engines

2011-10-01T13:33:00.001-05:00

Search suggestions are one of the most important features people like to include on their sites as it minimizes the chances of typo errors and facilitate easy search my providing relevant suggestions in real time. I use a similar search suggestion tool on my personal dashboard page which works exactly like the Google suggest page. I thought of expanding it to include suggestions from multiple search engines so if I want to search some product on Amazon or some knowledge article on Wikipedia, it would get suggestions from all the engines at once. Here you can find an easy way to incorporate multiple search suggestions on your pages using jQuery and a small PHP script which combines the search suggestions.

Demo and Download: http://lab.abhinayrathore.com/autocomplete/

Search suggestion engines it can support out of the box are: Google, Bing, Yahoo, Wikipedia, Amazon and Ebay.

For adding more suggestion engines, you can read the Configuration Options section on the page above. You can download the PHP script to combine multiple search suggestions from the link above.

del.icio.us Tags: jQuery Autocomplete,jQuery Autocomplete with Multiple Search Suggestion Engines.

IP Address Geocoding API for Google Maps

2011-06-14T10:22:00.001-05:00

IP Address Geocoding is getting more and more popular with people who are building their own analytics tools or want to track their users. There are a lot of free geocoding web services available which can return the geocoded data in text, XML or JSON format, the most popular ones being http://freegeoip.net, http://ipinfodb.com, http://www.hostip.info, http://www.maxmind.com and many others. Geocoded data from these website can be easily accesses by using any server side scripts, but I wanted to build a JavaScript based solution which only works using asynchronous AJAX calls. For this API I used a free web service provided by http://freegeoip.net/ which returns data in XML(http://freegeoip.net/xml/) or JSON(http://freegeoip.net/json/) format. As the browsers only allow JSONP data to be returned back from cross-domain AJAX calls, I had to use another free service from http://jsonpify.com/ to convert the geocoded JSON data to JSONP format.

This API uses Google Map Api to display map and geotag the IP Address. You will have to sign up for Google Map API if you haven't already done for your domain.

For demo and more information on how to use this API, please visit my lab page at:
http://lab.abhinayrathore.com/ipmapper/

Please drop a comment below if you like this API or have any modifications or improvements.

del.icio.us Tags: IP Geocoding,Google Maps,IP Geocoding on Google Maps

jQuery YouTube Popup Player Plugin

2011-05-07T10:45:00.001-05:00

As an enhancement to the YouTube Popup player tool I built almost 2 years back, I have created a jQuery plugin to display YouTube videos in a popup dialog box. This plugin embeds YouTube video using the latest iFrame code which features both Flash and HTML5 players. To display the popup dialog box I have used the jQuery UI Dialog Widget which provides a robust cross-browser dialog box with title bar and supports a movable box with modal behavior. You can even customize the jQuery UI Dialog Widget theme to suit the color and style of you website.

This is a very easy to use plugin and is flexible enough to be used on any DOM element which supports the JavaScript onclick event. You will just need to include the YouTube Video Id in any of the DOM element attributes (default: rel) and initialize it in the plugin options (if other than rel). You can even provide a Title to the popup dialog box by defining it in the element’s title attribute or plugin options.

This plugin offers many configuration options for the dialog box and YouTube video player. You can find more detailed information for configuration and setup on the demo/documentation page.

For complete demo, documentation and download visit my lab page
http://lab.abhinayrathore.com/jquery_youtube/

Please drop me a word in the comments below if you have any modification/enhancements/bug fixes or any new feature to be added to this plugin.

UPDATE v2.0, Date: Oct 20, 2011:Added 3 new configuration options:

hideTitleBar: (default: false) Hide the Title Bar of the Dialog Widget. (Only works with Modal option enabled.)
clickOutsideClose: (default: false) Closes the Popup Dialog when clicked outside on the Modal overlay. (Only works with Modal option enabled.)
overlayOpacity: (default: 0.5) Sets the opacity value (from 0 to 1) for the Dialog Widget overlay.

jQuery Nivo Slider with CSS3 Round Corners

2011-02-26T10:19:00.003-06:00

First things first, kudos to John O'Nolan for jQuery Nivo Slider. Great stuff! I was trying to use this slider on my website and wanted to use CSS3 round corners. Unfortunately I was not able to use round corners on the outer div because of the multiple slides overlapping over it. I tried many ways of achieving this using CSS but couldn’t find an optimal way to do it. Finally I modified the Nivo Sliders JavaScript library to include round corners without modifying the CSS file. I added a new option (borderRadius) which can be defined when the slider is initialized.

Demo on my Labs page

How to download and use this modified library:

Download and configure the library as described by the original developer: http://nivo.dev7studios.com/#usage
Get the new JavaScript file and use it instead of the original library file:
- Version 2.4
- Version 2.5.1
- Version 2.6
- Version 2.7.1 (Latest version)
NO changes required in the CSS file.
Add new “borderRadius” option while initialization to define the border radius (default value is 10px).

Example usage:
$(window).load(function() {
$('#slider').nivoSlider({ borderRadius: 20 });
});

Thanks once again to John for this awesome script. Keep up the good work.
Let me know if you find any bugs in the script and I’ll try to address them asap.

del.icio.us Tags: jQuery Nivo Slider

Free PHP Rotten Tomatoes Scraping API

2011-01-29T12:26:00.006-06:00

In continuation to my previous posts on PHP and ASP.NET IMDb Scraping API’s, I have designed one more movie information scraping API for RottenTomatoes.com. Rotten Tomatoes is one of the most popular movie review website which provides a comprehensive movie rating system involving critics from all the popular news networks.

This API includes scraping of lot of attributes from Rotten Tomatoes along with the functionality of scraping newly released DVD list. You can extend the PHP code on your own to include more functionality or drop a comment here and I’ll try to help you as much as I can.

Here is a list of all the attributes it scraps from Rotten Tomatoes page:

TITLE
YEAR
POSTER
ALL_CRITICS_PERCENTAGE
ALL_CRITICS_AVERAGE_RATING
ALL_CRITICS_COUNT
USER_PERCENTAGE
USER_AVERAGE_RATING
USER_COUNT
GENRES
SYNOPSIS
MPAA_RATING
RUNTIME
RELEASE_DATE
BOX_OFFICE
DIRECTORS
WRITERS
CAST
REVIEWS

How to use this API:
Include the class file on your php page
include("rottentomatoes.php");
Instantiate the class and get the results in an array:
$rottentomatoes = new RottenTomatoes();
$movieArray = $rottentomatoes->getMovieInfo("Inception");

How to get the New DVD Release list:
$rottentomatoes = new RottenTomatoes();
$dvdArray = $rottentomatoes->getNewDvdReleases();

You can try this scraper on my lab page: http://lab.abhinayrathore.com/rottentomatoes/

Download PHP Source Code: http://lab.abhinayrathore.com/rottentomatoes/rottentomatoes2.htm

Example usage: http://lab.abhinayrathore.com/rottentomatoes/usage.txt

If you need some more additions or corrections to this API, please drop a comment here and I’ll try to include it asap.

del.icio.us Tags: Rotten Tomatoes API,Rotten Tomatoes Scraper,RottenTomatoes.com API

FREE! ASP.net/C# IMDb Scraping API

2010-11-25T09:39:00.008-06:00

In extension to my previous IMDb Scraping API in PHP, I have converted the code to ASP.net/C# based IMDb scraper. In my de facto development style, I have kept the code pretty simple and concise. For more details on the movie information it scraps, please refer to my previous post. I don’t have an IIS server running to demonstrate the code but it is functionally similar to my PHP Scraper API so you can test it on the link below. And above all... it’s FREE!!!

Test the Scraper API: http://lab.abhinayrathore.com/imdb/

Download C# Class file: http://lab.abhinayrathore.com/imdb/imdb_asp_csharp.htm
(Add this class file to your project and rename the namespace accordingly)
To convert this C# code to VB.net use this tool: http://www.developerfusion.com/tools/convert/csharp-to-vb/

Download DLL file: http://lab.abhinayrathore.com/imdb/IMDb.dll
(Copy this DLL file to your project folder and add it to the project references)

How to use this class:

Include the class on your ASP page.
Instantiate the class: IMDb imdb = new IMDb("The Godfather", true);
(Second parameter is an optional Boolean value for scraping extra movie information.)
Access the movie information using public variables: imdb.Id, imdb.Title etc.

It’s been a while since I worked on ASP.net, so if you have any improvements or suggestions, do let me know :)

del.icio.us Tags: ASP.net IMDb Scraper,ASP.net IMDb API,C# IMdb Scraper,C# IMDb API,VB.net IMDb API

FREE! PHP IMDb Scraper/API for new IMDb Template

2010-10-30T20:52:00.015-05:00

IMDb is undoubtedly the leading information source for media information and is the top target of web scraping for movie lovers around the world. Unfortunately IMDb does not provide an API to access its database so web scraping is the only resort for us. PHP being one of the most commonly used and powerful web development language enables easy web scraping with the power of PCRE (Perl Compatible Regular Expressions).

For my recent project on a Movie Catalog (http://movies.abhinayrathore.com), I needed a IMDb scraper and found one built by Tyler Hall. His version was not robust enough to scrap all kind of movie pages so I extended it and made it more robust to support different type of titles, BUT recently IMDb changed its page template and most of the old scrapers stopped working including mine. So, I modified my scraper to accommodate the new template changes and considered it as my moral responsibility to contribute back to the developer community.

This new scraper is very robust and capable enough to handle a wide variety of new template modifications. Apart from the regular information it even goes deep to scan extra media images and release dates.

Click here for a Demo

Last Updated: Sept 22, 2011

Here is a list of all the attributes it scraps from the IMDb page:

TITLE_ID
TITLE
YEAR
RATING
GENRES
STARS
DIRECTORS
WRITERS
CAST
ALSO_KNOWN_AS
USA_TITLE
RELEASE_DATE
RELEASE_DATES
PLOT
POSTER
POSTER_LARGE
POSTER_SMALL
RUNTIME
TOP_250
OSCARS
AWARDS
NOMINATIONS
STORYLINE
TAGLINE
MEDIA_IMAGES
MPAA_RATING
VOTES

How to use this PHP Scraper?
Include the class file on your php page
include("imdb.php");
Instantiate the class and get the results in an array:
$imdb = new Imdb();
$movieArray = $imdb->getMovieInfo("The Godfather");

You can try this scraper on my lab page: http://lab.abhinayrathore.com/imdb/

To download the PHP Source Code directly use this link: http://lab.abhinayrathore.com/imdb/imdb_php.htm

Example usage: http://lab.abhinayrathore.com/imdb/usage.htm

Proxy script for downloading or displaying Media images on your website: http://lab.abhinayrathore.com/imdb/imdbImage.txt

To implement you own IMDb Web Service API to return data in XML, JSON or JSONP format, use this script along with the API: http://lab.abhinayrathore.com/imdb/imdbWebService.htm

To implement IMDb.com's search suggestions on your website, please follow this post: http://web3o.blogspot.com/2011/10/imdb-search-suggestions-with-jquery.html

If you find any part of this scraper broken or incorrect, please drop a comment here and I’ll try to fix it as soon as possible.

IMDb has a leechers policy in place for media images. You may not be able to use the URL for some of the images to display on your website. As a workaround you can use a PHP Proxy to display or download those images. I’ve written a small proxy script to grab the images: http://lab.abhinayrathore.com/imdb/imdbImage.txt. To use this script you just need to pass the image URL as a request parameter:
<img src="imdbImage.php?url=<?=$url?>" />

NOTE: For users outside of USA
IMDb will automatically redirect you to titles listed in the language used for release in your country (Read more).
To see films listed under their original titles regardless of your country region you will have to modify this script to scrap the titles from http://akas.imdb.com because http://www.imdb.com will automatically redirect you to your country specific title page.

Happy Scraping :)

del.icio.us Tags: PHP IMDb Scraper,Web Scraping,IMDb

Google Maps: Dynamically Drawn and Resizable Polygon Overlay

2010-05-28T09:20:00.001-05:00

In extension to my previous post on Dynamically Movable and Resizable Circle Overlay, I created yet another nifty tool to dynamically draw a polygon overlay on Google Maps. You won’t find another robust tool like this for Polygon drawing on the internet. Users can draw polygon dynamically by adding, deleting and moving the polygon boundary nodes. User can press shift+click on the map to add a new node to polygon boundary or they can press ctrl+click on any node marker to remove it. The node markers can be dragged around to resize the polygon.

This is how it looks like in action:

The JavaScript code is pretty easy to modify for your custom needs. The initialize() function is used to initialize the Google Map object when the page loads. A click event is also added to the map for adding node markers on the map. The click event takes care of the case when the user click on the previous markers while holding the shift key. When the user clicks on the map, addMarker() function is called to add another boundary node to the polygon. For every newly added marker, drag events are assigned for resizing the polygon and a click event is assigned to delete the node when ctrl key is pressed while clicking the marker pin. The fitPolygon() function is used to set map bounds and center to adjust the polygon inside it.

Put the following JavaScript code in the head section of your page:

To initialize the map you can call the functions on page load event and include a div tag inside your body to hold the Map.

Feel free to modify and use this code on your website. I have used API v2 for my code but you can easily modify this code for API v3. Happy Mapping!

del.icio.us Tags: Google Maps,Polygon,Dynamic Polygon,JavaScript

Google Maps: Dynamically Movable and Resizable Circle Overlay

2010-05-27T11:59:00.001-05:00

Google provides a pretty wholesome Map API for creating customized maps with enhanced features. In a recent project of mine I had to use dynamically drawn map overlays for searching house properties within them. To implement that I looked for some algorithms to draw circles on Google Map Overlays and found a good one at http://koti.mbnet.fi/ojalesa/googlepages/circle.htm, but this program was built to change the radius using html form field. To take it a few steps further, I planned to make this circle movable and resizable by directly dragging map icons.

This is one of the best dynamic circle overlay drawing tool you can find on internet. There are two pin markers to alter the circle, the Blue pin is used to drag the circle around on the map and the Red one can be dragged to resize the circle. You can even set minimum and maximum radius for the circle in the JavaScript code. The resize marker pin always stays at the 0 degree edge of the circle. The Circle fill color changes to red if the circle is moved or resized.

This is how it looks like in action:

JavaScript code: The logistic code is pretty easy to modify for your custom needs. The initialize() function is used to initialize the Google Map object when the page loads. Circle Center and Resize markers are then added at the default center location. Marker drag events are assigned to Center and Resize markers for dragging and resizing the circle. The drawCircle() function implements the algorithm for drawing the circle and finally the fitCircle() function is used to set the Map bounds to include the full circle inside it. If you want to trigger any other function after the circle is drawn, you can call your function after the fitCircle() function call at the end of drawCircle() function. Google Map uses Metric Units for distance by default, you will have to use conversion factor (1km = 0.621371192mi) to convert radius value into miles if you wish to.

Place the following JavaScript code in the head section of your page:
<script src="http://maps.google.com/maps?file=api&v=2&key=YOUR_API_KEY&sensor=true" type="text/javascript"></script>
<script type="text/javascript">
/* Developed by: Abhinay Rathore [web3o.blogspot.com] */
//Global variables
var map;
var bounds = new GLatLngBounds; //Circle Bounds
var map_center = new GLatLng(38.903843, -94.680096);

var Circle; //Circle object
var CirclePoints = []; //Circle drawing points
var CircleCenterMarker, CircleResizeMarker;
var circle_moving = false; //To track Circle moving
var circle_resizing = false; //To track Circle resizing
var radius = 1; //1 km
var min_radius = 0.5; //0.5km
var max_radius = 5; //5km

//Circle Marker/Node icons
var redpin = new GIcon(); //Red Pushpin Icon
redpin.image = "http://maps.google.com/mapfiles/ms/icons/red-pushpin.png";
redpin.iconSize = new GSize(32, 32);
redpin.iconAnchor = new GPoint(10, 32);
var bluepin = new GIcon(); //Blue Pushpin Icon
bluepin.image = "http://maps.google.com/mapfiles/ms/icons/blue-pushpin.png";
bluepin.iconSize = new GSize(32, 32);
bluepin.iconAnchor = new GPoint(10, 32);

function initialize() { //Initialize Google Map
    if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas")); //New GMap object
        map.setCenter(map_center);

        var ui = new GMapUIOptions(); //Map UI options
        ui.maptypes = { normal:true, satellite:true, hybrid:true, physical:false }
        ui.zoom = {scrollwheel:true, doubleclick:true};
        ui.controls = { largemapcontrol3d:true, maptypecontrol:true, scalecontrol:true };
        map.setUI(ui); //Set Map UI options

        addCircleCenterMarker(map_center);
        addCircleResizeMarker(map_center);
        drawCircle(map_center, radius);
    }
}

// Adds Circle Center marker
function addCircleCenterMarker(point) {
    var markerOptions = { icon: bluepin, draggable: true };
    CircleCenterMarker = new GMarker(point, markerOptions);
    map.addOverlay(CircleCenterMarker); //Add marker on the map
    GEvent.addListener(CircleCenterMarker, 'dragstart', function() { //Add drag start event
        circle_moving = true;
    });
    GEvent.addListener(CircleCenterMarker, 'drag', function(point) { //Add drag event
        drawCircle(point, radius);
    });
    GEvent.addListener(CircleCenterMarker, 'dragend', function(point) { //Add drag end event
        circle_moving = false;
        drawCircle(point, radius);
    });
}

// Adds Circle Resize marker
function addCircleResizeMarker(point) {
    var resize_icon = new GIcon(redpin);
    resize_icon.maxHeight = 0;
    var markerOptions = { icon: resize_icon, draggable: true };
    CircleResizeMarker = new GMarker(point, markerOptions);
    map.addOverlay(CircleResizeMarker); //Add marker on the map
    GEvent.addListener(CircleResizeMarker, 'dragstart', function() { //Add drag start event
        circle_resizing = true;
    });
    GEvent.addListener(CircleResizeMarker, 'drag', function(point) { //Add drag event
        var new_point = new GLatLng(map_center.lat(), point.lng()); //to keep resize marker on horizontal line
        var new_radius = new_point.distanceFrom(map_center) / 1000; //calculate new radius
        if (new_radius < min_radius) new_radius = min_radius;
        if (new_radius > max_radius) new_radius = max_radius;
        drawCircle(map_center, new_radius);
    });
    GEvent.addListener(CircleResizeMarker, 'dragend', function(point) { //Add drag end event
        circle_resizing = false;
        var new_point = new GLatLng(map_center.lat(), point.lng()); //to keep resize marker on horizontal line
        var new_radius = new_point.distanceFrom(map_center) / 1000; //calculate new radius
        if (new_radius < min_radius) new_radius = min_radius;
        if (new_radius > max_radius) new_radius = max_radius;
        drawCircle(map_center, new_radius);
    });
}

//Draw Circle with given radius and center
function drawCircle(center, new_radius) {
    //Circle Drawing Algorithm from: http://koti.mbnet.fi/ojalesa/googlepages/circle.htm

    //Number of nodes to form the circle
    var nodes = new_radius * 40;
    if(new_radius < 1) nodes = 40;

    //calculating km/degree
    var latConv = center.distanceFrom(new GLatLng(center.lat() + 0.1, center.lng())) / 100;
    var lngConv = center.distanceFrom(new GLatLng(center.lat(), center.lng() + 0.1)) / 100;

    CirclePoints = [];
    var step = parseInt(360 / nodes) || 10;
    var counter = 0;
    for (var i = 0; i <= 360; i += step) {
        var cLat = center.lat() + (new_radius / latConv * Math.cos(i * Math.PI / 180));
        var cLng = center.lng() + (new_radius / lngConv * Math.sin(i * Math.PI / 180));
        var point = new GLatLng(cLat, cLng);
        CirclePoints.push(point);
        counter++;
    }
    CircleResizeMarker.setLatLng(CirclePoints[Math.floor(counter / 4)]); //place circle resize marker
    CirclePoints.push(CirclePoints[0]); //close the circle polygon
    if (Circle) { map.removeOverlay(Circle); } //Remove existing Circle from Map
    var fillColor = (circle_resizing || circle_moving) ? 'red' : 'blue'; //Set Circle Fill Color
    Circle = new GPolygon(CirclePoints, '#FF0000', 2, 1, fillColor, 0.2); //New GPolygon object for Circle
    map.addOverlay(Circle); //Add Circle Overlay on the Map
    radius = new_radius; //Set global radius
    map_center = center; //Set global map_center
    if (!circle_resizing && !circle_moving) { //Fit the circle if it is nor moving or resizing
        fitCircle();
        //Circle drawing complete trigger function goes here
    }
}

//Fits the Map to Circle bounds
function fitCircle() {
    bounds = Circle.getBounds();
    map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
}
</script>

To initialize the map you can call the functions on page load event and include a div tag inside your body to hold the Map.

Feel free to modify and use this code on your website. I have used API v2 for my code but you can easily modify this code for API v3. Happy Mapping!

del.icio.us Tags: Google Maps,Circle Overlay,Movable Circle,Resizeable Circle,JavaScript

jQuery Image Gallery Plugin with Slideshow functionality

2010-04-01T13:58:00.001-05:00

In my ongoing cavalcade on JavaScript/jQuery Web Image tools I decided to design a very useful and commonly used tool; a very easy to use Image Gallery/Slideshow Plugin. There are a plethora of JavaScript/jQuery Image Gallery tools you can find on internet, but for most of them you will have to pay for the source code. Though my plugin may not be that customizable but hey, it does gets the job done with minimal effort. It also features a Slideshow tool and controls to navigate through all the images in the gallery. You can tweak the CSS file to match the color and styling of your website. If you want to use it in it’s own style, it’s just a plug and play feature to add on your website. It isn’t that bad? Is it, plus FREE!!!

Why should you use this Image Gallery Plugin:

Zero coding required, just plug-n-play.
Works on any screen size.
Works with images of any size, resolution or aspect ratio.
No images used in the layout, hence faster to load.
Compatible with all the modern browsers.
Users can navigate between images using the Image Gallery List or the Navigation buttons.
Users can set the Slideshow speed during plugin initialization.

This is how the tool looks like in action:

To begin with, first you need to add links for script reference to the latest jQuery code, ImageGallery.js file (provided below) and ImageGallery.css stylesheet (provided below) in the head section of your page. To use this plugin you just need to create a div container in your HTML page and put all the images in there. You can apply styling to your container in any way you want to. To assign Image Gallery event to all the images, you just need to use the jQuery plugin on the image container as shown in example below in the page load event.

Here in this sample HTML code I have used a pic_container class for my image div container (CSS in the head section). Then to assign the Image Gallery plugin in the $(document).ready() function I have used jQuery class selector to assign plugin to my container as $(".pic_container").ImageGallery(3000);, where the values inside ImageGallery() function is the time delay in milliseconds for the Slideshow (1000ms = 1sec).

Including this plugin on your existing page you’ll only require the 2 links to jQuery (.js) files and the link to Image Gallery stylesheet (ImageGallery.css) file. To assign the plugin to your div tags, you will need to use the page load function ($(document).ready()) as shown below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Image Gallery by Abhinay Rathore</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="ImageGallery.js"></script>
<link href="ImageGallery.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
/* Developed by: Abhinay Rathore [web3o.blogspot.com] */
//////////////////[ Page Load Function ]///////////////////////
$(document).ready(function(){
      //Add ImageGallery function to all the 'pic_container' containers
      //SlideShow Time Interval can be passed as function argument (1000 = 1sec)
      $(".pic_container").ImageGallery(3000);
});
/////////////////[ End Page Load Function ]///////////////////
</script>

<style type="text/css">
.pic_container {
      border: 1px solid #9CF;
}
.pic_container img{
      border: 1px solid #9CF;
      width: auto; height: 100px;
      padding: 5px; margin: 5px;
      cursor: pointer;
}
</style>

</head>

<body>
<div class="pic_container">
<img src="BlueHills.jpg" />
<img src="Sunset.jpg" />
<img src="WaterLilies.jpg" />
<img src="Winter.jpg" />
<img src="liberty.jpg" />
<img src="goldengate1.jpg" />
<img src="city1.jpg" />
<img src="scene21.jpg" />
<img src="taj_mahal1.jpg" />
<img src="taj1.jpg" />
</div>
</body>
</html>

To include the Image Gallery plugin code you will need to create a separate ImageGallery.js file and put the following contents in there. The jQuery/JavaScript code in this file is pretty easy to understand and tweak around. The main event starts from the startGallery() function where all the controls and containers are added to the HTML page and Gallery List is populated at the bottom. displayPicture() function is used to display the Main Picture and needs to be called for any subsequent picture display calls. Slideshow is controlled by the three function defined under the Slideshow Functions section. Gallery List scrolling is handled by the separate set of functions defined under Gallery List Scroll Functions section. I have used minimal amount of well commented code to get the functionality working, so if you need extra features, you can always modify the code according to your needs.

Contents of ImageGallery.js file:
////////////////////////////////////////////////////////
// Developed by: Abhinay Rathore [web3o.blogspot.com] //
////////////////////////////////////////////////////////

//////////////////[ jQuery Plugin ]///////////////////////
jQuery.fn.ImageGallery = function(Time_Interval){
      //Assign Click event to all the images in the container...
      this.children("img").click(function(){ startGallery(this); });
      //Set SlideShow Time Interval
      if(!Time_Interval) SlideShow_Time_Interval = 3000;
      else SlideShow_Time_Interval = Time_Interval;
}
//////////////////[ END jQuery Plugin ]///////////////////////

//////////////////[ Global Variables ]///////////////////////
var Gallery = new Array();
var MaxPicWidth, MaxPicHeight, WindowWidth, WindowHeight, CurrentIndex, MaxIndex;
var GalleryListContainerWidth, GalleryListWidth, WidthDiff;
var SlideShow_Time_Interval;
var PageTitle;
/////////////////[ End Global Variables ]////////////////////

//////////////////[ Picture Gallery Functions ]///////////////////////
//This function initiates the Picture Gallery by loading all the containers and controls
function startGallery(id){
      //Scroll Page to top
      $('html,body').animate({scrollTop: 0}, 'fast');

      //Declare Global variables...
      WindowWidth = $(window).width();
      WindowHeight = $(window).height();
      MaxPicWidth = WindowWidth - 100;
      MaxPicHeight = WindowHeight - 170;

      //Create translucent background...
      var bg = document.createElement('div');
      bg.id = "Gallery_Background";
      document.body.appendChild(bg); //Attach background to the BODY
      $(bg).fadeTo('fast', 0.9);

      //Create Gallery Container with dimensions of the window...
      var container = document.createElement('div');
      container.id = "GalleryContainer";
      $(container).css({'width': WindowWidth, 'height': WindowHeight});

      //Create and attach the Gallery Close Button to the Container...
      var CloseButton = document.createElement('div');
      CloseButton.id = "GalleryCloseButton";
      CloseButton.innerHTML = "X";
      container.appendChild(CloseButton);
      $(CloseButton).click(function(){ stopGallery() }); //Attach Close event

      //Create and attach the container for Gallery Picture List
      var GalleryListContainer = document.createElement('div');
      GalleryListContainer.id = "GalleryListContainer";
      $(GalleryListContainer).css({'top': WindowHeight - 110, 'left': '50px',
                  'width': WindowWidth - 100 - 4, 'height': '100px'});
      container.appendChild(GalleryListContainer);

      //Create and attach the Gallery List to the Gallery List Container...
      var GalleryList = document.createElement('div');
      GalleryList.id = "GalleryList";
      GalleryListContainer.appendChild(GalleryList);

      //Create and attach the Gallery List Left Scroller to the Container...
      var GalleryListLeft = document.createElement('div');
      GalleryListLeft.id = "GalleryListLeft";
      $(GalleryListLeft).css({'top': WindowHeight - 110, 'left': '0px'});
      GalleryListLeft.appendChild(createSpanNode("&loz;"));
      container.appendChild(GalleryListLeft);

      //Create and attach the Gallery List Right Scroller to the Container...
      var GalleryListRight = document.createElement('div');
      GalleryListRight.id = "GalleryListRight";
      $(GalleryListRight).css({'top': WindowHeight - 110, 'right': '0px'});
      GalleryListRight.appendChild(createSpanNode("&loz;"));
      container.appendChild(GalleryListRight);

      //Create and attach the Gallery Controls Container to the Container...
      var ControlsContainer = document.createElement('div');
      ControlsContainer.id = "ControlsContainer";
      $(ControlsContainer).css({'top': WindowHeight - 145});
      container.appendChild(ControlsContainer);

      //Create and attach the Gallery Controls to the Controls Container...
      //First Image Control
      var First = document.createElement('div');
      First.id = "First";
      First.className = "button";
      First.innerHTML = "First";
      ControlsContainer.appendChild(First);
      //Previous Image Control
      var Prev = document.createElement('div');
      Prev.id = "Prev";
      Prev.className = "button";
      Prev.innerHTML = "«Prev";
      ControlsContainer.appendChild(Prev);
      //Play Pause Slideshow Control
      var Play = document.createElement('div');
      Play.id = "Play";
      Play.className = "button";
      Play.innerHTML = "Slideshow";
      $(Play).click(function(){ StartSlideShow(); });
      ControlsContainer.appendChild(Play);
      //Next Image Control
      var Next = document.createElement('div');
      Next.id = "Next";
      Next.className = "button";
      Next.innerHTML = "Next»";
      ControlsContainer.appendChild(Next);
      //Last Image Control
      var Last = document.createElement('div');
      Last.id = "Last";
      Last.className = "button";
      Last.innerHTML = "Last";
      ControlsContainer.appendChild(Last);

      //Create and attach the Main Pictire holder to the Container...
      var MainPicture = document.createElement('div');
      MainPicture.id = "GalleryMainPicture";
      container.appendChild(MainPicture);

      //Attach the Container to the BODY
      document.body.appendChild(container);
      //Disable Page Scroll
      $('html,body').css({'overflow': 'hidden'});
      //Add the Pictures to the Gallery List
      //This function returns the index of the clicked image
      var index = LoadPictures(id, GalleryList);

      //Display the clicked picture in the MainPicture box...
      displayPicture(index, true);

      PageTitle = document.title;
      document.title = "Image Gallery by Abhinay Rathore [web3o.blogspot.com]";
}
//Stops the Image Gallery when Close Button is clicked
function stopGallery(){
      Gallery = new Array(); //Clear the Gallery Array
      StopSlideShow(); //Stop Slideshow is it is running
      $("#GalleryContainer").children().remove(); //Remove all child nodes from Container
      $("#GalleryContainer").remove(); //Remove the Container
      $("#Gallery_Background").remove(); //Remove Gallery Background
      $('html,body').css({'overflow': 'auto'}); //Enable Page Scroll
      document.title = PageTitle;
}
//////////////////[ END Picture Gallery Functions ]///////////////////////

/////////////////[ Gallery List Picture collector Function ]///////////////////
//This function adds all the sibling images to the Gallery List and returns the
//index to the clicked image
function LoadPictures(id, GalleryList){
      var pics = $(id).parent().children(); //Get all the siblings of the clicked image
      var index = 0, i;
      for(i=0; i<pics.length; i++) //Iterate through all the siblings and add to the Gallery Array
      {
            var img = document.createElement('img'); //Create new image
            img.src = pics[i].src;
            img.name = i //Store Array index in the 'name' attribute of thumbnails
            Gallery[i] = pics[i].src; //Add image link to the Gallery Array
            if(pics[i] == id){ index = i; } //Clicked Image index
            //Attach click event to the images...
            $(img).click(function(){ displayPicture(parseInt(this.name), true);});
            GalleryList.appendChild(img); //Add newly created image thumbnail to the Gallery List
      }
      MaxIndex = i - 1; //Max Index in the array

      //Assign click events to First and Last image control buttons
      $("#First").click(function(){ displayPicture(0, true); });
      $("#Last").click(function(){ displayPicture(MaxIndex, true); });

      //Calculate Gallery List width to compare with the Gallery List Container
      //If Gallery List Width is less then the Container Width then the
      //List Scroll controls are not displayed
      var GalleryListContainer = $("#GalleryListContainer");
      GalleryListContainerWidth = GalleryListContainer.width();
      var GalleryListContainerOffset = GalleryListContainer.offset();
      var lastChild = $("#GalleryList > img:nth-child(" + (i) + ")");
      var lastChildPosition = lastChild.position();
      var lastChildWidth = lastChild.width();
      var GalleryList = $("#GalleryList");
      var GalleryListOffset = GalleryList.offset();
      GalleryListWidth = Math.round(GalleryListOffset.left + lastChildPosition.left + lastChildWidth - GalleryListContainerOffset.left + 5);

      if(GalleryListWidth > GalleryListContainerWidth){ //Attach mouse events to List Scroll Controls
            WidthDiff = GalleryListWidth - GalleryListContainerWidth;
            $("#GalleryListLeft").mouseover(function(){scrollGalleryList('L');});
            $("#GalleryListRight").mouseover(function(){scrollGalleryList('R');});
            $("#GalleryListLeft, #GalleryListRight").mouseout(function(){stopScrollGalleryList();});
      } else { //Hide List Scroll Controls
            $("#GalleryListLeft, #GalleryListRight").css({'visibility': 'hidden'});
      }
      return index;
}
/////////////////[ END Gallery List Picture collector Function ]///////////////////

//////////////////[ Display Picture Functions ]///////////////////////
//This function displays the Image at the given index in Gallery Array
function displayPicture(index, enableControls){
      CurrentIndex = index; //Set Current Index for Slideshow

      var MainPicture = $("#GalleryMainPicture");
      MainPicture.children().remove(); //Remove previous image
      var img = document.createElement('img'); //Create new image
      img.src = Gallery[index]; //Set new image source
      MainPicture.append(img); //Add newly created image to the MainPicture box
      var imgDim = PicDimensions(img) //Get image dimensions to fit in the MainPicture box
      $(img).css({'height': imgDim.height, 'width': imgDim.width}); //Set new image dimensions
      //Set new size and margins for the MainPicture box
      MainPicture.css({'height': imgDim.height, 'width':imgDim.width,
                              'left': LeftMargin(imgDim.width), 'top': TopMargin(imgDim.height)});

      //If not a Slideshow display: enable the Next/Prev image controls
      if(enableControls){ EnablePictureControls(index); }

      //Highlight selected picture under the Gallery List images
      highlightSelectedPic(index);
}
//This functions highlights the selected picture under the Gallery List images
function highlightSelectedPic(index){
      $("#GalleryList").children().fadeTo(0, 0.5); //Fade all the images in Gallery List
      var selectedChild = $("#GalleryList > img:nth-child(" + (index + 1) + ")");
      selectedChild.fadeTo(0, 1.0); //Highlight the selected image (at given index)

      //Calculate the image thumbnail position inside Gallery List to bring it in focus
      var GalleryList = $("#GalleryList");
      var GalleryListContainer = $("#GalleryListContainer");
      var GalleryListContainerOffset = GalleryListContainer.offset();
      var GalleryListOffset = GalleryList.offset();
      var selectedChildPosition = selectedChild.position();
      var selectedChildWidth = selectedChild.width();
      var leftEdge = Math.round(GalleryListOffset.left + selectedChildPosition.left);
      var rigthEdge = Math.round(GalleryListOffset.left + selectedChildPosition.left + selectedChildWidth);

      //Bring the selected picture into foucs in Gallery List
      if(rigthEdge > GalleryListContainerWidth){ //scroll left
            GalleryList.animate({left: '-=' + (rigthEdge - GalleryListContainerWidth - GalleryListContainerOffset.left + 5)}, 200);
      } else if(leftEdge < GalleryListContainerOffset.left){ //scroll right
            GalleryList.animate({left: '+=' + (GalleryListContainerOffset.left - leftEdge + 5)}, 200);
      }
}
//This function is used to enable the Next/Prev Image Controls
//based upon the index in Gallery Array
function EnablePictureControls(index){
      var Prev = $("#Prev"), Next = $("#Next");
      $("#Prev, #Next").css({'visibility': 'visible'});
      $("#First, #Last").css({'visibility': 'visible'});
      Prev.unbind('click'); //Unbind existing click events
      Next.unbind('click'); //Unbind existing click events
      if(Gallery.length == 1){ //If only one image, hide Next/Prev image controls
            $("#Prev, #Next").css({'visibility': 'hidden'});
            $("#First, #Last").css({'visibility': 'hidden'});
      } else if(index == 0){ //If first image displayed, hide Prev image control
            Prev.css({'visibility': 'hidden'});
            $("#First").css({'visibility': 'hidden'});
            Next.click(function(){displayPicture(index+1, true);});
      } else if(index == Gallery.length - 1){ //If last image displayed, hide Next image control
            Prev.click(function(){displayPicture(index-1, true);});
            Next.css({'visibility': 'hidden'});
            $("#Last").css({'visibility': 'hidden'});
      } else { //Show Next/Prev image controls
            Prev.click(function(){displayPicture(index-1, true);});
            Next.click(function(){displayPicture(index+1, true);});
      }
}
//////////////////[ END Display Picture Functions ]///////////////////////

//////////////////[ SlideShow Functions ]///////////////////////
var SlideShowIndex = 0;
function StartSlideShow(){ //Start SlideShow...
      //Hide Next/Prev and First/Last Image Controls
      $("#Prev, #Next").css({'visibility': 'hidden'});
      $("#First, #Last").css({'visibility': 'hidden'});
      //Change Play Button to Pause
      $("#Play").unbind('click');
      $("#Play").text('Stop Slideshow');
      $("#Play").click(function(){ StopSlideShow(); });

      var MainPicture = document.getElementById("GalleryMainPicture");
      //Set SlideShow index
      if(CurrentIndex == MaxIndex){ SlideShowIndex = 0; }
      else { SlideShowIndex = CurrentIndex + 1; }
      //Start SlideShow timer with time_interval specified above
      MainPicture.timer = setInterval(function() { PlaySlideShow(); }, SlideShow_Time_Interval);
}
function PlaySlideShow(){ //Switch SlideShow Image
      displayPicture(SlideShowIndex, false);
      SlideShowIndex += 1; //Step to next image
      if(SlideShowIndex > MaxIndex) SlideShowIndex = 0;
}
function StopSlideShow(){ //Stop SlideShow...
      var MainPicture = document.getElementById("GalleryMainPicture");
      clearTimeout(MainPicture.timer); //Clear SlideShow timer

      //Show Next/Prev and First/Last Image Controls
      $("#Prev, #Next").css({'visibility': 'visible'});
      $("#First, #Last").css({'visibility': 'visible'});
      //Enable Next/Prev Controls based upon the Current Index
      EnablePictureControls(CurrentIndex);

      //Change Pause Button to Play
      $("#Play").unbind('click');
      $("#Play").text('Slideshow');
      $("#Play").click(function(){ StartSlideShow(); });
}
//////////////////[ END SlideShow Functions ]///////////////////////

//////////////////[ Gallery List Scroll Functions ]///////////////////////
//Gallery List scrolling begins when the user takes the mouse over the
//Gallery List scroll controls and stops when the mouse moves out of the controls
function scrollGalleryList(dir){ //Start Scrolling the Gallery List
      var GalleryList = document.getElementById("GalleryList");
      //Start Gallery List Scroll timer
      GalleryList.timer = setInterval(function() { animateGalleryList(dir); }, 10);
}
function animateGalleryList(dir){
      var GalleryList = document.getElementById("GalleryList");
      var left = $(GalleryList).css("left"); //Get current left position
      if(left == "auto") left = parseInt(0); else left = parseInt(left.replace("px", ""));
      switch(dir) //shift the Gallery List to left/right based upon the direction
    {
            case "R": if(Math.abs(left) < WidthDiff) { $(GalleryList).css({'left': left-10}); }
                              else { stopScrollGalleryList(); }
                              break;
            case "L": if(left < 0) { $(GalleryList).css({'left': left+10}); }
                              else { stopScrollGalleryList(); }
                              break;
      }
}
function stopScrollGalleryList(){ //Stop Scrolling the Gallery List
      var GalleryList = document.getElementById("GalleryList");
      clearTimeout(GalleryList.timer); //Clear Gallery List Scroll timer
}
//////////////////[ END Gallery List Scroll Functions ]///////////////////////

//This function returns the display picture dimensions based upon the
//maximum picture hight and width according to the page size
function PicDimensions(pic){
      var d = new Dimensions();
      d.height = Math.min(MaxPicHeight, $(pic).height());
      d.width = Math.round($(pic).width() * d.height / $(pic).height());
      if(d.width > MaxPicWidth){
            d.width = MaxPicWidth;
            d.height = Math.round($(pic).height() * d.width / $(pic).width());
      }
      return d;
}
function Dimensions(){ //Dimensions class to hold width and height values
      var width; var height;
}

//This funcition creates a 'span' node with the provided text
function createSpanNode(text){
      var span = document.createElement('span');
      span.innerHTML = text;
      return span;
}

//These functions calculate the Left and Top margins for any div tag
//to center align them to the page based upon their width and height
//These functions are mainly used to center align the MainPicture box
function LeftMargin(width){
      return Math.round((WindowWidth - width)/2);
}
function TopMargin(height){
      return Math.round((WindowHeight - 150 - height)/2);
}

The CSS code for the Image Gallery plugin is pretty easy to modify. It does not use any images so it is faster to load as well but you can always add images to make it look prettier. To match the color and styling of your website you can tweak around this code on your own. The ID’s in CSS match with the ID’s in the jQuery code so it will be pretty easy to figure out the layout. Most of the dynamic styling is done in the startGallery() function where you can easily tweak them. Almost all of the elements are absolutely aligned and the positioning is decided by the dynamic jQuery code based upon the window dimensions. Create this ImageGallery.css file and link it in the head section of your page.

Contents of ImageGallery.css file:
#Gallery_Background{
      background-color: #DFDFDF;
      width: 100%; height: 100%;
      position: absolute;
      top: 0px; left: 0px;
}
#GalleryContainer{
      position: absolute;
      top: 0px; left: 0px;
}
#GalleryCloseButton{
      background-color: #fff;
      position: absolute;
      top: 5px; right: 5px;
      border: 2px solid #069; color: #069;
      font-family: "Arial Black", Gadget, sans-serif;
      font-size: large; line-height: 20px;
      width: 20px; height: 20px;
      text-align: center;
      cursor: pointer;
}
#GalleryMainPicture{
      background-color: #FFF;
      position: absolute;
      border: 3px solid #069;
      overflow: hidden;
}
#ControlsContainer{
      position: relative; text-align: center;
      margin: 0 auto;
}
#ControlsContainer .button{
      position: relative; display: inline-block;
      text-align: center; cursor: pointer;
      height: 25px; width: auto;
      background-color: #FFF;
      font-family: Verdana, Geneva, sans-serif;
      font-weight: bold; font-size: medium;
      line-height: 25px; color: #069;
      margin: 0px 5px 0px 5px; padding: 0px 5px 0px 5px;
      border: 2px solid #069;
      overflow: hidden;
}
#GalleryListContainer{
      background-color: #FFF;
      position: absolute; overflow: hidden;
      border: 2px solid #069;
}
#GalleryList{
      position: relative;
      background-color: #FFF;
      text-align: center;
      height: 100px; width: auto;
      white-space: nowrap;
      padding: 5px; margin: 0 auto;
      display: block;
}
#GalleryList img{
      margin: 0px 5px 0px 0px;
      height: 90px; width: auto;
      cursor: pointer;
}
#GalleryListLeft, #GalleryListRight{
      position: absolute;
      height: 104px; width: 50px;
      cursor: pointer; overflow: hidden;
      font-family: Verdana, Geneva, sans-serif;
      font-weight: bold; font-size: 126px;
      line-height: 90px; color: #069;
}
#GalleryListLeft span{
      margin-left: -5px;
}
#GalleryListRight span{
      margin-left: -55px;
}
#GalleryListLeft:hover, #GalleryListRight:hover{
      color: #09C;
}

Feel free to use or modify and play around with this code at your own risk and convenience. If you use this code on your website, please do provide due credits to me in the ImageGallery.js file (I guess that’s not too much to ask for).

del.icio.us Tags: jQuery Image Gallery,Image Gallery,Slideshow,DHTML Image Gallery,jQuery

JavaScript and jQuery Image Magnifier

2010-03-24T14:17:00.001-05:00

In an alternate version to the Image Magnification tool from my previous post, I have created another magnification tool which works exactly like a magnification glass moving over the picture. This tool is more concise and easy to use then the previous one where a separate popup with the same aspect ratio was used to display the image. Here the magnified image section keeps moving with the mouse providing an exact magnification glass effect. You also don’t need any separate CSS for the magnification window.

Why should you use this Image Magnification tool:

Zero coding required.
No CSS required at all.
Can be triggered automatically or manually from the image.
Works on images of any resolution or aspect ratio.

For testing I have used a very high resolution image of Taj Mahal (4300x2724 pixels).

This is how it looks in action:The JavaScript code is very easy to understand and modify. The only thing you will need to modify for automatic magnification functionality is the $(document).ready() function where the jQuery Selectors needs to be modified to point to the images in your HTML document. You can also change the magnifier window size by changing the magnifier_size variable in the JavaScript Code.

Place the following JavaScript Code in the head section of your HTML page:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
/* Developed by: Abhinay Rathore [web3o.blogspot.com] */
$(document).ready(function(){
      $(".magnify").mousemove(function(event){ moveMagnifier(this, event); });
      $(".magnify").mouseout(function(event){ hideMagnifier(); });
});

var magnifier_size = 200; //Change Magnifier size here.
var cursor_offset = 10; //Change Cursor Offset here.
var ratio, mHalf, pic_offset;
function showMagnifier(picId, e){ //Show Magnifier
      hideMagnifier();
      //Create and add magnified image to the body
      var magnifier = document.createElement("img");
      magnifier.id = "magnifier"
      magnifier.src = picId.src;
      magnifier.style.position = "absolute";
      document.body.appendChild(magnifier);
      //Calculate size ratio of original and magnified images
      ratio = magnifier.width / $(picId).width();
      mHalf = magnifier_size / 2;
      pic_offset = $(picId).offset(); //Picture offset
      //Get mouse position on the image
      var picX = e.pageX - pic_offset.left;
      var picY = e.pageY - pic_offset.top;
      clipImage(magnifier, picX, picY); //Clip the magnified image
      //Position the magnified image next to mouse cursor
      positionImage(magnifier, picX, picY, e.pageX, e.pageY)
}
function moveMagnifier(picId, e){ //Move Magnifier
      var magnifier = document.getElementById("magnifier");
      if(magnifier){ //If magnified image exists...
            //Get mouse position on the image
            var picX = e.pageX - pic_offset.left;
            var picY = e.pageY - pic_offset.top;
            clipImage(magnifier, picX, picY); //Clip the magnified image
            //Position the magnified image next to mouse cursor
            positionImage(magnifier, picX, picY, e.pageX, e.pageY)
      } else { //If magnified image does not exist...
            showMagnifier(picId, e);
      }
}
function clipImage(magnifier, picX, picY){ //Clip magnified image...
      var centerX = picX * ratio;
      var centerY = picY * ratio;
      $(magnifier).css("clip", "rect(" + Math.round(centerY - mHalf) + "px," +
                                                   Math.round(centerX + mHalf) + "px," +
                                                   Math.round(centerY + mHalf) + "px," +
                                                   Math.round(centerX - mHalf) + "px)");
}
function positionImage(magnifier, picX, picY, pageX, pageY){ //Position magnified image...
      $(magnifier).css({'top': pageY - (picY * ratio) + mHalf + cursor_offset,
                        'left': pageX - (picX * ratio) + mHalf + cursor_offset});
}
function hideMagnifier(){ //Hide Magnifier
      $("#magnifier").remove(); //Remove the Magnifier Image
}
</script>

The CSS code I have used here is only to display the original images on the HTML page. You can use you own CSS styles and use the image class in the jQuery Selectors. You actually don’t need any CSS code to use this tool. You can use it directly by assigning mouse events to your images manually.
<style type="text/css">
.magnify{
      width: 500px;
      height: auto;
      cursor: crosshair;
}
</style>

The HTML Code for this image magnifier is very simple to use. If you are using CSS layout then you can use jQuery Selectors to select the images automatically.
<img class="magnify" src="taj.jpg" />

If you want to assign Magnification feature to your images manually, you can add mouse events to your images as shows below:
<img src="taj.jpg" style="width:500px" onmousemove="moveMagnifier(this, event)" onmouseout="hideMagnifier()" />

del.icio.us Tags: JavaScript,Image Magnifier,Image Zoom,jQuery

Dynamic Popup Image Zoom with Magnifying Glass Effect using jQuery

2010-03-18T10:17:00.001-05:00

Lot of times on your webpage you might want to include an image of a very large resolution but the users then have to open that image in a new window to view its details in actual resolution. In situations like that, comes in handy some kind of image zoom tool which can display the actual image resolution/details just by hovering your mouse over that. These kind of image popup zoom boxes can be seen on some merchant websites where they don’t want the customers to navigate away from their product page.

I have implemented a very easy to use image zoom tool where the popup appears just next to the image and the zoomed image pans based upon the mouse position on the original image giving the magnifying glass effect. This tool works with images of any resolution and aspect ratio. The zoom popup box width can be adjusted using the JavaScript and the height is automatically adjusted as per the aspect ratio of the original image.

Why should you use this image zoom tool:

Zero coding required.
No strict HTML layout/structure needed to place the images in the document.
Works with images of any resolution and aspect ratio.
Just by modifying the jQuery selectors in $(document).ready() function you can assign zoom property to the images on your page. For example: to assign zoom effect to all the images on your page, just use $("img").mouseover() selector.
Zoom area width can be easily adjusted using the JavaScript zoom_width variable and the height is adjusted automatically based upon the image aspect ratio.
There is not need to have a separate thumbnail for the images to be zoomed.

Here are a few examples of how the zooming looks like:

The JavaScript code is very easy to incorporate and robust enough to handle any kind/size of images. You can use your own CSS/HTML to place the pictures in your document. When the page loads for the first time, the $(document).ready() function assigns mouse events to the pictures you want to zoom. You just need to change the jQuery selectors in the $(document).ready() function to select the images to zoom if you have a different CSS/HTML layout on your page.

The showZoom() function is triggered when the user moves the mouse over the image. showZoom() creates the zoom box with the image of actual resolution inside it and calculates the margin ratios required for panning the zoomed image. The moveZoom() function is then used the keep track of the mouse position on the actual image and pan the image in zoom box based upon the mouse position on the actual image (Magnifying Glass Effect). hideZoom() removes the zoom box and its child elements when the user moves the mouse out of the image thumbnail.

JavaScript Code:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
/* Developed by: Abhinay Rathore [web3o.blogspot.com] */
$(document).ready(function(){
      $(".pic_zoom > img").mouseover(function(){ showZoom(this); });
      $(".pic_zoom > img").mousemove(function(event){ moveZoom(this, event); });
      $(".pic_zoom > img").mouseout(function(){ hideZoom(); });
});
var zoom_width = 500; //Change zoom area width here
var zoom_left_ratio, zoom_top_ratio;
function showZoom(picId){ //Show Zoom window
      hideZoom();
      //Create and add zoom div (with image) to the body
      var zoom = document.createElement("div");
      zoom.id = "zoom";
      var img = document.createElement("img");
      img.src = picId.src;
      zoom.appendChild(img);
      document.body.appendChild(zoom);
      //Set zoom div height proportionally to the width specified above.
      var offset = $(picId).offset();
      $(zoom).width(zoom_width);
      $(zoom).height(Math.round($(zoom).width() * $(picId).height() / $(picId).width()));
      $(zoom).css({'top': offset.top, 'left': offset.left + $(picId).width() + 10});
      //Calculate zoom ratio
      zoom_left_ratio = ($(img).width() - $(zoom).width()) / $(picId).width();
      zoom_top_ratio = ($(img).height() - $(zoom).height()) / $(picId).height();
}
function moveZoom(picId, e){ //Move Zoom image
    var zoomed_img = $("#zoom > img");
    var zoom = $("#zoom");
    var pic_offset = $(picId).offset();
    //Get mouse position on the image
    var picX = e.pageX - pic_offset.left;
    var picY = e.pageY - pic_offset.top;
    //Calculate margins for the zoomed image
    var leftMargin = -1 * Math.round(picX * zoom_left_ratio);
    var topMargin = -1 * Math.round(picY * zoom_top_ratio);
    //Ser margins for the zoomed image
    zoomed_img.css('left', (leftMargin > 0) ? 0 : leftMargin);
    zoomed_img.css('top', (topMargin > 0) ? 0 : topMargin);
}
function hideZoom(){ //Hide Zoom window
      //Remove the zoom div and its children from the body
      $("#zoom").children().remove();
      $("#zoom").remove();
}
</script>

A very minimal amount of CSS code is used to define the div tag holding the images and the properties for the zoom box. If you use your personalized CSS, then there is no need to modify the zoom box properties.

CSS Code:
<style type="text/css">
.pic_zoom {
      border: 1px solid #9CF;
      width: 210px;
}
.pic_zoom img{
      width: 200px;
      height: auto;
      margin: 5px;
      cursor: crosshair;
}
#zoom {
      position: absolute;
      border: 1px solid #9CF;
      overflow: hidden;
}
#zoom img{
      position: absolute;
}
</style>

The HTML code can be modified very easily based upon the layout and style of your HTML document. you can use your own containers or place the images directly on the document. For any modifications in the CSS/HTML layout, the jQuery selectors in the $(document).ready() function needs to be modified to assign the mouse events to the images for zooming them.

HTML Code:
<div class="pic_zoom">
    <img src="WaterLilies.jpg" />
    <img src="goldengate.jpg" />
    <img src="city.jpg" />
</div>

del.icio.us Tags: jQuery,Image Zoom,Magnifying Glasss Effect,JavaScript

Dynamic Round Cornered Tab Menu without using images

2010-03-16T09:10:00.001-05:00

Tab menus are one of the most common form of navigation buttons used in web design, the most common of which is usually a round cornered tab. To make round cornered tabs, you will usually have to use images for the corners/edges to get the effect. I have implemented a dynamic Tab menu using jQuery and CSS without using images. Taking the concept from my previous post on Round Cornered Div tags without using images, I have implemented this round cornered tab menu using the nifty power of jQuery which makes it dynamic in nature.

Why should you use this Tab Menu:

VERY easy to use and modify.
Easy to understand and modify the CSS.
Faster to load because no images are used.
The changeTab() function can change the tab selection dynamically.
This Tab Menu can be used with Ajax like functionalities as well where the contents can be loaded dynamically based upon the click event.
Can be used with your dynamic code just by setting the <li> class to ‘sel’ using your code.
Scalable to any size by modifying the CSS only.

This is how the tabbed menu looks like:

How does it work: The trick is pretty simple; The header for every tab is set dynamically by using jQuery. When a tab selection is made, the inactive tab header is replaced by the active tab header and vice versa.

The JavaScript/jQuery code:
The jQuery code is pretty simple to understand because only selectors are used to select the appropriate tab and change the CSS styles and colors. When the page loads for the first time, rounded corners and CSS is applied to the li tag with class ‘sel’ and a click event is assigned to all the p or a tags inside the Tab Menu.
The changeTab() function is used to handle the tab click event for swapping the active and inactive tabs. Along with that any kind of Ajax calls or page redirects can be made based upon the tab button clicked. The TabRoundedCorners() function is used to populate the Tab header based upon active or inactive type.

Put the following code in the head section of your page:
/* Developed by: Abhinay Rathore [web3o.blogspot.com] */
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
      //Add Inactive tab round corners where class not equals to 'sel'
      $("#tabs > ul > li[class!='sel']").prepend(TabRoundedCorners('inactive'));
      //Add Active tab round corners where class equals to 'sel'
      $("#tabs > ul > li[class='sel']").prepend(TabRoundedCorners('active'));
      //Select tab where li class equal to 'sel'
      $("#tabs > ul > li[class='sel'] > p").addClass('sel');
      $("#tabs > ul > li[class='sel'] > a").addClass('sel');
      //Assign click event to all the tabs
      $("#tabs > ul > li > p").click(function(){ changeTab(this) });
      $("#tabs > ul > li > a").click(function(){ changeTab(this) });

});

function changeTab(tabId)
{
      //Remove Active tab round corners where class equals to 'sel'
      $("#tabs > ul > li[class='sel']").children(":first-child").remove();
      //Add Inactive tab round corners where class equals to 'sel'
      $("#tabs > ul > li[class='sel']").prepend(TabRoundedCorners('inactive'));
      //Remove 'sel' class for the currently selected tab
      $("#tabs > ul > li[class='sel']").children().removeClass('sel');
      $("#tabs > ul > li[class='sel']").removeClass('sel');
      //Remove Inactive rounded corners from clicked tab
      $(tabId).parent().children(":first-child").remove();
      //Add 'sel' class to p tag under clicked tab
      $(tabId).parent().children(":first-child").addClass('sel');
      //Add 'sel' class to the clicked tab li
      $(tabId).parent().addClass('sel');
      //Add Active tab round corners to the clicked tab
      $(tabId).parent().prepend(TabRoundedCorners('active'));

      // Perform Action based upon the selected tab button
      // if you are using Ajax to change your page content
      switch($(tabId).text())
      {
            case "Home": break;
            case "Work": break;
            case "Personal": break;
            case "Blog": break;
            case "About": break;
            case "Contact": break;
      }
}

function TabRoundedCorners(type){
      return "<div id=\'" + type + "_tab_rounder\'>" +
            "<div class=\'top_left\'><div class=\'top_left_inside\'>•</div></div>" +
            "<div class=\'top_right\'><div class=\'top_right_inside\'>•</div></div>" +
            "</div>";
}
</script>

CSS code:
The CSS code contains very minimal amount of CSS for the tabs and the round cornered tab headers. There are two sets of round cornered header CSS for active and inactive tabs. To make any modifications in the size of the tabs should be done to both these sets for consistency. To change the Tab colors, you only need to replace LightBlue and Gainsboro with your custom colors values in the whole CSS section.

Place the following CSS code in the head section of your page:
<style type="text/css">

</style>

HTML code:
The HTML code for the Tab Menu is very simple and easy to modify. The Tab Menu is represented by an unordered HTML list. The list elements can contain HTML links or Paragraph tags for tab heading. The default selected tab can be set by assigning the ‘sel’ class to the li tag.

Modify and place the following code inside the your HTML page body:
<div id="tabs">
<ul>
    <li><a href="javascript:void(0)">Home</a></li>
    <li><p>Work</p></li>
    <li class="sel"><p>Personal</p></li>
    <li><p>Blog</p></li>
    <li><p>About</p></li>
    <li><p>Contact</p></li>
</ul>
</div>

del.icio.us Tags: jQuery,Tabs,Tab Navigation,JavaScript,CSS,Round Cornered Tabs

Animated Page Scrolling with jQuery

2010-03-12T10:38:00.001-06:00

Many a times we use HTML links to link to some section on the same page and we link them using anchor tags. Using the nifty power of jQuery you can animate this effect by scrolling the page slowly when clicked on the anchor links. I have devised this easy to use function which can be used to scroll the HTML page/window to any HTML element on the page.

The ScrollTo function requires the id of the HTML element you want to scroll to and the duration for how long the animation should run. Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively. You can even call this function without the duration in which case the default duration is set to 400ms.

Just include the following JavaScript code in the head section of your HTML page:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function ScrollTo(id, duration)
{
      if(!duration) duration = 400;
      var offset = $('#' + id).offset().top;
      $('html,body').animate({scrollTop: offset}, duration);
}
</script>

You can call this ScrollTo function from any DOM event like mouse clicks or key press. It can be used with any HTML element. Just make sure the id you pass to the function should be an unique id of any HTML element on the page.

HTML Examples:
<a href="javascript:void(0)" onclick="ScrollTo('placeToGo', 500)">Go To Link</a>
<a href="javascript:void(0)" onclick="ScrollTo('placeToGo')">Go To Link</a>
<img src="ClickButton.gif" onclick="ScrollTo('placetoGo') />

del.icio.us Tags: jQuery,Animated Scrolling,JavaScript,Scroll

Draw rotated text in VB/ASP.NET using the Matrix class

2009-11-19T16:17:00.001-06:00

While working on 2D drawings in VB.NET, you might find yourself in a situation where you may want to rotate a text or any other object on the drawing canvas. I discovered this technique when I was trying to draw my text vertically from bottom to top and the System.Drawing.StringFormat class’s built in vertical text format would only support top to bottom layout. Then I discovered the System.Drawing.Drawing2D.Matrix class which is used for geometric transformation. Using the Matrix class you can rotate the drawing canvas to any desired angle, draw the text/object and then rotate it back to the original position.

Example of rotated text:

I have implemented the drawing by using ASP.NET web application where the drawing is generated by an aspx page. To view the image in web browser, you just need to create an HTML image tag on a new page and set the image source(src) to the .aspx file. The .aspx file code to generate a sample PNG file is given below. The main functionality for rotating the text is implemented in the RotateString subroutine which is provided with the text, rotation angle, and the x and y coordinates.

Imports System.Drawing
Imports System.IO
Imports System.Drawing.Drawing2D

Partial Public Class TextImageDraw
    Inherits System.Web.UI.Page

    'Dimensions of the bitmap
    Const DRAWING_HEIGHT As Integer = 300
    Const DRAWING_WIDTH As Integer = 300

    Dim bitmap As New Bitmap(DRAWING_WIDTH, DRAWING_HEIGHT)
    Dim myDrawing As Graphics = Graphics.FromImage(bitmap)

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim myDrawingBackgroundColor As New SolidBrush(Color.AliceBlue)
        'Fill Drawing Background
        myDrawing.FillRectangle(myDrawingBackgroundColor, 0, 0, DRAWING_WIDTH, DRAWING_HEIGHT)

        myDrawing.TextRenderingHint = Text.TextRenderingHint.AntiAlias

        Dim myText As String = "   web3o.blogspot.com"

        'Text Rotation Cordinates
        Dim xCordinate As Integer = DRAWING_WIDTH / 2
        Dim yCordinate As Integer = DRAWING_HEIGHT / 2

        'Draw Rotation Center
        myDrawing.DrawEllipse(Pens.Black, New Rectangle(xCordinate - 1, yCordinate - 1, 3, 3))

        'Draw Header Text
        Dim headingText As String = "Rotating Text"
        Dim headingFont As Font = New Font("arial", FontSize.XLarge, FontStyle.Regular)
        Dim headingTextWidth As Double = myDrawing.MeasureString(headingText, headingFont).Width
        Dim headingTextHeight As Double = myDrawing.MeasureString(headingText, headingFont).Height
        myDrawing.DrawString(headingText, headingFont, Brushes.Red, _
                             (DRAWING_WIDTH - headingTextWidth) / 2, 2)

        'Draw Text in 360 degrees with 30 degree interval
        For angle = 0 To 330 Step 30
            RotateString(myText, angle, xCordinate, yCordinate)
        Next

        'Draw Footer Text
        myDrawing.DrawString(headingText, headingFont, Brushes.Red, _
                            (DRAWING_WIDTH - headingTextWidth) / 2, _
                            DRAWING_HEIGHT - headingTextHeight - 2)

        'Set smoothing mode for the drawing to Anti-alias
        myDrawing.SmoothingMode = Drawing2D.SmoothingMode.AntiAlias

        'Write the image to browser...
        Response.ClearContent()
        Response.ContentType = "image/png"
        Dim mem As New MemoryStream()
        bitmap.Save(mem, System.Drawing.Imaging.ImageFormat.Png)
        mem.WriteTo(Response.OutputStream)
        myDrawing.Dispose()
        bitmap.Dispose()
    End Sub

    Private Sub RotateString(ByVal Text As String, ByVal angle As Integer, _
                             ByVal x As Integer, ByVal y As Integer)
        Dim myFont As Font = New Font("arial", FontSize.XLarge, FontStyle.Regular)
        Dim myColor As SolidBrush = New SolidBrush(Color.Black)
        ' Make a rotation matrix
        Dim myMatrix As New Matrix
        myMatrix.RotateAt(angle * -1, New Point(x, y)) 'Rotate drawing
        myDrawing.Transform = myMatrix
        myDrawing.DrawString(Text, myFont, myColor, x, y) 'Draw the text string
        myMatrix.RotateAt(angle, New Point(x, y)) 'Rotate back
        myDrawing.Transform = myMatrix
    End Sub

End Class

You can just copy the RotateString subroutine to your code and pass the Graphics class object along with other parameters to draw the rotated string on it.

del.icio.us Tags: ASP.NEt,VB.NET,Rotate Text,Matrix Transform

Multiple File Uploads in ASP.NET with Add/Remove and Up/Down functionalities

2009-11-19T10:05:00.001-06:00

HTML or ASP.NET does not allows you to select more then one file in a single file upload input field. To work around this shortcoming you will either have to add dynamic file upload fields by using JavaScript or use a single file upload field to upload the files one by one.

I have devised a nifty technique by using the ASP.NET ListBox control to keep track of the added files and manage them. You can add/remove or change the upload order of the files before uploading them all to your server/database. Sometimes the order of your file upload is also very important and it becomes more easier with this technique where you can arrange them by using the Up/Down controls.

The code for the .aspx file is pretty straight forward with a FileUpload control, a ListBox control and buttons to handle all the functionalities. You can even implement this code as an ASP.NET User Control for your project.

Here is the File Upload code for .aspx file:
<table>
<tr>
    <td colspan="2">
    <font color="red"><asp:Label ID="Message" runat="server" Text=""></asp:Label></font>
    </td>
</tr>
<tr>
    <td colspan="2">
    <asp:FileUpload runat="server" id="FileUploader" Width="300"></asp:FileUpload>
    </td>
</tr>
<tr>
    <td>
    <asp:ListBox ID="FileListBox" runat="server" Width="300" Rows="5" SelectionMode="Single" BackColor="AliceBlue">
    </asp:ListBox>
    </td>
    <td>
    <asp:Button ID="Up" runat="server" Text="↑" Font-Bold="true" Font-Size="Large" /><br />
    <asp:Button ID="Down" runat="server" Text="↓" Font-Bold="true" Font-Size="Large" /><br />
    </td>
</tr>
<tr>
    <td colspan="2">
    <asp:Button ID="Add" runat="server" Text="Add" />
    <asp:Button ID="Remove" runat="server" Text="Remove" />
    <asp:Button ID="Upload" runat="server" Text="Upload" />
    </td>
</tr>
</table>
<br /><br />
<asp:Literal ID="FileList" runat="server"></asp:Literal>

The backend code in VB is also pretty easy to understand with subroutines to handle the button click events. To keep track of all the files added to the list we use a Listbox control and to store the HttpInputFile objects we use a global ArrayList named Files. For saving the files I have used an example of storing the files in a Database using stored procedure, but you can always save the file to your server itself by using the HIF.PostedFile.SaveAs method. Detailed description for the functionality of each button click event subroutine is given below:

Add_Click: Fires when the user browses a file and click on the Add button. Error checking is done to ensure if the FileUpload control has input file, if the file size is not zero and does the file already exists in the list or not. After error checking is passed, the file name is added to to List Box and also to the global ArrayList which holds the object to the HttpInputFile class.
Remove_Click: This subroutine simply removes the file name at selected index from the List Box and from the Files Array.
Up_Click: The position of the selected item is switched with the item on top of it in the List Box and the Array List.
Down_Click: The position of the selected item is switched with the item below it in the List Box and the Array List.
Upload_Click: All the files in the Files Array are uploaded to the database using stored procedure.

Here is the VB file code for the File Uploader:

Imports System.Data.SqlClient

Partial Public Class _Default
    Inherits System.Web.UI.Page

    Public Shared Files As ArrayList = New ArrayList()
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    End Sub

    Protected Sub Add_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Add.Click
        Try
            Message.Text = ""
            If FileUploader.HasFile Then 'Check if file exists...
                If FileUploader.PostedFile.ContentLength > 0 Then 'Check file size
                    If FileListBox.Items.Contains(New ListItem(System.IO.Path.GetFileName(FileUploader.PostedFile.FileName))) Then
                        Message.Text = "File already in the list!"
                    Else
                        Files.Add(FileUploader)
                        FileListBox.Items.Add(System.IO.Path.GetFileName(FileUploader.PostedFile.FileName))
                        Message.Text = "Add another file or click Upload to save them all..."
                    End If
                Else
                    Message.Text = "File size cannot be 0!"
                End If
            Else
                Message.Text = "Please select a file to add!"
            End If
        Catch ex As Exception
            ' Handle Error
        End Try
    End Sub

    Protected Sub Remove_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Remove.Click
        If FileListBox.Items.Count > 0 Then
            If FileListBox.SelectedIndex < 0 Then
                Message.Text = "Please select a file to remove!"
            Else
                Files.RemoveAt(FileListBox.SelectedIndex)
                FileListBox.Items.Remove(FileListBox.SelectedItem.Text)
                Message.Text = "File removed..."
            End If
        End If
    End Sub

    Protected Sub Up_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Up.Click
        If FileListBox.Items.Count > 1 AndAlso FileListBox.SelectedIndex > 0 Then
            Dim index As Integer = FileListBox.SelectedIndex
            Dim toMove As String = FileListBox.SelectedValue
            'Move up filename in ListBox
            FileListBox.Items.Insert(index - 1, toMove)
            FileListBox.Items.RemoveAt(index + 1)
            FileListBox.Items.Item(index - 1).Selected = True
            'Move up file in Files ArrayList
            Dim TempFileHandle As FileUpload = Files(index - 1)
            Files(index - 1) = Files(index)
            Files(index) = TempFileHandle
        End If
    End Sub

    Protected Sub Down_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Down.Click
        If FileListBox.Items.Count > 1 AndAlso FileListBox.SelectedIndex < FileListBox.Items.Count - 1 Then
            Dim index As Integer = FileListBox.SelectedIndex + 1
            Dim toMove As String = FileListBox.Items.Item(index).Text
            'Move down filename in ListBox
            FileListBox.Items.Insert(index - 1, toMove)
            FileListBox.Items.RemoveAt(index + 1)
            FileListBox.Items.Item(index).Selected = True
            'Move down file in Files ArrayList
            Dim TempFileHandle As FileUpload = Files(index - 1)
            Files(index - 1) = Files(index)
            Files(index) = TempFileHandle
        End If
    End Sub

    Protected Sub Upload_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Upload.Click
        Dim conn As SqlConnection = New SqlConnection("")
        conn.Open()
        For Each HIF As FileUpload In Files
            FileList.Text += "Uploading file: " & HIF.PostedFile.FileName + "<br />" + vbCrLf
            Dim fileBytes(HIF.PostedFile.InputStream.Length) As Byte
            HIF.PostedFile.InputStream.Read(fileBytes, 0, fileBytes.Length)
            Dim Command As New SqlCommand
            With Command
                .Connection = conn
                .CommandType = CommandType.StoredProcedure
                .CommandText = "upload_files"
                .Parameters.AddWithValue("@id", System.Guid.NewGuid.ToString())
                .Parameters.AddWithValue("@name", System.IO.Path.GetFileName(HIF.PostedFile.FileName))
                .Parameters.AddWithValue("@size", HIF.PostedFile.ContentLength)
                .Parameters.AddWithValue("@type", HIF.PostedFile.ContentType)
                .Parameters.AddWithValue("@file", fileBytes)
                .Parameters.AddWithValue("@dateadded", DateTime.Now())
            End With
            Command.ExecuteNonQuery()
        Next
        conn.Close()
        Message.Text = ""
        'Clear Files ArrayList
        Files.Clear()
        'Clear File List Box
        FileListBox.Items.Clear()
    End Sub
End Class

This implementation contains very minimal amount of code to attain the desired functionalities, you can always add more error checking or styles to suit your website design.

del.icio.us Tags: ASP.NET,Multiple File Upload,VB.NET

Making Checkboxes behave like Radio Buttons using jQuery

2009-11-13T09:35:00.001-06:00

Sometimes you might need Checkboxes to behave like Radio Buttons on your webpage because you may only want zero or one selection from a category of choices. You cannot select 0 or 1 choice from a Radio Button Group because Radio Button groups are meant to select only one choice from a group.

I have written an easy to use and understand code in jQuery for achieving this task. In this example, all the checkboxes with name Colors are assigned a click function (Checkbox_to_RadioButton()) when the page loads for the first time. The Checkbox_to_RadioButton() is a generic function which will automatically uncheck all other other checkboxes with the same name/group.

Too make this work on your page, you just need to paste this JavaScript code in the head section of your webpage and set the Checkbox group name in the page ready function.

JavaScript Code:
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
      $('input:checkbox[name=Colors]').click(function(){
            Checkbox_to_RadioButton(this);
      });
});
function Checkbox_to_RadioButton(box){
      $('input:checkbox[name=' + box.name + ']').each(function(){
            if (this != box) $(this).attr('checked', false);
      });
}
</script>

HTML Code:
<input type="checkbox" name="Colors" value="Red" />Red<br />
<input type="checkbox" name="Colors" value="Blue" />Blue<br />
<input type="checkbox" name="Colors" value="Green" />Green<br />
<input type="checkbox" name="Colors" value="Yellow" />Yellow<br />

del.icio.us Tags: jQuery,Checkbox,Radio Button,Checkbox as Radio button