Applying Image Effects to your Image Galleries

Applying image effects to your Image Galleries

You may apply reflex and instant photo effects to the images added inside the Text and Images editor. With a few lines of code you may also apply these impressive effects to the images added in Image Galleries.

Reflex effect

The reflex effect will add a mirror-like reflection to the images in your gallery. To integrate such an effect on a page with an Image Gallery added, please follow these steps:

1. Open the page containing your Image Gallery in Admin view.

2. Add an HTML snippet from Add Content > HTML Snippet and paste the code below into it:

function ApplyGalleryImagesEffect()

{

var imgs = document.getElementsByTagName( 'img' );

for ( var i = 0; i < imgs.length; i++ ) {

if ( imgs[ i ].name &&

imgs[ i ].name.indexOf( "image_" ) != -1 ) {

imgs[ i ].setAttribute( 'effect', 3 );

var width = imgs[ i ].getAttribute( 'width' );

var height = imgs[ i ].getAttribute( 'height' );

if ( width > 0 && height > 0 )

var rnd = Math.round( Math.random() * 2 );

var tilt = rnd % 2 == 0 ? "left" : "right";

{

imgs[ i ].setAttribute( 'options', "{'name':'reflex','height':33,'tilt':'" + tilt + "','iwidth':" + width + ",'iheight':" + height + "}" );

ApplyImageEffect( imgs[ i ] );

}

ONLOAD_FUNCTIONS[ ONLOAD_FUNCTIONS.length ] = 'ApplyGalleryImagesEffect();';

</script>

3. The reflection effect achieved will appear like this:

4. Customize the effect:

To switch the tilt of all images to either left or right only, replace this line from the code above:

var tilt = rnd % 2 == 0 ? "left" : "right";

with either ["left":"left"] or ["right":"right"].

To remove the tilt effect and leave just the reflection delete these lines:

var width = imgs[ i ].getAttribute( 'width' );

var height = imgs[ i ].getAttribute( 'height' );
and remove ['tilt':'" + tilt + "',] from setAttribute property.

Instant Photo Effect

An image with such an effect applied resembles an instant photo.

1. To add this effect to your gallery follow the same steps as above, but use this code instead:

function ApplyGalleryImagesEffect()

{

var imgs = document.getElementsByTagName( 'img' );

for ( var i = 0; i < imgs.length; i++ ) {

if ( imgs[ i ].name &&

imgs[ i ].name.indexOf( "image_" ) != -1 ) {

imgs[ i ].setAttribute( 'effect', 3 );

var width = imgs[ i ].getAttribute( 'width' );

var height = imgs[ i ].getAttribute( 'height' );

if ( width > 0 && height > 0 )

var rnd = Math.round( Math.random() * 2 );

var tilt = rnd % 2 == 0 ? "left" : "right";

{

imgs[i].setAttribute( 'options', "{'name':'instant','color':'#ffffff','noshade':'false','tilt':'"

+ tilt + "','height':33,'iwidth':" + width+ ",'iheight':" + height + "}" );

ApplyImageEffect( imgs[ i ] );

}

ONLOAD_FUNCTIONS[ ONLOAD_FUNCTIONS.length ] = 'ApplyGalleryImagesEffect();';

</script>

2. The result achieved will be like this:

3. Customize the appearance:

To make all images tilted to the left or to the right only replace this line from the code above:

var tilt = rnd % 2 == 0 ? "left" : "right";

with either ["left":"left"] or ["right":"right"].

To remove the tilt effect erase these lines:

var rnd = Math.round( Math.random() * 2 );
var tilt = rnd % 2 == 0 ? "left" : "right";

and remove ['tilt':'" + tilt + "',] from setAttribute property.