enregistrement des images de composant galleria de primefaces avec javascript

J'utilise JSF 2.2 primefaces 6.0 et i ont déjà mis en place une solution pour afficher des images avec galleria primefaces i est question composant.Procédé maintenant je triying trouver une solution pour télécharger les images de galleria à travers un bouton utilisant javascript. (remarque je suis un programmeur débutant et je n'ai jamais utilisé js)enregistrement des images de composant galleria de primefaces avec javascript

Un des membres de stackoverflow me donne un code mais ça ne marche pas ou je n'ai pas pu l'implémenter.

Voici le code xhtml:

<p:galleria value="#{demandeBean.demandeSelectionnee.images}" 
         panelWidth="500" panelHeight="313" showCaption="false" 
         autoPlay="false" var="image"> 
         <p:graphicImage 
          value="http://localhost:18080/openCars/images/#{image}" 
          width="500" height="313" /> 
        </p:galleria>

Voici la solution proposée avec js:

<script type="text/javascript"> 
function download() { 
    $('.ui-galleria-panel img').each(function() { 
    $(this).after("<a href='"+ $(this).attr('src') +"' download='nameOfImage.jpg' class='ui-button' style='position: absolute;right: 0;top: 0; padding: 5px 10px;background:rgba(255,255,255,0.7);'><i class='fa fa-download'></i></a>") 
}); 
</script>

Source

2017-06-28 user8225636

_ "mais ça ne marche pas ou je n'ai pas réussi à l'implémenter." _ C'est comme un utilisateur final décrivant le problème. Approchez-le comme un développeur. Que se passe-t-il, voyez-vous les boutons apparaître? Est-ce que la fonction est appelée? S'il vous plaît affiner le problème. Way maintenant large/pas clair sans nous demander toutes sortes de clarifications – Kukeltje

Enfermez votre p:graphicImage dans un p:commandLink

<p:galleria value="#{demandeBean.demandeSelectionnee.images}" panelWidth="500" panelHeight="313" showCaption="false" 
         autoPlay="false" var="image"> 
    <p:commandLink action="#{demandeBean.download(image.id)}"> 
     <p:graphicImage value="http://localhost:18080/openCars/images/#{image}" width="500" height="313" /> 
    </p:commandLink> 
</p:galleria>

Source

2017-06-29 06:59:56 Fritz

Ensuite, vous obtenez un deuxième appel au serveur (et qu'est-ce que le téléchargement (...) faire concrètement?) Le code javascript dans la question serait le récupérer de la cache (si implémenté correctement) – Kukeltje

effectivement un des membres de stackoverflow a proposé ma solution et il fonctionne très bien sur mon application.J'ai juste des connaissances sur les composants JSF et java.Je n'ai aucune idée sur JS – user8225636

(ici la solution de travail): À chaque composant Galleria, il y a un bouton de téléchargement attaché dans l'ordre télécharger chaque image affichée.

Cette solution est très facile à mettre en œuvre il suffit d'ajouter le code JavaScript et une commande sur le composant galleria comme suit:

Voici le code xhtml du galleria:

<p:dialog header="Documents numérisés" widgetVar="diag" modal="true" 
       dynamic="true" showEffect="fade" hideEffect="fade" resizable="true" 
       position="center" id="diagImages" onShow="download()"> 
       <p:outputPanel id="gal" style="text-align:center;"> 
        <p:galleria value="#{demandeBean.demandeSelectionnee.images}" 
         panelWidth="500" panelHeight="313" showCaption="false" 
         autoPlay="false" var="image"> 
         <p:graphicImage 
          value="http://localhost:18080/openCars/images/#{image}" 
          width="500" height="313" /> 
        </p:galleria> 
       </p:outputPanel> 
      </p:dialog>

Voici le code js:

<script type="text/javascript"> 
     //<![CDATA[ 
     function download() { 
      $('.ui-galleria-panel img').each(function() { 
        $(this).after("<a href='"+ $(this).attr('src') +"' download='Documents numérisés.jpg' class='ui-button' style='position: absolute;right: 0;top: 0; padding: 5px 10px;background:rgba(255,255,255,0.7);'><i class='fa fa-download'></i></a>") 
       }); 
     } 
     //]]> 
    </script>

Voici le résultat supposé en images: [ Galleria with download button ]

Source

2017-06-29 08:55:51 user8225636

enregistrement des images de composant galleria de primefaces avec javascript

Répondre

Questions connexes