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.
This version is identical to CJ Flashy Slide Show 1.1.2, accept I've now added a variety of pre-defined presets. You still can pass the old variables to the code if you like, but I've noticed that I may have made things a little too complicated for a few users. This is my attempt to simplify things. If you would like to make your own presets or play around the various options, take a look at that version to see what all the options are.
Requirements
CJ Flashy Slide Show requires JQuery 1.4.2 or greater. I have tested this with version 1.3.2, but not anything older than that.
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.2.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.4.2.min.js" type="text/javascript"></script> <script src="jquery-flashy-slideshow-1.1.2.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 plug-in, 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
To get the slide show started, with the default preset (bricks) all you have to do is initiate the script like this:
<script type="text/javascript"><!--
$(function () {
$(document).ready(function () {
$('#example').cjFlashySlideShow();
});
});
//-->
</script>
... or if you want to pass along one of the predefined presets, you would do something like this:
<script type="text/javascript"><!--
$(function () {
$(document).ready(function () {
$('#example').cjFlashySlideShow({
preset: "cubism"
});
});
});
//-->
</script>
Presets
Below is a list of all the currently available presets. If you would like to create additional presets, post what you have in the comments below. I'll gladly give you credit!
| Preset | Description | Default |
|---|---|---|
bricks |
 Little bricks drop in from the top and expand to reveal the underlying image. |
Yes |
cubism |
 Random transparent blocks fly in from all sides to reveal the underlying image. |
No |
rain |
 Small rain drops fall from the top and expand to reveal the underlying image. *This preset only works in browsers which supports CSS3 rules. |
No |
blinds |
 Evenly spaced and sized horizontal bands expand to reveal the underlying image. |
No |
blinds2 |
 Evenly spaced and sized vertical bands expand to reveal the underlying image. |
No |
transport |
 Random transparent horizontal bands expand to reveal the underlying image. |
No |
transport2 |
 Random transparent vertical bands expand to reveal the underlying image. |
No |
Release Notes
Version 1.1.3 is a minor release. The only difference between this version and 1.1.2 is the ability to pass presets.
5 responses to "CJ Flashy Slide Show 1.1.3"
I can get version 1.1.1 to work just fine, but versions 1.1.2 and 1.1.3 do not work with the suggested script calls in this document.
Any ideas?
Thanks
One question: After i changed the image sizes (html&css) it started to bounce/drop 5px on each image swap. Any ideas?
I LOVE this plugin... and was attempting to implement the "cubism" preset as an image rotator in the header of a site I'm working on. The only problem I encountered was that it doesn't appear to work in IE6 (or at least not in IE6 on the WinXP I've got running on VMWare). Funny thing is that the demo of the "cubism" preset works, just not my implementation.
Have any thoughts?
You can see the test site here: http://tinyurl.com/27ctqvh
Thanks!
I'll take a look and see if I see anything obvious, but not sure if I can help or not.
Thanks!