javascriptprimefacesjsf-2.2galleria

Button to download images from galleria component of primefaces

i'm using jsf 2.2 primefaces 6.0 and i already implemented a solution to display a list of images through "galleria" component of primefaces. The issue is now i'm trying to find solution in order to "download" all the images or each image from the galleria component through a button linked to the interface.

Here the xhtml code of the application:

<p:dialog header="Documents numérisés" widgetVar="diag" modal="true"
            dynamic="true" showEffect="fade" hideEffect="fade" resizable="true"
            position="center" id="diagImages">
            <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>
Solution

  • If you are searching for a JS solution, this function can be useful:

    $('.ui-galleria-panel img').each(function() {
   $(this).wrap("<a href='" + $(this).attr('src') + "' download='nameOfImage.jpg'></a>")
});

    Basically this will wrap all the <img> with an <a> alongside the download HTML5 attribute. The download will take place on image click.

    If you need a button for each image, you can have a look at the following:

    $('.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>" )
});

    The result will be something like this.

    Galleria

    For the simplification of the example, I have included some embedded styles in the link, you may extract those into your css file and refer to it by adding the class alongside the ui-button one.

    You may execute that once, preferably on dialog update oncomplete, or on dialog show.