Alternative to animated GIF’s: AnimateImages jQuery Plugin

by Marcel Wijnands 28. August 2010 16:06

I know of two cases where you would want an animated GIF, but it won’t do the trick:

  • Browsing the web using an Android phone.
  • Showing some kind of “processing..” animation when clicking a link/button and make it work in Internet Explorer.

I created an alternative using some images and a piece of javascript, and turned it into a jQuery plugin.

What you need is images like these:

circleball

Name them like:

circleball-1.png, circleball-2.png … circleball-8.png

Put a container on your page, like a span or a div, and use the plugin like this:

$(".circleball").animateImages("/images/circleball-@.png", 8, 90);

In the above line, the @ gets replaced with the imagenumbers, 8 means there are 8 images, 90 means the animation-interval is 90 ms.

You can check out a working example here! This could be optimized to use sprites instead, but it's a start.

jquery.animateImages can be downloaded below;

jquery.animateImages.zip (1.01 kb)

Tags:

General | JavaScript

Streetview InfoWindow GControl for Google Maps API V2

by Marcel Wijnands 27. August 2010 00:13

UPDATE: This does not work anymore since the Google Maps API v2 has been deprecated.

-------------------

Since I couldn’t find an existing Google Maps Streetview GControl, I decided to roll my own. This GControl will put a streetview button next to the default maptype buttons. Clicking it will show a “streetview guy” marker which you can drag around your map. Click the guy to open an infowindow showing the street view!

After adding the maps.streetviewcontrol.js to your page, all you have to do to add it to your map is:

map.addControl(new StreetViewControl);

Check out a working example here. Feel free to modify it to fit your needs.

StreetViewControl can be downloaded below;

maps.streetviewcontrol.zip (3.84 kb)

Tags:

Google Maps | JavaScript

Powered by BlogEngine.NET 1.5.0.7
Theme by Mads Kristensen | Modified by Mooglegiant