DocumentationofJMCSS3EffectsJoomlaPlugin:

TableofContent:
About
Compatibility
Howtouse
Support

About:
JMCSS3EffectsisaJoomlapluginthatletsyouuseadvancedCSS3animationsandeffects
withinyourJoomlawebsitewithouthavinganycomplexCSSorCodingknowledge.

Compatibility:
ThepluginiscompatiblewiththelatestJoomlaversion2.5and3.0.Unfortunately,becauseof
littleornouse,developmentforJoomla1.5hasbeendiscontinued.

Installation:
TheplugincanbeinstalledusingtheJoomlaExtensionsManager.
Followthestepsforinstallation:
Step#1:
Extractthedownloadedfile
YoumayhavedownloadedthefileJMCSS3_UNZIP_FIRST_x.zip.
(Followstandardjoomlainstallationproceduretoinstalltheplugin.)


Howtouse:
Thenewversionofthepluginincludesaneditorbuttonforyoutoeasilyinsertthecoderather
thanmanuallytypingitin.

(Fig.1ByclickingJMCSS3ButtonJMCSS3Effectwizardwillappear)


JMCSS3Effectswizardappearsasfollows:

1. Youcanentertheimagepathinthisinputbox.Thepathcaneitherberelative
(images/stories/yourimage.jpg)orexternalsource.
(eg:http://www.google.com/images/someimage.jpg)
2. YoucanalsogiveTitleandthiswillbethealternativetagoftheimageinHTML.
3. Youcanalsoinsertahyperlinkforyourimage.
4. Youcanapplyanimationeffectstotheimage.
o Thefollowinganimationeffectsareavailable:
Rotate:(compatiblewith:IE,MF,Chrome,Opera,Safari)
Rotate360:(compatiblewith:MF,Chrome,Opera,Safari)
Reflection:(compatiblewith:Chrome,Safari)
Glow:(compatiblewith:IE,MF,Chrome,Opera)
ScaleSmall:(compatiblewith:IE,MF,Chrome,Opera,Safari)

 ScaleLarge:(compatiblewith:IE,MF,Chrome,Opera,Safari)
TransitUp:(compatiblewith:IE,MF,Chrome,Opera,Safari
TransitDown:(compatiblewith:IE,MF,Chrome,Opera,Safari
Left:(compatiblewith:IE,MF,Chrome,Opera,Safari)
Right:(compatiblewith:IE,MF,Chrome,Opera,Safari)
Screwleft:(compatiblewith:IE,MF,Chrome,Opera,Safari)
Screwright:(compatiblewith:IE,MF,Chrome,Opera,Safari)
flipX:(compatiblewith:MF,Chrome,Opera,Safari)
flipY:(compatiblewith:MF,Chrome,Opera,Safari)
RotateandScaleSmall:(compatiblewith:MF,Chrome,Opera,Safari)
RotateandScaleLarge:(compatiblewith:MF,Chrome,Opera,Safari)
5. Youcanapplyfiltereffectstotheimage.
o Thefollowingfiltersareavailable:
Grayscale:(compatiblewith:IE,MF,Chrome)
Blur:(compatiblewith:IE,MF,Chrome)
(Note:AnimationsdonotworkwithBlureffect)
Sepia:(compatiblewith:MF,Chrome)
Invert:(compatiblewith:IE,MF,Chrome)
6. YoucanapplyBordereffectstotheimage.
o Thefollowingbordereffectsareavailable:
Border1:(compatiblewith:IE,MF,Chrome,Opera,Safari)
Border2:(compatiblewith:IE,MF,Chrome,Opera,Safari)
Border3:(compatiblewith:IE,MF,Chrome,Opera,Safari)
Border4:(compatiblewith:IE,MF,Chrome,Opera,Safari)
Border5:(compatiblewith:IE,MF,Chrome,Opera,Safari)
Border6:(compatiblewith:IE,MF,Chrome,Opera,Safari)
(Note:BorderscanbeusedwithallAnimations,Filters,Shapesandother
attributeslikeshadow,height,widthandopacityetc.)
7. YoucanapplyShapeeffectstotheimage:
o Thefollowingshapesareavailable:
Shape1:(compatiblewith:MF,Chrome,Safari)
Shape2:(compatiblewith:MF,Chrome,Safari)
Shape3:(compatiblewith:MF,Chrome,Safari)
Shape4:(compatiblewith:MF,Chrome,Safari)
Shape5:(compatiblewith:MF,Chrome,Safari)
Shape6:(compatiblewith:MF,Chrome,Safari)

(Note:ShapescanbeusedwithallAnimations,Filters,Bordersandother
attributeslikeashadow,height,widthandopacityetc.)

8. YoucanapplyShadoweffectstoyourimage:(compatiblewith:MF,Chrome,Opera,Safari)
(Note:ShadowcanbeusedwithallAnimations,Filters,Borders,Shapesandother
attributeslikeheight,widthandopacityetc.)

9. YoucanapplyTinteffectstoyourimage:
o ThefollowingTinteffectsareavailable:
Style1(RainbowTint):
Style2(RainbowTintReverse):
Style3(StripedRightDiagonalTint):
Style4(StripedHorizontalDiagonalTint):
Style5(StripedLeftDiagonalTint):
Style6(StripedVerticalDiagonalTint):
Style7(CheckedTint):
Style8(ParticlesAnimationTint):
Style9(Circles1AnimationTint):
Style10(Circles2AnimationTint):
Style11(Circles3AnimationTint):
Style12(FlashLightAnimationTint):

(Note:
TinteffectsarecompatiblewithChrome,MF,Opera,Safari.
Tintdoesnotsupporteffects,filters,shapesandopacityattributes.
Tintonlysupportsheight,width,borderandshadowattributes.)

10. YoucanapplyTintColortoyourimage:

11. Youcanselectifyouwouldliketoapplyamaskeffecttoyourimage:
o ThefollowingMaskeffectsareavailable:
Style1:
Style2:
Style3:
Style4:
Style5:
Style6:
(Note:
MaskeffectsarecompatiblewithChrome,MF,Safari.
Maskdoesnotsupporteffects,filters,shapes,opacity,border,shadow
attributes.
Maskonlysupportsheight,widthattributes.Ifheightorwidthisnot
specified,thenthedefaultwidthandheightis300pxX200px.)

12. Youcansetheightwidtheitherautomaticallyormanually:
o

YoucanselectheightandwidthmanuallybysettingAutoheightwidthOFFand
cansetthevalueofheightandwidthindividually(compatiblewith:IE,MF,Chrome,
Opera,Safari):

Fig.2:UsercansettheHeightandWidthmanually,bysettingAutoHeightwidth
OFF.

13. YoucansettheOpacity(transparency)oftheimage:

(Compatiblewith:IE,MF,Chrome,Opera,Safari)
(Note:OpacitycanbeusedwithallAnimations,Filters,Borders,Shapesandother
attributeslikeshadow,height,widthetc.)


14. Youcansetthealignmentoftheimage:
o Left:
o Center:
o Right:
15. Youcanpreviewtheappearanceoftheimageafterapplyingvariouseffectsonitand
canalsogeneratetherespectivestylingeffectcode.

Support:
GeneralSupportisofferedviathepublicforumandcanbeaccessedat
www.jmexperts.com/forums/PremiumSupportandModificationscanbedoneonrequeston
anhourlybasis,pleasecontactinfo@jmexperts.comformoreinfo.