Speichern von Bildern aus Galleria Komponente von Primzahlen mit Javascript

Question

Ich benutze jsf 2.2 primefaces 6.0 und ich habe bereits eine Lösung zur Anzeige von Bildern mit Galleria primefaces Komponente implementiert.Das Problem jetzt ist ich triying, um eine Lösung zum Herunterladen der Bilder zu finden von Galleria durch einen Knopf mit Javascript. (Remarque ich bin ein Anfänger Programmierer und nie verwendet js)

Einer der stackoverflow Mitglieder geben mir einen Code, aber es funktioniert nicht, oder ich konnte es nicht implementieren.

Hier ist der XHTML-Code:

<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> 

Hier ist die vorgeschlagene Lösung mit 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> 

Answer 1

Schliessen Sie Ihren p:graphicImage in einem 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> 

Answer 2

(hier die Arbeitslösung): An jeder Galleria-Komponente ist eine Download-Schaltfläche in der Reihenfolge angehängt um jedes angezeigte Bild herunterzuladen.

Diese Lösung ist sehr einfach, den JavaScript-Code zu implementieren, fügen Sie einfach und einen Befehl auf der galleria Komponente wie folgt:

Hier xhtml Code des 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> 

Hier ist der JS-Code:

<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> 

Hier das vermeintliche Ergebnis in Bildern: []