Ajax Updates |
| Posted: 05 Dec 2009 07:04 AM PST ZK is the a proven Ajax + Mobile framework designed to maximize enterprises operation efficiency and minimize the development cost. With groundbreaking Direct RIA architecture, ZK simplifies and speeds the creation, deployment and maintenance of rich Internet applications.  Related Listings:
| |||||
| Posted: 05 Dec 2009 06:43 AM PST CrossSlide is a jQuery plugin that implements in Javascript some common slide-show animations, traditionally only available to the web developer via Adobe Flash™ or other proprietary plugins. CrossSlide builds upon jQuery’s animation facility, so it is as portable across browsers as jQuery itself (a lot.) CrossSlide can do a few different things, depending on how it’s called: This is the kind of animation from which the plugin takes its name. Here is the jQuery code to set it up: $('#test1').crossSlide({ speed: 45, fade: 1 }, [ { src: 'lib/sand-castle.jpeg', dir: 'up' }, { src: 'lib/sunflower.jpeg', dir: 'down' }, { src: 'lib/flip-flops.jpeg', dir: 'up' }, { src: 'lib/rubber-ring.jpeg', dir: 'down' } ]); #test1 is the block-level element (such as a div) whose contents will be replaced with the animation. What you put inside it in your HTML is only shown while the images are being preloaded, or if the user-agent has JavaScript turned off. In this example it is a simple “Loading…” message (reload this page to see it.) The first parameter to the crossSlide() function call is a dictionary of options, which will be explained by example through this page. The second parameter is an array of objects, defining the sequence of pictures, each with its source path and various attributes. To get this first kind of effect you must specify the motion speed (in px/sec) and the duration of the cross-fade between images (in sec), plus the direction in which each image should be moving. The plugin computes the rest, panning each image edge-to-egde at the desired speed, in the desired direction. dir must be one of up, down, left or right. For best results I recommend using an even number of pictures and alternating directions, as in the example. $('#test2').crossSlide({ sleep: 2, fade: 1 }, [ { src: 'lib/sand-castle.jpeg' }, { src: 'lib/sunflower.jpeg' }, { src: 'lib/flip-flops.jpeg' }, { src: 'lib/rubber-ring.jpeg' } ]); Notice how the sleep parameter has taken the place of speed, as there can be no speed in an image that’s not moving. fade is still expressed in seconds and is additional to the sleep time. You cannot use both speed and sleep at the same time, because they mean different effects. $('#test3').crossSlide({ fade: 1 }, [ { src: 'lib/sand-castle.jpeg', href: 'http://flickr.com/photos/spacetrucker/94209642/', from: '100% 80% 1x', to: '100% 0% 1.7x', time: 3 }, { src: 'lib/sunflower.jpeg', href: 'http://flickr.com/photos/hichako/1125341449/', from: 'top left', to: 'bottom right 1.5x', time: 2 }, { src: 'lib/flip-flops.jpeg', href: 'http://flickr.com/photos/jayniebell/1125216143/', from: '100% 80% 1.5x', to: '80% 0% 1.1x', time: 2 }, { src: 'lib/rubber-ring.jpeg', href: 'http://flickr.com/photos/ruminatrix/1125292682/', from: '100% 50%', to: '30% 50% 1.5x', time: 2 } ]); Every picture’s pan & zoom effect takes time seconds plus the two cross-fades, each taking an additional fade seconds. from and to define the starting and ending points of the effect, including the cross-fade part. They are composed of a background-position value, following the same syntax of the CSS property of the same name, and of an optional zoom factor. The zoom defaults to 1x if not provided. The background-position part only accepts keywords and percent values: lengths are not supported. As in CSS, the percentages are interpreted as horizontal followed by vertical, while the keywords can be put in any order. You can have the animation loop just once, or a fixed number of times, by adding a loop option to the first parameter, alongside fade, sleep or speed. You can also have the images shown in a random order every time the page is loaded, by adding a shuffle: true option. The last option is most useful with static cross-fade animations. Every picture can be made a hyperlink, by adding a href parameter with a relative or absolute URI. In this example, they point to the websites of the photographers. You can also add an onclick parameter, pointing to a function that will handle clicks. Related Listings:
|
| You are subscribed to email updates from Ajax Updates To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.