How to use?
It is very simple to use cjslideshow:Firstly, include a jquery libery in your head
<script type="text/javascript" src="jquery.latest.js"></script>
Download jQuery from jquery.com.
You can also use the CDN from google:
http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
Secondly, include Cjslideimg
<script type="text/javascript" src="jquery.cjslideimg.min.js"></script>
Lastly, call the function after document ready
$(document).ready(function() {
$("#slideimg").cjslideimg({width: 500; height: 300});
});
HTML
In the html part, simply add a div with a id and place the img inside it
Options
| Name | Default | Description |
|---|---|---|
| Width | 500 | The exact width of the slide Show (Must Set) |
| Height | 300 | The exact height of the slide Show (Must Set) |
| Speed | 1500 | The duration of the effect on each change |
| duration | 6000 | The time interval between each change |
| effect | gradient | 'gradient', 'fade', 'random', and (ui effect listed in introduction) |
| interactive | false | false for only effect on the layer being hidden, true for effect on both two layer |
| noeffect | [] | Exclude unwanted effect (only useful if using random effect) data in array format (e.g. [explode,fold]) |
| direction | left | Define the direction of the effect (only useful on some ui effect such as 'slide' |
| desc | false | Show description on the bottom (define by title on the img) |
| descShow | hover | show type of description, 'hover' or 'fixed' |
| descBackground | #000 | The background of the description layer (You can use color and also image background |
| descOpacity | 0.7 | The opacity of the description layer |
| descHeight | 30 | Height of Description layer |
| descPadding | 5 | Padding of Description layer |
| button | false | Show navigation button |
| buttonBG | images/navigator.png | Navigation button image and size, as it use same width and height, so it support Circle or Square only. Your image should in the order 'normal','hover','active' |
| buttonSize | 8 | |
| runreverse | false | Reverse effect direction when go to the first img from last img |
| imglink | false | Add link on each frame (define by dir on the img) |
| delayStart | 0 | Delay the start time of the animation |