PVII Image FX User Guide

Image FX gives you the ability to animate any image on your page. Of course, since this is a PVII extension, you can orchestrate your animations from within a graphical user interface that installs and runs inside Dreamweaver.

Accessing Image FX

Before attempting to open the IFX UI, make sure you have an image selected. IFX can only be assigned to images.

Opening the UI

Select an image on your page and choose one of the 4 methods listed below to open the IFX interface:

1. Insert Bar

Switch to the PVII category. Image FX is the last one in the screen capture below

2. Insert Panel

Switch to the PVII category. Image FX is the last one in the screen capture below

3. Right Click

Right click on your image and choose Image FX by PVII

4. Insert Menu

Choose Insert > Studio VII > Image FX by PVII

The main IFX UI will open.

CSS and Design Tips

The following tips will server to help you get the most out of PVII Image FX.

Image FX and other CSS Animations

CSS cascades and inherits. It's the nature of the specification. So, if you have an existing CSS animation assigned to an image, you should remove that animation before assigning an IFX effect, since the second animation will either override the original animation or, depending on the settings, cancel both. If you have used Lage Effect Magic to animate an image, you can switch the LEM effect to an element that contains your image, such as a paragraph or DIV that your image is inside of. Then you can assign an IFX effect to the image, and it will work perfectly.

Containing an animation effect

Some animation effects can be configured to in such a way that they will move or expand behind the boundaries of their containing element. For example, consider an image inside a narrow sidebar on the right side of your page. If that image is set to zoom, it can become wider than the sidebar, thereby expanding beyond the sidebar's boundaries. The zooming effect can also cause a horizontal scrollbar to appear while the animation is running. The first example below, shows an image inside a bordered box. The image is set to zoom. Watch how the image expands outside the box:

We have included a CSS rule in the IFX style sheet that you can use to assign overflow: hidden to a containing element that surrounds your image. In this case, the image is inside a paragraph:

<p><img src="../demo/thumbs/pic-07.jpg" alt="" width="187" height="200" class="p7IFX scalable-rounded" data-ifx="8,1,1.5,4,0.5,0,1,1"></p>

By assigning the ifx-overflow class to the paragraph, we can constrain the effect inside the paragraph boundaries:

<p class="ifx-overflow"><img src="../demo/thumbs/pic-07.jpg" alt="" width="187" height="200" class="p7IFX scalable-rounded" data-ifx="8,1,1.5,4,0.5,0,1,1"></p>

Now the image will never jump outside the box!

Transform Origin

Let's say you have an image on your page and you want it to start out smaller than normal. When the image is hovered over, or tapped, the image will then grow to full size. The problem is that the default (and usually best) position of a CSS transformed element is dead center, relative to its original dimensions. Consider this image, that is set to a zoom start value of .75:

The large amount of space above and below the image is due to the default transform-origin. Now consider the following image, which runs the same IFX effect. The difference is that we've assigned a custom class that rests transform-origin to zero:

.origin-zero {transform-origin: 0px 0px;}

<img src="../demo/pics-01/s-13.jpg" alt="" width="600" height="600" class="p7IFX scalable-rounded origin-zero" data-ifx="8,.5,1,4,0.75,0,1,1">

The space at the top is gone. Though there is nothing that can remove the space below, unless. we use a containing element. So let's do the same image, this time placing it inside a DIV that is assigned a background color.

We removed the transform-origin fix, making the image center in vertically and horizontally in its container. But because the container is defined by a background color, the space around it looks more like matting. Not bad at all.