Javascript 素面。如何为jqzoomy更新图像？

我正在使用PrimeFaces和jquery.zoomy。我有放大放大和放大的图片，其中3张图片和2张图片用于抓取。我使用中的示例来更新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>

    ...

。。。
/*  */
...
...
...

我理解问题的原因-在标记中使用primefaces:graphicImage。在该图像的最终html id（不是“smallImage”）中，其格式为“viewns_Z7_3H1EH301KGU970ASND0UQ50GM4:：myForm:smallImage”（：myForm:smallImage-静态部分， 其余部分可能有所不同）。Javascript$（“#smallImage”）.attr（'src'，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>
        ...

。。。
/*  */
...
...

---

另外，感谢您提供的标签提示（它帮助了我）。

您应该使用嵌套在中的f:ajax的h:commandLink，或者直接使用p:commandLink。谢谢（我使用primefaces:commandLink代替了h:commandLink），但是bigImage不会更新，只会重新加载页面。你能用Ajax更新吗？你能更新问题中的代码吗？我更新了代码。抱歉花了这么长时间。（小图像更新，大-非。）