Print
image effect joomla responsive caption

Image Effect CK adds some nice effects to your images. You can control which effect to show by adding a css class to any image of your website. The caption is automatically created from the title tag of the image.

 

 

 

Features

On any image into your website you can add the effect you want. You can choose to have different effects in the same page.

Using Image Effect CK you don't have to wrap your image with some HTML tag or add any additional code, just set the CSS class and the title on your image and that's all !

 

image effects simple usage

Simple to use

No coding required, no need to worry about the code, just add the CSS class on your image. You can use your editor to add the CSS class of the desired effect on any image.

You can use any effect on any image without restriction. You can use it in the articles but also in any content in your website.

 

How to use it (without the Params)

The only thing you have to do is to add the CSS class on your image. You can use your editor is it has the ability to set a class, or edit the source code to add the class manually to the image tag. The caption is automatically created from the title tag of the image. Example of image source code :

<img src="/images/yourimage.jpg" class="effectck-lily" title="My title::A little description" />

See the demo for the list of available classes and efects.

Note that you can set a title and desciption using the separator "::" into the title tag.

 

Editor button

Adding an effect to your images has never been so easy ! Use the Image Effect CK button in your editor to open the popup that shows you the list of effects. Click on the effect you want and that's it.

image effects editor button

 

How to use it (with Image Effect CK Params)

You can download the plugin Image Effect CK Params to help you to manage your effects. This will be an addon to the main Image Effect CK plugin with the following features :

 

Editor button

imageeffectbutton editor

Edition popup

screenshot popup edition

Download Image Effect CK Params

 

 

27 effects preinstalled

You can use any of the 27 effects available with Image Effect CK just by adding the CSS class on your image. This will apply instantly without effort. You can also use the interface of the component to create your own effect, or combine your custom styling to any existing effect. Use them to add an amazing effect to your images.

See the effects

multiple image effects available

 

fusion page builder and image effect

Integrated with Page Builder CK

You can use Page Builder CK and Image Effect CK together to add amazing effects to your images !

Image Effect CK is directly integrated into the images options in the Page Builder interface.

Read More

 

Custom HTML

You can create your own HTML code to render the image with the effect, you are not limited to an image with a CSS class. If you use the HTML solution, you can adapt the code to your needs and add what you want, like social icons in the caption for example.

Read More

image effects custom html

 

image effects override

Override the effects

Create your own effects ! You can edit the available effect using an override technique, but you can also create your own list of effects. This way you can have custom css classes to use on your images and you can also limit the effect list to your own values.

Read More

 

Create amazing image effects for joomla! - Video

image effects video

Video timeline :

00:08 = Basic usage. Add a CSS class on your image to make it works
01:18 = Editor button. Use the integrated editor button to add the effect on any image easily and quickly
02:08 = Image gallery with Mediabox CK. USe Mediabox CK with Image Effect to create your images gallery in few click using the effect that you want on the images
04:17 = Easy integration with Page Builder CK. Create your content with the page builder for Joomla and insert your images without effort
06:45 = Advanced usage with custom HTML. If you are a designer, just create your own HTML code and add what you want in the image
08:52 = Create your own effects. Use the interface to create your own effect with a direct preview, without limit

 

 

Demo

joomla responsive image effect
effectck-lily
joomla responsive image effect
effectck-oscar
joomla responsive image effect
effectck-sadie
joomla responsive image effect
effectck-honey
joomla responsive image effect
effectck-layla
joomla responsive image effect
effectck-zoe
joomla responsive image effect
effectck-marley
joomla responsive image effect
effectck-ruby
joomla responsive image effect
effectck-roxy
joomla responsive image effect
effectck-bubba
joomla responsive image effect
effectck-romeo
joomla responsive image effect
effectck-dexter
joomla responsive image effect
effectck-sarah
joomla responsive image effect
effectck-chico
joomla responsive image effect
effectck-milo
joomla responsive image effect
effectck-julia
joomla responsive image effect
effectck-goliath
joomla responsive image effect
effectck-selena
joomla responsive image effect
effectck-apollo
joomla responsive image effect
effectck-steve
joomla responsive image effect
effectck-moses
joomla responsive image effect
effectck-jazz
joomla responsive image effect
effectck-ming
joomla responsive image effect
effectck-duke
joomla responsive image effect
fadeck
joomla responsive image effect
edafck
joomla responsive image effect
puffck
 

 

Download Image Effect CK

Download Image Effect CK Params

 

Release notes (click to show) :


VERSION 2.2.4 - 18/11/18
  • Improve the CSS to be more flexible and work with the gallery addon from Page Builder CK
VERSION 2.2.3 - 24/12/17
  • Fix issue with html layout rendered by the script
VERSION 2.2.2 - 04/12/17
  • Fix issue with CSS loading
VERSION 2.2.1 - 19/11/17
  • Fix issue with CSS loading
VERSION 2.2.0 - 16/10/17
  • [Params] New version with a new styling interface
  • New Possibility to override the css file in the template
  • New feature to create custom styles with a JSON file and style them in the CSS file
  • [Params] New feature to limit the effect list to the custom list
VERSION 2.1.1 - 17/07/17
  • [Params] Add effects fadeck, edafck, and puffck in the list of the editor button and compatiblity with the css classes
VERSION 2.1.0 - 22/05/17
  • Add mobilde touch catching, 1st tap to show the effect, 2nd tap to redirect the link
  • Improve JS and dissociate from the jQuery instance
VERSION 2.0.8 - 25/04/17
  • Fix issue with frontend edition
VERSION 2.0.7 - 18/05/16
  • Add an helper to allow other extensions to get the Image Effect CK list (example of integration with Mediabox CK)
VERSION 2.0.6 - 22/03/16
  • Rename the PHP Class constructor to be compatible PHP7
VERSION 2.0.5 - 04/02/16
  • Fix issue with images dimensions
  • Add support for images border-radius styles
VERSION 2.0.4 - 30/08/15
  • Fix issue with images