Creative Juices Bo. Co.

Satisfy Your Thirst For Something Refreshing!

CJ Flashy Slide Show 1.1.1

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 plugin can accomplish, take a look at the samples below. These are the sample images used for the transitions (A slide show consisting of only two slides).

  • CJ Flashy Slideshow Sample - Original Image A
    Orginal Image A
  • CJ Flashy Slideshow Sample - Original Image B
    Orginal Image B

And here are some examples of the types of effects you can achieve. (Please note, these are just animated GIF's. If you want to see the plugin in action, please use the Online Demo link in the side bar.) The settings used to achieve the effect are included.

  • 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
  • CJ Flashy Slideshow Sample - Sample Effect 3
    Sample Effect 4

Sample Effect 1 - Settings: [none]
Sample Effect 2 - Settings: { xBlocks: 5, yBlocks: 3, minBlockSize: 5, effect: 'rounded' }
Sample Effect 3 - Settings: { xBlocks: 1, yBlocks: 19, minBlockSize: 0 }
Sample Effect 4 - Settings: { xBlocks: 5, yBlocks: 3, minBlockSize: 100, translucent: true }

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.

Requirements

CJ Flashy Slide Show requires JQuery 1.3.2 or greater. It may work with older versions, but it has not been tested with those.

Implementing

Header Includes

Getting CJ Flashy Slide Show to work is really quite simple. The first thing you are going to need to do is include the jquery.cjFlashySlideshow-1.1.1.js file after your call to include JQuery. This is done in the header area of your web page. Typically you will do something like this:

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery-flashy-slideshow-1.1.1.js" type="text/javascript"></script>

Next, you will need to have a block container that contains a single or group of images. I've added line breaks <br> in my example, but it is not neccessary. I do this so the page looks somewhat presentable for any user who may not have a JavaScript or CSS capable web browser.

HTML

An important note about setting the image dimensions. The plugin will basically ignore the image width and height settings. So you need to make sure that your images are scaled and cropped exactly how you want them to display within the container. I might revisit this in a later version of the plugin, but for now just make sure all your images are the same size.

Here's an example of what a container might look like. This code would be placed somewhere withing your web page's <body> section.

<div id="example">
   <img src="image_a.jpg" /><br />
   <img src="image_b.jpg" />
</div>
CSS

We now have to apply some CSS rules to our container. Nothing to fancy or complicated, just a few key elements that are going to be required by the plugin. You need to set the position of the block to either relative or absolute. Also you need to be sure to set the width and the height, as well has making sure that any overflow is hidden. The second rule is not required, but just to be sure, I've hidden all the line-breaks.

div#example {
   position: relative;
   display: block;
   width: 250px;
   height: 150px;
   overflow: hidden; 
}
div#example br { 
   display: none;
}
Initiating the Script

And lastly, to get the slide show started, we need to call the plugin. This is fairly easy, just include the following code in the header section of the web page (be sure it's after you include the previous javascript files.

<script type="text/javascript"><!--
$(function () {
   $(document).ready(function () {
      $('#example').cjFlashySlideShow();
   });
});
//-->
</script>

... or if you want to pass along some arguments, it might look something like this:

<script type="text/javascript"><!--
$(function () {
   $(document).ready(function () {
      $('#example').cjFlashySlideShow({
         xBlocks: 3,
         yBlocks: 3,
         minBlockSize: 80,
         delay: 1250,
         direction: 'random',
         translucent: true,
         sloppy: true
      });
   });
});
//-->
</script>

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
directionDetermines which direction the blocks enter the frame from.stringlefttop, left, bottom, right, random, none
styleThe name of the style type to use. ('rounded' currently uses experimental CSS rules)stringnormalnormal, rounded
translucentAdds a level of transparency to the initial blocks. They will fade to a solid towards the end of the effect.booleanfalsetrue, false
sloppyAdds a level of randomness to the block animation. Essentially this will scatter the blocks based on the minBlockSize dimension.booleanfalsetrue, false

Release Notes

1.1.1 is a minor release that makes sure the images are loaded before continuing.