A jQuery Plugin That Gives Your Slide Shows Some Flash-Like Transitions | CJ Flashy Slideshow

cj-flashy-slideshow

CJ Flashy Slide Show is a JQUERY plugin that allows you to create a photo slideshow that contains some transition effects. The plugin has different settings you can handle to achieve many effects, such as scaling, timing, transparency, and shape pattern.

Integration is a snap, it is primarily creating a set of and turned images within a simple container. Unlike most Flash solutions, you do not need to create an external XML file or include your images within a hard flash project.

How to make use of it:

1. Download and download the JQuery.cj-Flashy-slideshy-slideshy.js script after JQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.cj-flashy-slideshow.js"></script>

2. Add your photos to the slide container.

<div id="example">
  <img src="1.jpg" width="600" height="400" alt="Image 1" />
  <img src="2.jpg" width="600" height="400" alt="Image 2" />
  <img src="3.jpg" width="600" height="400" alt="Image 3" />
  ...
</div>

3. Prepare slide show.

$(function(){
  $('#example').cjFlashySlideShow();
});

4. Example CSS for slides.

#example {
  position: relative;
  display: block;
  width: 600px;
  height: 450px;
  overflow: hidden;
}

5. Adjust the transition effect you want to use:

$(function(){
  $('#example').cjFlashySlideShow({
    preset: "cubism"
  });
});

6. You can also create your own transitional effects using the following options.

$(function(){
  $('#example').cjFlashySlideShow({
    'xBlocks'   : 12,
    'yBlocks'   : 3,
    'minBlockSize'  : 3,
    'delay'     : 3000,
    'direction'   : 'left',
    'style'     : 'normal',
    'translucent' : false,
    'sloppy'    : false
  });
});

Presets

The following is a list of all prerequisites currently available. If you want to create additional additional settings, and see what you have in the comments below.

PresetDescriptionDefault
bricksLittle bricks drop in from the top and expand to reveal the underlying image.Yes
cubismRandom transparent blocks fly in from all sides to reveal the underlying image.No
rainSmall rain drops fall from the top and expand to reveal the underlying image. *This preset only works in browsers which supports CSS3 rules.No
blindsEvenly spaced and sized horizontal bands expand to reveal the underlying image.No
blinds2Evenly spaced and sized vertical bands expand to reveal the underlying image.No
transportRandom transparent horizontal bands expand to reveal the underlying image.No
transport2Random transparent vertical bands expand to reveal the underlying image.No

Image Slideshow With Flash-Like Transitions, CJ Flashy Slideshow Plugin/Github


See Demo And Download

Official Website(cjboco): Click Here

This superior jQuery/javascript plugin is developed by cjboco. For extra Advanced Usages, please go to the official website.