Question

我使用PrimeFaces和jquery.zoomy。我有缩小和galery的小和大图像有3个图像和2个按钮用于滚动。我使用 here 中的示例来更新bigImage和smallImage而不重新加载页面，但它不起作用。

     ...

    <h:outputScript>
    /* <![CDATA[ */
    $(document).ready(function() {
      init_jqzoom();
    });

    function changePicture(imgSrc) {
      clean_jqzoom();
      $("#bigImage").attr('href', "/wps/PA_Browsing_Coins"+imgSrc);
      $("#smallImage").attr('src', imgSrc);
      init_jqzoom();
    }

    function init_jqzoom() {
      $('.baseImage').jqzoom();
    }

    function clean_jqzoom() {
      $('.baseImage').removeData('jqzoom');
    }
    /* ]]> */
    </h:outputScript>
    <h:form styleClass="form" id="myForm">

         ...

                        <table>
                        <tr>
                            <td colspan="5"><a class="baseImage" id="bigImage"
                                href="/wps/PA_Browsing_Coins#{coinsList.baseImage}"> <primefaces:graphicImage
                                        id="smallImage" cache="false" value="#{coinsList.baseImage}"
                                        style="width: 100%;"></primefaces:graphicImage>
                            </a></td>
                        </tr>
                        <tr class="prod_carousel">
                            <td class="galleryButton"><primefaces:commandLink
                                    actionListener="#{coinsList.previousSmallMenu}" id="previous"
                                    update=":myForm:firstImageGallery, :myForm:secondImageGallery, :myForm:thirdImageGallery">
                                    <primefaces:graphicImage id="previousImage"
                                        value="/resources/img/previous.png" style="width: 100%;"></primefaces:graphicImage>
                                </primefaces:commandLink></td>
                            <td class="galleryImage"><primefaces:commandLink
                                    id="firstImageLink"
                                    onclick="changePicture(#{coinsList.firstImageGallery})"
                                    update="myForm:smallImage, myForm:bigImage">
                                    <primefaces:graphicImage id="firstImageGallery"
                                        value="#{coinsList.firstImageGallery}" style="width: 100%;"></primefaces:graphicImage>
                                </primefaces:commandLink></td>
                            <td class="galleryImage"><primefaces:commandLink
                                    id="secondImageLink"
                                    onclick="changePicture(#{coinsList.secondImageGallery})"
                                    update="myForm:smallImage, myForm:bigImage">
                                    <primefaces:graphicImage id="secondImageGallery"
                                        value="#{coinsList.secondImageGallery}" style="width: 100%;"></primefaces:graphicImage>
                                </primefaces:commandLink></td>
                            <td class="galleryImage"><primefaces:commandLink
                                    id="thirdImageLink"
                                    onclick="changePicture(#{coinsList.thirdImageGallery})"
                                    update="myForm:smallImage, myForm:bigImage">
                                    <primefaces:graphicImage id="thirdImageGallery"
                                        value="#{coinsList.thirdImageGallery}" style="width: 100%;"></primefaces:graphicImage>
                                </primefaces:commandLink></td>
                            <td class="galleryButton"><primefaces:commandLink
                                    actionListener="#{coinsList.nextSmallMenu}" id="next"
                                    update=":myForm:firstImageGallery, :myForm:secondImageGallery, :myForm:thirdImageGallery">
                                    <primefaces:graphicImage id="nextImage"
                                        value="/resources/img/next.png" style="width: 100%;">
                                    </primefaces:graphicImage>
                                </primefaces:commandLink></td>
                        </tr>
                    </table>
    ...

    </h:form>

    ...

Answer 1

我理解问题的原因 - 在标签中使用primefaces：graphicImage。在此图像的final-html id中，＆＃34; smallImage＆＃34;，它的格式为＆＃34; viewns_Z7_3H1EH301KGU970ASND0UQ50GM4_：myForm：smallImage＆＃34; （：myForm：smallImage - 静态部分，其余的可以变化）。 Javascript $（＆＃34; #smallImage＆＃34;）。attr（＆＃39; src＆＃39;，imgSrc）; 无法正常工作。解决方案 - 使用带有静态id（smallImage）的img标记。

xhtml中的工作代码：

      ...

<h:outputScript>
/* <![CDATA[ */
    $(document).ready(function() {
      init_jqzoom();
    });

    function init_jqzoom() {
      $('.baseImage').jqzoom();
    }

    function clean_jqzoom() {
      $('.baseImage').removeData('jqzoom');
    }

    function reloadBaseImage(img) {
    $("#bigImage").fadeOut("slow", function () {
      clean_jqzoom();
      $("#bigImage").attr('href', '/wps/PA_Browsing_Coins'+img);
      $("#smallImage").attr('src', '/wps/PA_Browsing_Coins'+img);
    });
    init_jqzoom();
    $("#bigImage").fadeIn("slow");
    }
/* ]]> */
</h:outputScript>
<h:form styleClass="form" id="myForm">

            ...

                    <table>
                        <tr>
                            <td colspan="5"><a class="baseImage" id="bigImage"
                                href="/wps/PA_Browsing_Coins#{coinsList.baseImage}"> <img
                                    id="smallImage"
                                    src="/wps/PA_Browsing_Coins#{coinsList.baseImage}"
                                    style="width: 100%;"></img>
                            </a></td>
                        </tr>
                        <tr class="prod_carousel">
                            <td class="galleryButton"><primefaces:commandLink
                                actionListener="#{coinsList.previousSmallMenu}" id="previous"
                                update=":myForm:firstImageGallery, :myForm:secondImageGallery, :myForm:thirdImageGallery, :myForm:firstImageLink, :myForm:secondImageLink, :myForm:thirdImageLink">
                                    <primefaces:graphicImage id="previousImage"
                                        value="/resources/img/previous.png" style="width: 100%;"></primefaces:graphicImage>
                                </primefaces:commandLink></td>
                            <td class="galleryImage"><primefaces:commandLink
                                    id="firstImageLink"
                                    onclick="reloadBaseImage('#{coinsList.firstImageGallery}')">
                                    <primefaces:graphicImage id="firstImageGallery"
                                        value="#{coinsList.firstImageGallery}" style="width: 100%;"></primefaces:graphicImage>
                                </primefaces:commandLink></td>
                            <td class="galleryImage"><primefaces:commandLink
                                    id="secondImageLink"
                                    onclick="reloadBaseImage('#{coinsList.secondImageGallery}')">
                                    <primefaces:graphicImage id="secondImageGallery"
                                        value="#{coinsList.secondImageGallery}" style="width: 100%;"></primefaces:graphicImage>
                                </primefaces:commandLink></td>
                            <td class="galleryImage"><primefaces:commandLink
                                id="thirdImageLink"
                                    onclick="reloadBaseImage('#{coinsList.thirdImageGallery}')">
                                    <primefaces:graphicImage id="thirdImageGallery"
                                        value="#{coinsList.thirdImageGallery}" style="width: 100%;"></primefaces:graphicImage>
                                </primefaces:commandLink></td>
                            <td class="galleryButton"><primefaces:commandLink
                                    actionListener="#{coinsList.nextSmallMenu}" id="next"
                                    update=":myForm:firstImageGallery, :myForm:secondImageGallery, :myForm:thirdImageGallery, :myForm:firstImageLink, :myForm:secondImageLink, :myForm:thirdImageLink">
                                    <primefaces:graphicImage id="nextImage"
                                        value="/resources/img/next.png" style="width: 100%;">
                                    </primefaces:graphicImage>
                                </primefaces:commandLink></td>
                        </tr>
                    </table>
        ...

P.S。感谢tt_emrah带标签的提示（它帮助了我）。

PrimeFaces。如何更新jqzoomy的图片？

1 个答案: