|Examples - Imageflow|
|Saturday, 09 January 2010 15:47|
Basic Display Examples
Glide to image 3 on page load
You can also specify a percentage. For example, 50% will cause the gallery to glide halfway into the thumbnails.
Auto-step through thumbnails every 2 seconds
The time interval between steps is configurable. Clicking on a thumbnail or a naviagation button stops the auto-step function. Press the play button to resume auto-stepping.
Active link on focused - Advance on click
Clicking on a non-focused (not the center) thumbnail will cause that thumbnail to be brought into focus (brought to the center). Clicking on the focused (centered) thumbnail will trigger the onclick event, i.e. popup image, link activation, etc.
Active link on focused - Advance on mouseover
Hovering the mouse pointer over on a non-focused (not the center) thumbnail will cause that thumbnail to be moved toward the center. Clicking on the focused (centered) thumbnail will trigger the onclick event, i.e. popup image, link activation, etc.
Sharpening can be applied to the focused (center) thumbnail image to make it standout. PHP5 is required.
Blurring can be applied to non-focused thumbnails to make the focused (center) thumbnail standout. PHP5 is required.
The non-focused thumbnails can be darkened to make the focused (center) thumbnail standout. PHP5 is required.
Sharpen, Blur, Darken
Any combination of thumbnail effects can be used. In this example the non-focused thumbnails are blurred as well as darkened and the focused thumbnail is sharpened.
Non-focused thumbnails can be shown in grayscale to make the focused (center) thumbnail standout. PHP5 is required.
A border can be applied to any thumbnail edge. In this example a gray border has been added to the top, right and left edges with a black border at the bottom edge to seperate the thumbnail a little from the thumbnail reflection.
Thumbnail Reflection Examples
Fade to color
The thumbnail reflection can be blended into any solid background by setting the 'Fade to color' parameter to match the background color of the gallery. In this case #add8e6 was used.
Click on the links below to view the changes to the imageflow.css and imageflow-ie6.css stylesheets that are required to accomplish the gallery display changes.
Alpha fade start
The thumbnail reflection starting intensity can be increased/reduced by specifying an alpha fade start value. In this example a value of 30 was used instead of the default of 80 to reduce the intensity of the reflection.
Alpha fade start - no reflection
You can set alpha fade start and alpha fade end to 0 to virtually eliminate the reflection portion of the thumbnail image.
The thumbnail reflection can be blended into a background image by setting the 'Transparent' parameter. This results in true transparent reflection that can be used against any type of background. Transparent reflections will not display correctly in IE6, however.
|Last Updated on Wednesday, 03 February 2010 07:47|