Home Examples
07 | 28 | 2014
Examples - Imageflow
Saturday, 09 January 2010 15:47

Basic Display Examples

Loading images
loading
Mountain Valley Windy landscape Sunset in the mountain Resting skier Contemplating dog Cabins Dark skies in sunny landscape Blue sky

Default display

Loading images
loading
Mountain Valley Windy landscape Sunset in the mountain Resting skier Contemplating dog Cabins Dark skies in sunny landscape Blue sky

Previous/next navigation buttons

Loading images
loading
Mountain Valley Windy landscape Sunset in the mountain Resting skier Contemplating dog Cabins Dark skies in sunny landscape Blue sky

No Slider

Loading images
loading
Mountain Valley Windy landscape Sunset in the mountain Resting skier Contemplating dog Cabins Dark skies in sunny landscape Blue sky

No Slider, No caption

Loading images
loading
Mountain Valley Windy landscape Sunset in the mountain Resting skier Contemplating dog Cabins Dark skies in sunny landscape Blue sky

No Slider, No caption, Previous/Next navigation buttons

Loading images
loading
Mountain Valley Windy landscape Sunset in the mountain Resting skier Contemplating dog Cabins Dark skies in sunny landscape Blue sky

No Slider, Previous/Next navigation buttons

Behavior Examples

Loading images
loading
Mountain Valley Windy landscape Sunset in the mountain Resting skier Contemplating dog Cabins Dark skies in sunny landscape Blue sky

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.

Loading images
loading
Mountain Valley Windy landscape Sunset in the mountain Resting skier Contemplating dog Cabins Dark skies in sunny landscape Blue sky

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.

Loading images
loading
Mountain Valley Windy landscape Sunset in the mountain Resting skier Contemplating dog Cabins Dark skies in sunny landscape Blue sky

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.

Loading images
loading
Mountain Valley Windy landscape Sunset in the mountain Resting skier Contemplating dog Cabins Dark skies in sunny landscape Blue sky

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.

Thumbnail Examples

Loading images
loading
Mountain Valley Windy landscape Sunset in the mountain Resting skier Contemplating dog Cabins Dark skies in sunny landscape Blue sky

Sharpen

Sharpening can be applied to the focused (center) thumbnail image to make it standout. PHP5 is required.

Loading images
loading
Mountain Valley Windy landscape Sunset in the mountain Resting skier Contemplating dog Cabins Dark skies in sunny landscape Blue sky

Blur

Blurring can be applied to non-focused thumbnails to make the focused (center) thumbnail standout. PHP5 is required.

Loading images
loading
Mountain Valley Windy landscape Sunset in the mountain Resting skier Contemplating dog Cabins Dark skies in sunny landscape Blue sky

Darken

The non-focused thumbnails can be darkened to make the focused (center) thumbnail standout. PHP5 is required.

Loading images
loading
Mountain Valley Windy landscape Sunset in the mountain Resting skier Contemplating dog Cabins Dark skies in sunny landscape Blue sky

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.

Loading images
loading
Mountain Valley Windy landscape Sunset in the mountain Resting skier Contemplating dog Cabins Dark skies in sunny landscape Blue sky

Grayscale

Non-focused thumbnails can be shown in grayscale to make the focused (center) thumbnail standout. PHP5 is required.

Loading images
loading
Mountain Valley Windy landscape Sunset in the mountain Resting skier Contemplating dog Cabins Dark skies in sunny landscape Blue sky

Border

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

Loading images
loading
Mountain Valley Windy landscape Sunset in the mountain Resting skier Contemplating dog Cabins Dark skies in sunny landscape Blue sky

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.

CSS and IE6CSS (for IE6 compatability)

Loading images
loading
Mountain Valley Windy landscape Sunset in the mountain Resting skier Contemplating dog Cabins Dark skies in sunny landscape Blue sky

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.

Loading images
loading
Mountain Valley Windy landscape Sunset in the mountain Resting skier Contemplating dog Cabins Dark skies in sunny landscape Blue sky

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.

Loading images
loading
Mountain Valley Windy landscape Sunset in the mountain Resting skier Contemplating dog Cabins Dark skies in sunny landscape Blue sky

Transparent reflection

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.

Highslide Examples

Loading images
loading
Mountain Valley Windy landscape Sunset in the mountain Resting skier Contemplating dog Cabins Dark skies in sunny landscape Blue sky

Highslide controlbar

A navigation controlbar can be included on highslide popup images when you mouseover the popup image. Clicking on the next/previous button in the controlbar will bring up the next/previous popup image as well as rotating the Imageflow gallery thumbnails.

Last Updated on Wednesday, 03 February 2010 07:47