如何使用 JSF 制作图像幻灯片？

发布于 2024-10-19 00:45:39 字数 973 浏览 3 评论 0原文

是否可以？如果答案是否定的，还有其他想法吗？

图片列表是动态的，这取决于您正在查看的用户。如何使用用户上传的图像制作幻灯片？

现在它是这样工作的：显示一张图片，您需要关闭它才能打开下一张图片。

<rich:dataGrid  id="albumGrid" value="#{someBean.pictures}" var="item" columns="4" elements="4" width="450px" rendered="#{not empty someBean.pictures}" style="margin-left:20px;">

                <a4j:commandLink id="fullLinkProfile">
                    <a4j:actionparam name="pic" value="#{item.path}" assignTo="#{picsBean.path}" />
                    <h:graphicImage value="/home/pictures/user/#{item.path}" rendered="#{item.path != null}"/>
                </a4j:commandLink>
                <f:facet name="footer">
                    <rich:datascroller for="albumGrid" boundaryControls="hide" stepControls="show"  fastControls="hide" >                       
                    </rich:datascroller>
                </f:facet>              

</rich:dataGrid>

原文

Is it possible? If the answer is no, any other ideas?

The list of pictures is dynamic, it depends on what user you're viewing.
How can I make a slideshow with the images that user uploaded?

Now it's working this way:
A single picture is displayed and you need to close it to open the next one.

<rich:dataGrid  id="albumGrid" value="#{someBean.pictures}" var="item" columns="4" elements="4" width="450px" rendered="#{not empty someBean.pictures}" style="margin-left:20px;">

                <a4j:commandLink id="fullLinkProfile">
                    <a4j:actionparam name="pic" value="#{item.path}" assignTo="#{picsBean.path}" />
                    <h:graphicImage value="/home/pictures/user/#{item.path}" rendered="#{item.path != null}"/>
                </a4j:commandLink>
                <f:facet name="footer">
                    <rich:datascroller for="albumGrid" boundaryControls="hide" stepControls="show"  fastControls="hide" >                       
                    </rich:datascroller>
                </f:facet>              

</rich:dataGrid>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

长途伴 2024-10-26 00:45:39

使用任何 JavaScript 幻灯片函数并将 bean 值参数传递给它，该参数具有逗号（，）分隔的图像路径值。

使用 jQuery 会给你最好的效果。

另请检查此。

使用以下函数创建传递 bean 值的 html 代码，然后与任何 jQuery 插件集成。

function loadImage(imgPaths)
{
    var images = imgPaths;
    var imgArr=images.split(",");
    var ulobj=document.getElementById("parentDiv");
    var i;
    var len =imagePath_array.length-1;
    for(i=0;i<len;i++)
    {
        var imgObj=document.createElement("img");
        var liObj=document.createElement("li");
        imgObj.src=imgArr[i];
        liObj.appendChild(imgObj);
        ulobj.appendChild(liObj);
    }
}

Use any javascript slideshow function and pass bean value argument to it which has comma(,) seperated values of image paths.

Using jQuery will give you best effects.

Also check this.

Use following function to create your html code passing bean value and then integrate with any of jQuery plugin.

function loadImage(imgPaths)
{
    var images = imgPaths;
    var imgArr=images.split(",");
    var ulobj=document.getElementById("parentDiv");
    var i;
    var len =imagePath_array.length-1;
    for(i=0;i<len;i++)
    {
        var imgObj=document.createElement("img");
        var liObj=document.createElement("li");
        imgObj.src=imgArr[i];
        liObj.appendChild(imgObj);
        ulobj.appendChild(liObj);
    }
}

回复收藏 0 原文

~没有更多了~