Liste de choix avec image

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • Liste de choix avec image

    Bonjour,
    Dans un fichier PHP, j'ai besoin de créer une liste de choix (à choix unique) mais que les item soient des images. (Comme dans la capture écran jointe)
    J'essaye avec un champ de type list mais je n'arrive pas au bon résultat. Je ne peux pas passer par un fichier XML, vu que je modifie un fichier existant.

    Cela se passe dans un fichier "Easysocial"

    Code PHP:
    <div class="mentions" >
                            <div data-mentions-overlay data-default="<?php echo $this->html('string.escape'$story->overlay); ?>"><?php echo $story->overlay?></div>
                            <textarea class="es-story-textfield" name="content" data-story-textField data-mentions-textarea
                            data-default="<?php echo $this->html('string.escape'$story->content); ?>"
                            data-initial="<?php echo ($story->overlay) ? JString::strlen($story->overlay): '0'?>"                                        
                            placeholder="<?php echo $nameUser; echo ", ";?><?php echo JText::_('COM_EASYSOCIAL_STORY_PLACEHOLDER'); ?>"><?php echo $story->content?></textarea>                    

                    <!-- Boutons pour les liens des styles -->                    
                            <img src="/images/styles/rouge.png"/>
                            <img src="/images/styles/bleu.png"/>
                            <img src="/images/styles/coeur.png"/>
                    <!-- ********************************************** -->
                    </div>
    L'idée est que les images contiennent un "value" que j'envoie ensuite dans une table de la base de données.

    Quelqu'un aurait-il une idée ?

    Cordialement.

    Eric



  • #2
    Bonsoir,
    Je tourne en rond depuis quelques jours pour mettre en oeuvre une idée:
    Je souhaite utiliser une image pour sélectionner une valeur qui sera ensuite envoyé dans une base de données.

    L'idée est de construire une liste de choix (qui sera horizontale) ou les items sont des images.
    Comme on trouve par exemple sur Facebook pour choisir un style au post.

    Je regarde du côté des différents types de champs utilisables, mais je ne trouve rien qui pourrait répondre à mon besoin.
    Quelqu'un aurait-il une idée ?

    Cordialement.

    Eric

    Commentaire


    • #3
      Bonsoir Eric,

      Pour moi, il n'y a pas de champs sélecteur d'images. Il faut le programmer de A à Z. Peut-être en partant d'un champ existant. Voir https://docs.joomla.org/Creating_a_c..._field_type/fr
      UP, le plugin universel à découvrir sur https//up.lomart.fr
      bgMax
      , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

      Commentaire


      • #4
        Bonsoir lomart,
        Comment vas-tu ?
        Merci beaucoup, je vais regarder cela.

        Au départ je pensais utiliser une liste et afficher une image à la place du libellé de l'item dans le style :

        Code HTML:
        <field name="style" type="list">
        <option value="blue"><img src="/images/styles/bleu.png"></option>
        <option value="red"><img src="/images/styles/red.png"></option>
        </field>
        Mais cela ne fonctionne pas.
        Ensuite, il faut que j'utilise ce bouton pour envoyer dans la colonne "style" de ma table. Ce bouton enregistre déjà les info dans la table.
        Code HTML:
        <button class="btn btn-es-primary btn-sm es-story-submit" data-story-submit type="button"><?php echo JText::_("COM_EASYSOCIAL_STORY_SHARE"); ?></button>
        Cela me permet de styliser le contenu d'un area. blue et red sont des classes css que j'appelle ensuite dans le formatage du texte quand j'affiche ce texte.

        Cordialement. Eric

        Commentaire


        • #5
          Bonjour,

          Essaie le champ "combo" https://docs.joomla.org/Combo_form_field_type/fr
          Il peut afficher une image dans la liste, et ne retourne que le texte
          Cliquez sur l'image pour l'afficher en taille normale  Nom : combo.png  Affichages : 1  Taille : 14,6 Ko  ID : 1972113
          On ne peut pas cliquer sur l'image mais uniquement le texte.
          Il doit être possible de créer son propre type de champ à partir de celui-ci
          UP, le plugin universel à découvrir sur https//up.lomart.fr
          bgMax
          , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

          Commentaire


          • #6
            Pourquoi tu n'associerais pas un event javascript, ajax quand tu cliques sur l'image?

            Voila une idee.

            ++
            Wis
            Agrepe aime ceci.

            Commentaire


            • #7
              Merci de ne pas ouvrir une nouvelle discussion sur le même sujet. C'est très pénible à lire et à suivre
              Bonjour, Dans un fichier PHP, j'ai besoin de créer une liste de choix (à choix unique) mais que les item soient des images. (Comme dans la capture écran jointe) J'essaye avec un champ de type list mais je n'arrive pas au bon résultat. Je ne peux pas passer par un fichier XML, vu que je modifie un fichier
              UP, le plugin universel à découvrir sur https//up.lomart.fr
              bgMax
              , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

              Commentaire


              • #8
                Bonjour,

                je viens de fusionner les messages.
                Pour apprendre à construire votre site web avec Joomla 3 : Joomla3! Le Livre Pour Tous : http://cinnk.com/joomla/3/le-livre-pour-tous

                Référencement Joomla! 10 astuces pour référencer son site web https://cinnk.com/articles/referencement-joomla-10-astuces-pour-referencer-son-site-web

                Créez votre boutique en ligne avec Joomla! & HikaShop http://cinnk.com/boutique/livres/cre...la-et-hikashop

                Commentaire


                • #9
                  Bonjour,
                  Voilà ce que j'ai fait et cela fonctionne si cela peut aider.
                  Effectivement j'ai trouvé une solution en JS comme l'a suggérer Wismer.

                  Code HTML:
                  <input type="hidden" id="js-image-link-value" value="" />
                          <img src="images/styles/bleu.png" class="js-image-link" data-value="blue" />
                          <img src="images/styles/rouge.png" class="js-image-link" data-value="red" />
                  
                          <script>
                            var imageLinkValue = document.getElementById('js-image-link-value');
                            var imageLinks = document.querySelectorAll('.js-image-link');
                  
                            function onImageLinkClick() {
                              imageLinkValue.value = this.getAttribute('data-value');
                            }
                  
                            Array.prototype.forEach.call(imageLinks, function (imageLink) {
                              imageLink.addEventListener('click', onImageLinkClick.bind(imageLink));
                            });
                          </script>
                  Et au cas ou un petit bout de CSS:

                  Code HTML:
                  .js-image-link {
                    position: relative;
                    z-index: 2;
                    cursor: pointer;
                  }
                  Cordialement.

                  Eric
                  Dernière édition par Agrepe à 22/12/2017, 11h33

                  Commentaire


                  • #10
                    Merci de passer la discussion en [RÉGLÉ]
                    Lorsque l'on se cogne la tête contre un pot et que cela sonne creux, ça n'est pas forcément le pot qui est vide.
                    Confucius

                    Commentaire

                    Annonce

                    Réduire
                    Aucune annonce pour le moment.

                    Partenaire de l'association

                    Réduire

                    Hébergeur Web PlanetHoster
                    Travaille ...
                    X