javascript – Page 3 – computeraxe

JavaScript Plugin: jQuery Cycle for Slideshows

JavaScript plugins can definitely speed up development of a website, but unless you take the time to explore the plugins you’re using, you may not be using them to full advantage. Read on to learn more about using the jQuery Cycle plugin for slideshows. It works with jQuery v1.3.2 and later.

The jQuery Cycle Plugin offers an amazing number of transitions for your next slideshow. If any of the two dozen transitions don’t give the effect you’re looking for, the plugin can always be modified to suit. If you’re looking to make some unique transitions, check out the advanced demos on the plugin site.

Over 50 options can be implemented to show your slides in the best light. Options are available for controlling the speed of the transitions, the length of time between slides, as well as running the slideshow backwards or stopping after a certain number of slides have been shown.

Slides can be forced to fit a container and made to be manually paused and resumed. Easing transitions can be specified as can random showing of slides. Options in Cycle are plentiful and definitely worth investigating.

Command strings can be used to pause or resume the slideshow or advance to the next or previous slides. Tie these commands to a click event to let your visitors see the show as they wish.

The Cycle plugin works with two assumptions in creating slideshows. First, it assumes that a container object has been identified, usually via a class or id identifier, that will contain the slides for the slideshow. All children of the containing parent will become a slide.

Second, the slides must all be children of the container. Any object can be a child here, so textual content, images, anchors and divs can all be manipulated and viewed as slides in your slideshow. Don’t put anything else in the slideshow container unless you want it to become part of the slideshow.

Here’s the HTML markup that could be used for a simple slideshow of images:

[plain]

[/plain]

The images are contained in a specific container, div#show, which can be styled with CSS. Giving the container and the slides fixed dimensions works best, so make sure to specify the widths and heights.

The default behavior is to fade slides in and out of the container in a continuous and sequential manner, in a cyclical way. So, we’re going to ‘cycle’ through the slides in this slideshow. The javascript for a slideshow using default behavior is simple:

[plain]
$(‘#show’).cycle();
[/plain]

With Cycle plugin default settings the slideshow starts with the first image or slide and each slide takes one second, or 1000 milliseconds, to be faded in. Each slide is then paused for 4 seconds and then faded out in one second. The slideshow wraps around so that the first slide will be shown after the last one. The fading in and out action occurs continuously and indefinitely with the default settings, as below:

To alter the slideshow behavior pass an effect, other than fade, as a string to the cycle method, like so:

[plain]
$(‘#show2’).cycle(‘shuffle’);
[/plain]

Check out all the effects that can be used to transition slides: blindX, blindY, blindZ, cover, curtainX, curtainY, fade, fadeZoom, growX, growY, scrollUp, scrollDown, scrollLeft, scrollRight, scrollHorz, scrollVert, shuffle, slideX, slideY, toss, turnUp, turnDown, turnLeft, turnRight, uncover, wipe, and zoom.

Several transitions can be combined in a comma-separated list if you can’t choose just one. Or, use the string ‘all’ to see all the slide transition effects in a random manner.

Alternatively, you can use an options object to set the fx option among others. The code below specifies fade, zoom and curtainY effects to bring the slides in and out of the container. Each slide will be brought in slowly (800 ms) and taken out quickly (400 ms) taking a total of 3 seconds for each complete transition. This is the code for the slideshow (#show3) at the top of this post.

[plain]
$(‘#show3’).cycle({
fx: ‘fade,zoom,curtainY’,
speedIn: 800,
speedOut: 400,
slideExpr: ‘img’
timeout: 3000,
nowrap: true
});
[/plain]

The parameter slideExpr is given a string value of ‘img’ in order to produce a slideshow without long blank pauses in between slides when using WordPress. WordPress and other content management systems may introduce extraneous markup when preparing webpages. The markup may be incorrectly interpreted by different browsers used to view slideshows created with Cycle, so it’s become important to specify the elements that are supposed to be cycled in the slideshow. Thus, the addition of slideExpr: ‘img’ as an optional parameter is necessary for image slideshows in WordPress.

The slideshow just above will be shown only one time and end with the last slide because the nowrap option is set to true. This might be a good thing to remember for leaving a textual message on the screen with your last slide instead of having the slideshow run indefinitely.

If you get stuck or need a little help with figuring out how to work the Cycle plugin, visit the jQuery Forum.

jQuery Stop Action Improves InnerFade Plugin

When animations go wrong it’s usually in the timing. Perhaps the browser can’t keep up with all that it’s asked to do or the operating system is bogged down by other tasks. In any case the lack of enough working memory or CPU cycles will have animations stacking up until there are enough resources to do all those fancy moves.

Some animations run continuously and others may be controlled by setting timers or stopping the animations at predetermined times. Other animations happen after some event has occurred, like when a user mouses over an element on the page or clicks a button.

Animations created with the jQuery InnerFade plugin run continuously, which may create a problem if the users’ computer resources aren’t up to the job.

It was noted that an InnerFade news ticker animation of links worked fine and as expected when the browser tab was left open and running. Working with another tab open and going back to the news ticker site, the news items got stacked onto one another so that the text was unreadable and the timing was double time.

Reloading the page or waiting for a couple of seconds to pass brought the expected behavior back. The animations caught up to where they should have been and the behavior continued as expected.

I’m not exactly sure why the animations stacked up in my page and not in the demo page by the plugin author, but I found a solution to this stacking problem.

jQuery lets us use a stop() action to clear the previously requested animations that haven’t finished yet. Optional parameters for the stop() action are clearQueue and gotoEnd, which are false by default.

To use the stop() action in this case, set both parameters to true. This will clear all animations in the queue and jump to the place where the action should be at now.

If it were important to catch up to the latest animation, use true for the optional gotoEnd parameter. When set to true, the gotoEnd parameter figures out what the screen should look like at the end of the present set of animations in the queue and goes there.

In the section of the code that responds to the slide or fade settings, I used the stop() action to clear the queue and catch up. The InnerFade plugin was altered on lines 93 and 96 (of the original script) by inserting .stop(true,true) just before the fadeOut() or slideUp() methods.

[plain]
line 93…$(elements[last]).stop(true,true).slideUp(settings.speed);
line 96…$(elements[last]).stop(true,true).fadeOut(settings.speed);
[/plain]

Below is the portion of the original script that has been modified (on lines 3 and 6 here):

[crayon]
$.innerfade.next = function(elements, settings, current, last) {
if (settings.animationtype == ‘slide’) {
$(elements[last]).stop(true,true).slideUp(settings.speed);
$(elements[current]).slideDown(settings.speed);
} else if (settings.animationtype == ‘fade’) {
$(elements[last]).stop(true,true).fadeOut(settings.speed);
$(elements[current]).fadeIn(settings.speed, function() {
removeFilter($(this)[0]);
});
[/crayon]

The script now works even better!

When two separate link lists were animated with the InnerFade plugin on the same page, the first one stacked up and the second list went blank when the stop() action was used with only the first parameter set to true, so it was important to set both the clearQueue and gotoEnd parameters to true.

The stop() action also comes in handy to clear the queue when event-driven animations get backed up from too much user input, like mousing over and out too fast.

An oddity in all this is that I couldn’t replicate the bad behavior (of the original plugin) inside of WordPress. The stacking up of animations was noticed in a static page outside of WordPress. To see the original and improved InnerFade plugins in action, go to the Good Ideas static page.

Is there some way that WordPress manages the scripts differently? I dunno, but the take away message here is to make sure and test your scripts to see how they act in various circumstances.

Javascript Plugin: InnerFade with jQuery

Fade elements in and out with the InnerFade javascript plugin. Its purpose is to fade “any element inside a container in and out” and it relies on jQuery to do its magic. InnerFade is a lightweight plugin of only 8 kb, so it won’t bog down your pages.

Any group of elements can be faded in and out with the InnerFade plugin as long as they are inside a container that is targeted by the first line of the script. Example elements that can be faded in and out are links in an unordered or ordered list, textual list items, or paragraphs in a div.

A. Eat Right – It’s the easiest medicine to take.
B. Buy Less Stuff – You don’t really need it, do you?
C. Recycle Everything – Save the Earth from humans.
D. Laugh Every Day – It helps to keep things in perspective.
E. Help One Another – Some day you’ll need a little help, so spread good karma.
F. Keep Smiling – It releases happy endorphins and makes you look great, too!

Target specific classes or ids for the right effect. Using the InnerFade plugin with jQuery is a simple way to show a countdown clock where one number fades out and the next one in the sequence fades in.

A news ticker, like the one above, can be created by fading in and out headlines for each news item. Each headline could be a link to the complete story. The headlines could be marked up as list items, like this list of good ideas:

[plain]

A. Eat Right – It’s the easiest medicine to take.
B. Buy Less Stuff – You don’t really need it, do you?
C. Recycle Everything – Save the Earth from humans.
D. Laugh Every Day – It helps to keep things in perspective.
E. Help One Another – Some day you’ll need a little help, so spread good karma.
F. Keep Smiling – It releases happy endorphins and makes you look great, too!

[/plain]

The easiest way to use the InnerFade plug is to accept the default settings, as we did above, and call it with a minimum of effort like so:

[plain]
jQuery(document).ready(function($) {
$(‘#good_ideas’).innerfade();
});
[/plain]

There are only a handful of options and changing them is fairly simple. The type of animation can be set to ‘fade’ or ‘slide’. The speed of the fading or sliding effects is set in milliseconds or with the strings ‘slow’, ‘normal’, or ‘fast’. Timeout is the time between animations in milliseconds. The type of slideshow is set using the strings ‘sequence’, ‘random’, or ‘random_start’. The height of the container element can be set in px, em, %.

Default Settings:
[plain]
animationtype: fade
speed: normal
timeout: 2000
type: sequence
containerheight: auto
runningclass: innerfade
[/plain]

Now that you know you can call the javascript plugin and use it with the default settings, try changing the settings for different effects. For example, try sliding the elements slowly in and out of the 45px tall container in random order with a 3 second pause.

[crayon]
$(document).ready(
function() {
$(‘.group2fade’).innerfade({
animationtype: slide,
speed: ‘slow’,
timeout: 3000,
type: ‘random’,
containerheight: ’45px’
});
}
);
[/crayon]

The InnerFade plugin handles all the hiding of elements until viewed, so without javascript enabled, the visitor will see everything on the page. Use a <noscript> method to offer alternative content to browsers with javascript turned off and put it in the html document just before the closing body tag.

InnerFade plugin can be used for simple slideshows too. The only caveat is to make sure images are of the same size or the bottom edges of larger pics will be seen behind the stack of images.

Generate Animated Loading… Images

We’ve all seen animated images on the screen as a video or slideshow is being downloaded and set up for us to view. Sometimes the word “loading…” is the animation itself. Sometimes there’s a horizontal bar or spinning world that alerts us to wait for the media to be loaded.

A few websites provide a way to generate your own animated loading image. They’re online and they’re free. If you’re tired of the same old circular or horizontal animated images, give the following sites a try.

Preloaders.net

It’s easy to generate a multitude of preloader images at preloaders.net, which is by far the most complete animated image generator available. All you do is choose the category of preloaders that you like and then select one preloader image from the spin box. From there you can alter several parameters of the image.

Several categories of preloaders differentiate preloaders.net from its competition, including three-dimensional, astronomy, people, religion signs, rectangular, smileys, social bookmarks, and zodiac signs.

You can choose between a GIF and an APNG image. Specify any color for the foreground and background colors or select a transparent background. Here’s an example animated clock made at preloaders.net:

A slider lets you change the animation speed from slow to very fast. The slowest speed wasn’t quite slow enough and the fastest speed was way too fast, at least for my liking.

The dimensions of the preloader image can be specified as width and height values. A tick can be removed from the “constrain proportions” box to introduce some interesting effects to the animation. Advanced options include means to flip the image, reverse the animation, and inverse the colors.

LoadInfo.net

Loadinfo.net offers a variety of circular, clock-like and spinning images. The foreground and background colors can be any color you choose and the background could be transparent, too. Select one of the three thumbnail sizes (16×16, 24×24, 48×48) for your image and click on ‘generate’ to create it. If you like the image as presented on the screen, download the free image. GIFs created there did not have transparent backgrounds when I tried it, even though the ‘transparent’ feature was selected. The spinning ying-yang symbol seen here was given a white background for a little fake transparency.

ajaxload.info

Ajaxload.info provides a standard set of clocks, bars and flowers that can be modified with respect to foreground and background color. You’re stuck with the speed of the animation and the size of the image, but the background can be transparent. That’s not too many options, but sometimes a simple loading image is all that’s needed.

LoadingAPNG.com

LoadingAPNG is a free online animation generator that offers a few dozen circular and horizontal bar type of animated PNG. The foreground and background colors, width, height and transparency can be modified to suit.

Chimply.com

Chimply offers several clocks or spinners and animated bars that you can modify with respect to colors, transparency and size. Unique to this free online image generator is that several images can be created and temporarily stored in a workspace on the website before wrapping them in a .zip file for easy download. If you click on “Last generated images” near the bottom of the screen, you can see the images that other users have created. GIFs and SWFs can be downloaded.

CSSload.net

Timur Gafforov figured out how to present an animated image using pure CSS. Once HTML5 and CSS3 are more widely accepted and used by browsers everywhere, cssload.net is a source to remember. At the time of this writing CSS3 usage is in its infancy, so for now we’ll rely on small animated GIFs or APNG images to indicate that media is Loading….

CanvasLoader.js

Another way to show animated images on your site is to use pure javascript via CanvasLoader. Use the CanvasLoader Creator to build a script that will create your animated image on the fly. It’s a clock-like oval, spiral, square, rectangle or rounded rectangle that spins around in this animated image. Set the image diameter, density, range, frames per second, speed, and colors. Then, copy the code snippet to create a new CanvasLoader object using javascript.

Make sure to download the CanvasLoader UI library. The minified .js file is less than 6 kb. The custom snippet to produce an animated image is only 8 lines long.

Well, there we have seven sites that can help us make our websites stand out from the crowd. Take caution though, some of these animated images bring back visions of the early Internet, when scrolling marquees were thought to be cool. It’s best to avoid wacky-looking spinning objects unless they suit the style of your site. If you have a game site, maybe a twirling hat or an animated string of cats is appropriate for a loading image. For a more professional look stick to the more common horizontal bars, clocks or circular moving images and modify the colors to match your site.