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.
	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:

	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.


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


分类:js图片特效 下载地址
阅读(380)喜欢(0)不喜欢(0)35.49KB浏览器查看效果 点击下载