Joomla compatibility : Joomla 5 Joomla 4 Joomla 3

image effect joomla responsive caption

Image Effect CK ajoute des effets surprenants à vos images. Vous pouvez choisir parmis plus de 20 effets d'animation. Vous pouvez ainsi animer la légende qui est générée automatiquement à partir de la balise title de l'image.

 



Fonctionnalités

Pour chaque image de votre site Joomla! vous pouvez choisir d'ajouter un effet en ajoutant simplement une classe css sur l'image. Vous pouvez avoir plusieurs effets sur différentes images dans la même page..

  • S'applique à n'importe quelle image du site
  • Vous pouvez avoir plusieurs effets avec plusieurs images
  • Comportement responsive
  • Animation d'une légende automatiquement créée à partir de la balise title de l'image
  • Aucune connaissance en HTML requise, il suffit d'ajouter une classe CSS sur l'image
  • Possibilité d'ajouter un lien sur les images
  • Créez vos propres effets grâce à une interface de création de styles

En utilisant Image Effect CK vous n'avez pas besoin d'ajouter du code HTML dans vos pages, il suffit d'ajouter une classe CSS sur votre image, c'est tout !

Télécharger Image Effect CK

 

image effects simple usage

Facile à utiliser

Pas besoin de savoir coder pour créer un effet, il suffit d'ajouter la classe CSS à votre image. Vous pouvez utiliser votre éditeur pour ajouter la  classe CSS sur n'importe quelle image.

Vous pouvez utiliser n'importe quel effect sans restriction. Vous pouvez l'utiliser dans vos articles mais aussi dans n'importe quelle autre partie de votre site (module, extension tierce ...).

 

Comment l'utiliser (version Light)

La seule chose que vous avez à faire c'est d'ajouter la classe CSS à l'image. Utilisez votre éditeur habituel pour ajouter la classe, ou éditez le code source pour avoir un code comme celui-ci après :

<img src="/images/yourimage.jpg" class="effectck-lily" />

Référez-vous à la démo ci-après pour obtenir la liste des classes disponibles.

You can also choose to animate the caption, or not. The caption is automatically created from the title tag of the image, and you must add the 'captionck' class to your image to tell the plugin that you want it to be animated. Example of image source code :

<img src="/images/yourimage.jpg" class="puffck captionck" title="My title::A little description" />

 

Pour définir un titre et une description il faut les écrire dans l'atribut "title" de l'image et les séparer par "::".

 

Bouton éditeur

Ajouter un effet à vos images n'a jamais été aussi simple ! Utilisez Image Effect CK grâce au bouton dans l'éditeur pour ouvrir la fenêtre d'édition avec la liste des effets disponibles. Sélectionnez votre effet c'est tout.

image effects editor button

 

Comment l'utiliser (version Pro)

Vous pouvez télécharger Image Effect CK Pro pour vous aider dans la gestion des effets de vos images. Il permet d'ajouter des fonctionnalités telles que :

  • Ajout d'un bouton dans l'éditeur qui ouvre une fenêtre de gestion depuis l'éditeur
  • Récupère l'image sélectionnée et lui applique l'effet immédiatement pour un rendu réel
  • Permet d'ajouter un titre à l'image avec l'effet
  • Permet d'ajouter une description à l'image avec l'effet
  • Prévisualisation directe du rendu dans l'interface

Bouton éditeur

imageeffectbutton editor

Fenêtre d'édition

screenshot popup edition

 

 

 

74 effets préinstallés

Vous pouvez utiliser n'importe lequel des 74 effets disponibles dans Image Effect CK en ajoutant simplement la classe CSS à votre image. Cela fonctionne immédiatement, et sans effort. Vous pouvez aussi utiliser l'interface avancée pour créer votre propre effet, ou combiner vos propres styles avec un effet existant. Utilisez les pour ajouter des effets bluffants à vos images.

Voir les effets

multiple image effects available

 

fusion page builder and image effect

Integré avec Page Builder CK

Vous pouvez utiliser Page Builder CK et Image Effect CK ensemble pour créer des effets epoustouflants sur vos images !

Image Effect CK est directement intégré dans les options des images de l'interface de  Page Builder CK.

En savoir plus

 

HTML personnalisé

Vous pouvez créer votre propre code HTML pour afficher vos images avec l'effet désiré, vous n'êtes pas limité à l'utilisation d'une classe CSS. Si vous utilisez la solution avec un code HTML, vous pouvez adapter ce code à vos besoins en y ajoutant des balises, comme des icônes de réseaux sociaux ou autre.

En savoir plus

image effects custom html

 

image effects override

Personnalisez les effets

Créez vos propres effets ! Vous pouvez editer les effets disponible en utilisant la technique de surcharge dans votre template, mais vous pouvez aussi ajouter vos propres effets à la liste. De cette manière vous avez des classes CSS personnelles à utiliser, et vous pouvez même limiter la liste des effets à ceux que vous avez créés.

En savoir plus

 

Créez des cercles

Transformer n'importe quelle image en cercle parfait n'a jamais été aussi simple. Ajoutez la classe CSS effectck-circle pour un cercle simple ou effectck-circle-b pour un cercle avec une bordure, et c'est tout !

Si vous désirez un effet animé en cercle, choisissez simplement parmis l'un des 39 effets listés dans la démo ci-dessous.

 

image effects override

 

Créez de supers effets pour vos images sur joomla! - Video

image effects video

Chronologie de la vidéo :

00:08 = Utilisation basique. Ajoutez une classe CSS à vos images
01:18 = Bouton éditeur. Utilisez le bouton intégré à l'éditeur pour ajouter les effets facilement et rapidement
02:08 = Galerie d'images avec Mediabox CK. Utilisez Mediabox CK avec Image Effect CK pour créer une galerie d'images en quelques clics avec l'effet que vous voulez
04:17 = Intégration avec Page Builder CK. Créez votre contenu avec Page Builder CK et ajouter vos images sans effort
06:45 = Utilisation avancée avec code HTML. Si vous êtes designer, créez votre propre code pour les images
08:52 = Créez vos propres effets. Utilisez l'interface pour créer vos effets avec une prévisualisation directe, sans limite

 

Démo

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
joomla responsive image effect
effectck-flip-left
joomla responsive image effect
effectck-flip-right
joomla responsive image effect
effectck-flip-top
joomla responsive image effect
effectck-flip-bottom
joomla responsive image effect
effectck-rollup-top
joomla responsive image effect
effectck-rollup-bottom
joomla responsive image effect
effectck-under
 

Démo en cercle

joomla responsive image effect
effectck-circle
joomla responsive image effect
effectck-circle-b
joomla responsive image effect
effectck-circle-2
joomla responsive image effect
effectck-circle-3
joomla responsive image effect
effectck-circle-4
joomla responsive image effect
effectck-circle-5
joomla responsive image effect
effectck-circle-6
joomla responsive image effect
effectck-circle-7
joomla responsive image effect
effectck-circle-8
joomla responsive image effect
effectck-circle-9
joomla responsive image effect
effectck-circle-10
joomla responsive image effect
effectck-circle-11
joomla responsive image effect
effectck-circle-12
joomla responsive image effect
effectck-circle-13
joomla responsive image effect
effectck-circle-14
joomla responsive image effect
effectck-circle-15
joomla responsive image effect
effectck-circle-16
joomla responsive image effect
effectck-circle-17
joomla responsive image effect
effectck-circle-18
joomla responsive image effect
effectck-circle-19
joomla responsive image effect
effectck-circle-20
joomla responsive image effect
effectck-circle-21
joomla responsive image effect
effectck-circle-22
joomla responsive image effect
effectck-circle-23
joomla responsive image effect
effectck-circle-24
joomla responsive image effect
effectck-circle-25
joomla responsive image effect
effectck-circle-26
joomla responsive image effect
effectck-circle-27
joomla responsive image effect
effectck-circle-28
joomla responsive image effect
effectck-circle-29
joomla responsive image effect
effectck-circle-30
joomla responsive image effect
effectck-circle-31
joomla responsive image effect
effectck-circle-32
joomla responsive image effect
effectck-circle-33
joomla responsive image effect
effectck-circle-34
joomla responsive image effect
effectck-circle-35
joomla responsive image effect
effectck-circle-36
joomla responsive image effect
effectck-circle-37
joomla responsive image effect
effectck-circle-38
joomla responsive image effect
effectck-circle-39
 

 

Version Light

27 effets préinstallés

Integration avec Page Builder CK

Surcharge CSS

Compatible avec Mediabox CK

Bouton intégré dans l'éditeur

Liste personnalisée des effets

Interface de création graphique

Modèles de design

Forum de support

Valide pour plusieurs domaines

1 An de mises à jour

GRATUIT

Version Pro

27 effets préinstallés

Integration avec Page Builder CK

Surcharge CSS

Compatible avec Mediabox CK

Bouton intégré dans l'éditeur

Liste personnalisée des effets

Interface de création graphique

Modèles de design

Forum de support

Valide pour plusieurs domaines

1 An de mises à jour

19 €

 

Voter pour Image Effect CK sur la JED

Lire la documentation

 

Notes de version (cliquer pour afficher) :


VERSION 2.4.2 - 17/04/24
  • Fix issue with interaction between items on touch device
VERSION 2.4.1 - 05/04/24
  • Add behavior to close the effect when touching outside (for touch/mobile device)
VERSION 2.4.0 - 27/12/23
  • Add Joomla 5 native compatibility (without the compatibility plugin)
  • Add compatibility of the effects with the touch devices
VERSION 2.3.7 - 22/08/22
  • Remove the Google Fonts call to be GDPR compliant
VERSION 2.3.6 - 02/07/22
  • Add the Under effect in the list of effects from the styling interface
VERSION 2.3.5 - 22/06/22
  • Fix issue with title and desc styles when using a circle effect
  • Fix issue with title and desc positioning with circle effects
  • Fix issue with cursor when using a link
VERSION 2.3.4 - 25/02/22
  • Fix issue with text transform style, update the buton to be none instead of inherit
  • Fix issue with cursor type pointer when no link on the image
  • Add css max-width on circle
VERSION 2.3.3 - 04/10/21
  • Fix issue with unwanted CSS rules on icons
VERSION 2.3.2 - 06/05/21
  • [Pro] Fix issue with image selection in the styles interface
VERSION 2.3.1 - 27/04/21
  • Add 2 new effects effectck-rollup-top and effectck-rollup-bottom
  • Add 1 new effect (without animation) effectck-under to have a caption under the image
  • Add 41 circle effects : effectck-circle to create a circle (without animation), effectck-circle-b to create a circle with border (without animation), and 39 other circle effects with animation inspired by http://gudh.github.io/ihover/dist/
  • [Pro] Add publish/unpublish actions for the styles
  • Fix zindex issue with the puffck effect
VERSION 2.3.0 - 01/02/21
  • Add compatibility with Joomla 4
  • Add compatibility with PHP 8
VERSION 2.2.10 - 15/09/20
  • Add compatibility with Watchful update
VERSION 2.2.9 - 28/04/20
  • Fix image height issue when using Mediabox CK in gallery mode
VERSION 2.2.8 - 14/04/20
  • Improve the CSS to make the flip effects compatible with Mediabox CK and Page Builder CK
VERSION 2.2.7 - 08/04/20
  • Add effects : flip-left, flip-right, flip-top, flip-bottom
VERSION 2.2.6 - 10/02/20
  • Fix issue with SQL table not correctly created
VERSION 2.2.5 - 02/01/20
  • Fix issue with version numbering different from the plugin
VERSION 2.1.1 - 13/11/19
  • Fix issue with Mediabox CK on mobile device
  • Create Light/Pro versions and remove Params
VERSION 2.1.0 - 10/02/19
  • Add new feature to select an existing effect to use with the custom styles
  • Add message if system plugin is missing
VERSION 2.0.4 - 18/11/18
  • Improve the CSS to be more flexible and work with the gallery addon from Page Builder CK
VERSION 2.0.3 - 06/11/18
  • Fix issue with admin page of the component not loading
VERSION 2.0.2 - 01/03/18
  • Fix issue with rendering in the popup within the editor
  • Fix issue with options layout
VERSION 2.0.1 - 04/12/17
  • New options for image overlay color
  • New effect options for all elements
  • Improve the custom effect list loading to be compatible with Page Builder CK
  • Add wrapper to the image in the generated html code, to get better effects
VERSION 2.0.0 - 16/10/17
  • 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
  • New feature to limit the effect list to the custom list

Outil de création rapide, puissant et responsive.

En savoir plus

Extensions favorites

logo maximenuck 110 logo pagebuilderck 110 logo slideshowck 110template creator ck large 449

Sauvegarder
Choix utilisateur pour les Cookies
Nous utilisons des cookies afin de vous proposer les meilleurs services possibles. Si vous déclinez l'utilisation de ces cookies, le site web pourrait ne pas fonctionner correctement.
Tout accepter
Tout décliner
Analytics
Outils utilisés pour analyser les données de navigation et mesurer l'efficacité du site internet afin de comprendre son fonctionnement.
Google Analytics
Accepter
Décliner