Creative Juices Bo. Co.

Satisfy Your Thirst For Something Refreshing!

CJ Flashy Slide Show 1.0

A JQuery Plugin That Gives Your Slide Shows Some Flash-Like Transitions

Project Description

CJ Flashy Slide Show is a JQuery plugin that allows you to create a photo slide show that has some "flash-like" transitional effects. The plugin has various settings which you can manipulate to achieve a multitude of effects, such as sizing, timing, transparency and shape style. Integration is a snap, you basically create a set of images and wrap it within a simple container. Unlike most Flash solutions you do not need to create an external XML file or embed your images within a hard-to-change Flash project. As with all our projects, simplicity is the key.

Examples

To get a better idea of what this plug-in can accomplish, take a look at the samples below. The first two images are the original source files used for the transitions (A slide show consisting of only two slides). Following those are a couple of effects created using the plug-in. The settings for those effects are included. Something to keep in mind, the effects will change based on your image size. This is because instead of allowing you to determine the dimensions of the effect blocks, I am allowing to specify the count or the number of blocks going horizontally and vertically. So an effect that works well for one size may look different for another. This is something I'm going to address in the next release.

  • CJ Flashy Slideshow Sample - Original Image A
    Orginal Image A
  • CJ Flashy Slideshow Sample - Original Image B
    Orginal Image B
  • CJ Flashy Slideshow Sample - Sample Effect 1
    Sample Effect 1
  • CJ Flashy Slideshow Sample - Sample Effect 2
    Sample Effect 2
  • CJ Flashy Slideshow Sample - Sample Effect 3
    Sample Effect 3

Sample Effect 1 - Settings: { xBlocks: 5, yBlocks: 3, minBlockSize: 5, effect: 'bubbles' }
Sample Effect 2 - Settings: { xBlocks: 1, yBlocks: 19, minBlockSize: 0 }
Sample Effect 3 - Settings: { xBlocks: 5, yBlocks: 3, minBlockSize: 100, translucent: true }

Implementing

Arguments

ArgumentDescriptionTypeDefaultOptions
xBlocksThe number of blocks horizontally.integer12> 0
yBlocksThe number of blocks vertically.integer3> 0
minBlockSizeThe initial block size as it enters into the frame, prior to the scale to fill.integer5>= 0
delayThe delay between tranistions in milliseconds.integer3000>= 0
effectThe name of the effect type to use. ('bubbles' currently uses experimental CSS rules)stringnormalnormal, bubbles
translucentAdds a level of transparency to the initial blocks. They will fade to a solid towards the end of the effect.booleanfalsetrue, false
direction(Not used at this point)stringlefttop, left, bottom, right, random, none

Release Notes

This is the first version, so I wanted to release it to start getting some user feedback. In the future, I would like to add a few more control options, such as effect direction, better sizing controls and maybe some preset effects. If you come up with some cool settings, be sure you come back here and share what they were. I might include them in the next release.