PrimeFaces ImageSwitch 组件停在最后一张图像上

Question

我有这个代码：

<p:imageSwitch effect="none" slideshowAuto="false" widgetVar="images">
    <ui:repeat var="image" value="#{indexController.cd.imagesView}">
        <o:graphicImage value="#{imagesController.get(indexController.name, image)}" />
    </ui:repeat>
</p:imageSwitch>

和这个用于加载图像的 bean

@GraphicImageBean
public class ImagesController implements Serializable {
    private static final long serialVersionUID = 6497820188225935778L;

    private static final String APP_PATH = System.getProperty("application.path");

    public byte[] get(String name, String file) {           
        String path = APP_PATH.concat(name).concat(File.separator).concat(file);

        try {
            return Files.readAllBytes(Paths.get(path));
        } catch (IOException e) {
            e.printStackTrace();
        }

        return null;
    }
}

我需要当它在最后一张图片中时，组件停止并且不再转到第一张图片。

有办法吗？

谢谢。

Answer 1

是的。因此，首先让我们向您展示如何停止幻灯片放映。转到此处的 PrimeFaces 展示：https://www.primefaces.org/showcase/ui/multimedia/switch.xhtml

在浏览器中打开 JavaScript 控制台并输入：

PF('widget_j_idt638').stopSlideshow();

注意到 "Zoom" 幻灯片已经停止了吗？所以 'widget_j_idt638' 是一个命名不当的 widgetvar，你称你的 widgetVar="images" 所以你可以做...

PF('images').stopSlideshow();

现在，通过阅读 ImageSwitch 使用的 Jquery Cycle plugin 的文档，可以找到一种自动停止方法。

autostop: 0, // true to end slideshow after X transitions (where X == slide count)

因此，要在页面上启用此功能，只需在页面加载后将此内联脚本添加到运行...

$(document).ready(function() {
   PF('images').jq.cycle({autostop:1});
});

这样就可以了。我刚刚在 PrimeFaces 展示柜中对其进行了测试。

PrimeFaces ImageSwitch 组件停在最后一张图像上

PrimeFaces ImageSwitch component stop on last image

jsf

primefaces