Les astuces pour les extensions Joomla!

Ja Image Hotspot

Détails

En ce début d'année Joomlart publie trois extensions Joomla gratuites qui nous en sommes sûr vous seront très utiles pour vos sites Web. Elles sont toutes responsive, et fonctionnent aussi bien avec Joomla 2.5.x que Joomla 3.x

  • JA Image Hotspot, pour le balisage d'image,
  • JA Promo Bar, une barre de progression souple pour votre site
  • JA Google Chart,  graphiques pour la visualisation de vos données en utilisant l'API Google.

Au travers de nos trois tutoriels nous allons voir leurs paramétrages et utilisations. Nous commencerons cette première partie avec le module Ja Image Hotspot.

00d

1. JA Image Hotspot

Ja Image Hotspot est une module convivial qui permet d'ajouter un nombre illimité de marqueurs pour étiqueter l'image choisie, avec l'option pour ajouter la description dans une popup (avec des paramètres faciles à configurer). Il peut être utilisé par exemple par étiqueter une carte statique pour des pièces automobiles.

JA image Hotspot a fait sa première apparition dans le template JA  Beranis, depuis il a été mis à jour avec de nouvelles fonctionnalités et options du backend.

JA image Hotspot est désormais disponible en téléchargement gratuit mais voyons maintenant ce qui le rend si attrayant.

2. Configuration globale

Activer Module

  • Affecter le module à une position spécifique
  • Affecter le module à un élément de menu

001

Configuration globale

Paramètres du  Back-end

002

Apparence du Front-end

003

Changer l'image statique
Recherchez l'image pour remplacer l'actuelle. Les pointeurs supplémentaires ne seront pas supprimés.
004

3. Paramètres marqueurs

Ajouter un nouveau marqueur

Pour ajouter un nouveau marqueur, cliquez sur le bouton Ajouter ( Add Marker) puis ajouter les informations pour le marqueur.

005

Apparence du Front-end

006

4. Ajouter un nouveau type de marqueur

JA Image Hotspot supporte de nombreux types de marqueurs avec de différentes couleurs.

007

Pour ajouter un nouveau type de marqueur, suivez les instructions ci-dessous

Étape 1: Ajouter de nouvelles icônes

Copiez vos icônes dans modules/mod_jaimagehotspot/assets/images

008

Les icônes de différentes couleurs sont stockées dans le dossier modules/mod_jaimagehotspot/assets/images/colors

Étape 2: Définir le nom du type de marqueur

Ouvrir le fichier imgextrafields.xml dans modules/mod_jaimagehotspot/assets/elements/jaimgextrafields .

  1. <field

  2. name="ptype"

  3. type="list"

  4. label="JAI_POINT_TYPE"

  5. description="JAI_POINT_TYPE_DESC">

  6. <optionvalue="">Default</option>

  7. <optionvalue="cloud">Cloud</option>

  8. <optionvalue="star">Star</option>

  9. <optionvalue="study">Study</option>

  10. <optionvalue="truck">Truck</option>

  11. </field>

Étape 3: Ajouter le style pour le nouveau type de marqueur en back-end

Ouvrir le fichier imgextrafields.css dans modules/mod_jaimagehotspot/assets/elements/jaimgextrafields .

  1. #jform_params_imgpath_preview_img .ja-marker-cloud {

  2. background: url("/../../../assets/images/icon-marker-cloud.png");

  3. }

  4. #jform_params_imgpath_preview_img .ja-marker-study {

  5. background: url("/../../../assets/images/icon-marker-study.png");

  6. }

  7. #jform_params_imgpath_preview_img .ja-marker-star {

  8. background: url("/../../../assets/images/icon-marker-star.png");

  9. }

  10. #jform_params_imgpath_preview_img .ja-marker-truck {

  11. background: url("/../../../assets/images/icon-marker-truck.png");

  12. }

Étape 4: Ajouter le style pour le nouveau type de marqueur en front-page

Ouvrir le fichier style.css dans modules/mod_jaimagehotspot/assets/css .

  1. .jai-map-container .ja-marker-default{

  2. background: url("/../images/icon-marker-default.png");

  3. }

  4. .jai-map-container .ja-marker-cloud {

  5. background: url("/../images/icon-marker-cloud.png");

  6. }

  7. .jai-map-container .ja-marker-drop_study {

  8. background: url("/../images/icon-marker-study.png");

  9. }

  10. .jai-map-container .ja-marker-star {

  11. background: url("/../images/icon-marker-star.png");

  12. }

  13. .jai-map-container .ja-marker-truck {

  14. background: url("/../images/icon-marker-truck.png");

  15. }

 

Source: http://www.joomlart.com/documentation/joomla-module/ja-image-hotspot Télécharger le module

Télécharger le PDF

Télécharger le module FR

A propos de l'auteur
starter
Nom: starterSite Web: http://www.soulpin.com
100% autodidacte
Derniers articles de l'auteur

Vous avez trouvé une erreur ? Sélectionnez la et appuyez sur Ctrl + Entrée.