From september 2012 DigiStyle is no longer supported or updated.
You can use this plugin to add a special effect to your images (it could also be used on other elements like buttons e.g.) just by adding a class to the object!
We wanted to create some stunning effects to our website images but wanted this to do it "on-the-fly" in Joomla! The idea popped up to create a plugin which could do this with some fun features in it. Not only the sweet effect of Reflection is implemented but also a way to create shadows, round corners and even animated images!
- reflection.js for jQuery v1.03 by Christophe Beyls - http://www.digitalia.be
- Drop Shadow jQuery Plugin 1.6 by Larry Stevens
- Round Corners by Avinoam Henig - http://roundCorners.avinoam.info
- jQuery Puffy 1.0.1 by Naohiko MORI (slightly adjusted by UWiX)
- jQuery v1.3.2 by the jQuery Team - http://www.jquery.com
With some easy to use parameters you can adapt the effects to your own style and you don't have to use/remeber any editor tags. Just insert your image in your article and assign a class-effect to it.This way you can use the effects only for the images you want them to have effects!
And that's how simple it is! But a picture says more than words, so here we go...
The image at the left has the "reflex" class added to it. The default parameters are used which can be set through the plugin parameters in the backend.
The reflection height is set 0.5 and the reflection opacity is set to 0.2.
The image to the right has the Shadow effect added to it. The default parameters are used which can be set through the plugin parameters in the backend.
The Shadow left and top positions is set to 4, the Shadow Blur is set to 2, the Shadow Opacity is set to 0.5 and the Shadow Color is set to #FFFFFF (white).
The image to the left has the Puffy effect added to it. This effect can only be seen when you move your mouse-cursor over the image. If an image is set with a hyperlink (href) clicking on the image will go to the link specified. The default parameter is slightly adjusted and can be set through the plugin parameters in the backend.
The Puffy Duration (duration of the animation) is set to 1000 milliseconds which is equal to 1 second.
The Roundcorner plugin has several classes so you can vary the display style of the corners. The default parameters are changed slightly and can be set through the plugin parameters in the backend.
The Corner radius is set to 16, the Corner background color is set to #FFFFFF (white), the Corner padding is set to 4(px), the Corner border size is set to 4(px) and the Corner border color is set to #AAAAAA (light-grey).
Classes used in the samples below are (in the correct order): flatC, roundC, roundT, roundB, roundTL and roundTR.
So, go to the download section, download the DigiStyle Plugin, install it in Joomla!, publish the plugin and start adding classes to your images.