javascript - 从Primefaces的Galleria组件下载图像的按钮

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

这里是应用程序的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>

最佳答案

如果要搜索JS解决方案，此功能可能会很有用：

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

基本上，这会将所有<img>用<a>包裹在download HTML5 attribute旁边。
下载将通过点击图片进行。

如果每个图像都需要一个按钮，则可以查看以下内容：

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

结果将是这样的。



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

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

关于javascript - 从Primefaces的Galleria组件下载图像的按钮，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44800439/