从 primefaces 的 galleria 组件下载图像的按钮

Question

我正在使用 jsf 2.2 primefaces 6.0，并且我已经实现了一个通过 primefaces 的 "galleria" 组件显示图像列表的解决方案。现在的问题是，我正在尝试找到解决方案，以便通过链接到界面的按钮 "download" 画廊组件中的所有图像或每个图像。

这里是应用程序的 xhtml 代码：

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

Answer 1

如果您正在寻找 JS 解决方案，此功能可能会有用：

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

基本上这会将所有 <img> 和 download HTML5 attribute 一起包装成 <a>。下载将在点击图片时进行。

如果每张图片都需要一个按钮，可以看下面的：

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

结果会是这样的。

为了简化示例，我在 link 中包含了一些嵌入样式，您可以将它们提取到 css 文件中，并通过添加 class 来引用它在 ui 按钮旁边。

您可以执行一次，最好是在对话框更新完成时执行，或者在对话框显示时执行。

从 primefaces 的 galleria 组件下载图像的按钮

Button to download images from galleria component of primefaces

javascript

primefaces

jsf-2.2

galleria