imageflow下载
imageflow下载最新版本1.3.0下载,javascript相册展示效果,效果图如下
imageflow使用说明文档API配置如下
Documentation
Introduction
ImageFlow is an object-oriented script, that means you can create many instances of it on one website. With multiple instances comes the whish to customize each instance differently. This can easily be done by options which are documented here.
First of all you need to know how to use options. In the imageflow.js and the (imageflow.packed.js) you will find two lines within the domReady function. The first line instantiates a new ImageFlow Object with the variable name instanceOne. The second line calls the init method of the newly created instance and passes
the option(!) ImageFlowID with the string 'myImageFlow' to it. JSdomReady(function() { var instanceOne = new ImageFlow(); instanceOne.init({ ImageFlowID: 'myImageFlow' }); });
In JavaScript options are written in curly brackets and you can seperate multiple options with commas. This is an example with two instances and different options:
JSdomReady(function() { var instanceOne = new ImageFlow(); instanceOne.init({ ImageFlowID: 'myImageFlow' }); var instanceTwo = new ImageFlow(); instanceTwo.init({ ImageFlowID: 'myExample', startID: 5, captions: false }); });
That code above instantiates two ImageFlow Objects. The second shows no captions and will start with the fifth image. Check the Examples to see running code.
Options
Name | Type | Default | Description | Example |
animationSpeed | Number | 50 | Animation speed in ms | |
aspectRatio | Number | 1.964 | Aspect ratio of the ImageFlow container (width divided by height) | Proportion |
buttons | Boolean | false | Toggle navigation buttons | Enable navigation buttons |
captions | Boolean | true | Disables / enables the captions | No reflections, no scrollbar and no captions |
circular | Boolean | false | Toggle circular rotation | Circular |
glideToStartID | Boolean | true | Toggle glide animation to start ID | Circular |
imageCursor | String | 'default' | Cursor type for the images (try 'pointer') | |
ImageFlowID | String | 'imageflow' | Unique id of the ImageFlow container | Default |
imageFocusM | Number | 1.0 | Multiplicator for the focussed image size in percent | imageFocusM |
imageFocusMax | Number | 4 | Maximum number of images on each side of the focussed one | imageFocusMax |
imagePath | String | '' | Path to the images relative to the reflect_.php script | |
imageScaling | Boolean | true | Toggle image scaling | No image scaling |
imagesHeight | Number | 0.67 | Height of the images div container in percent | 21:9 (Cinemascope) |
imagesM | Number | 1.0 | Multiplicator for all images in percent | Extreme portrait format |
onClick | Function | function() { document.location = this.url; } | Function that is called onclick of the focussed image | New window |
opacity | Boolean | false | Disables / enables image opacity | Enable image opacity |
opacityArray | Array of Numbers | [10,8,6,4,2] | Image opacity range - first value is for the focussed image (0 = 100% opacity, 10 = 0% opacity) | Change opacity strength |
percentLandscape | Number | 118 | Scale landscape format | Extreme portrait format |
percentOther | Number | 100 | Scale portrait and square format | Extreme portrait format |
preloadImages | Boolean | true | Disables / enables the loading bar and image preloading | |
reflections | Boolean | true | Disables / enables the reflections | No reflections |
reflectionGET | String | '' | Passes variables via the GET method to the reflect2.php and reflect3.php script | Reflection background color |
reflectionP | Number | 0.5 | Reflection height in % of the source image (1.0 = 100%, 0 = 0%) | Image alignment |
reflectionPNG | Boolean | false | Switches from the reflect2.php to the reflect3.php for PNG transparency support | Transparent reflections |
reflectPath | String | '' | Path to the reflect_.php script | |
scrollbarP | Number | 0.6 | Width of the scrollbar in percent | |
slider | Boolean | true | Disables / enables the scrollbar | No reflections and no scrollbar |
sliderCursor | String | 'e-resize' | Cursor type for the slider (try 'default') | |
sliderWidth | Number | 14 | Width of the slider in px | |
slideshow | Bool | false | Toggle slideshow | Slideshow |
slideshowSpeed | Number | 1500 | Time between slides in ms | Speed, circular and no scrollbar |
slideshowAutoplay | Bool | false | Toggle automatic slideshow play on startup | Autoplay |
startID | Number | 1 | Glide to this image number on startup | startID |
startAnimation | Boolean | false | Animate images moving in from the right on startup | startAnimation |
xStep | Number | 150 | Step width on the x-axis in px | xStep |
来源:http://finnrudolph.de/ImageFlow/Documentation