1 Reply Latest reply on Mar 30, 2011 3:55 AM by Anil Jacob

    jQZoom and Richfaces

    Anil Jacob Newbie

      have anyone tried implementing the JQzoom with richfaces? I am running into issues when i tried implementing it. Any help is appreciated.

       

      here is my code, with the revelent parts highlighted.

       

       

      <sandbox:jQueryPlugin src="/scripts/jquery.jqzoom1.0.1.js"></sandbox:jQueryPlugin>

      ................

       

       

       

                                  <rich:scrollableDataTable rowKeyVar="rkv" height="400px"

                                      width="200px" id="imageList" rows="400" rowClasses="row"

                                      value="#{jobDocSuggestionBox.imgRecs}" var="thbnl"  border="0"

                                      selection="#{jobDocSuggestionBox.thbNlselection}">

       

                                      <rich:column id="thumbnail" width="180px">

                                              <h:graphicImage class="preview" value="#{thbnl.imgLocThumbnail}"  />                                                                                                                                      

                                      </rich:column>

                                      <a4j:support event="onRowClick" actionListener="#{jobDocSuggestionBox.onSelectImage}" reRender="imgViewerAreaPanel">

                                          <f:setPropertyActionListener value="#{thbnl.imgLocMedium}" target="#{jobDocSuggestionBox.selectedImage}" />

                                      </a4j:support>                               

      .....................

       

                  <fieldset class="demo_fieldset">

                      <legend class="demo_legend">Job Document Viewer</legend>

                      <div class="sample-container">

                          <a4j:outputPanel id="imgViewerAreaPanel">

                              <h:outputLink id="imgViewerAreaHref" value="/MPPDocViewer2#{jobDocSuggestionBox.selectedImage}" class="jqzoom" >

                                      <h:graphicImage id="imgViewerArea" style="border: 1px solid #666;" value="#{jobDocSuggestionBox.selectedImage}" />

                              </h:outputLink>

                              <rich:jQuery selector=".jqzoom" timing="immediate" query="jQuery(function() {jQuery(&quot;.jqzoom&quot;).jqzoom();})"/>                                           

                          </a4j:outputPanel>

                      </div>

                  </fieldset>

       

              <rich:spacer style="height:10px;" />

              <rich:separator style="height:1px" />   

              </td>

          </tr>

      </tbody>

      </table>

       

       

       

      here is what is rendered from firefox fire bug

       

      {code:xml}

      <div class="sample-container"><span id="jobDocSuggestionbox_form:imgViewerAreaPanel"><a id="jobDocSuggestionbox_form:imgViewerAreaHref" name="jobDocSuggestionbox_form:imgViewerAreaHref" href="/MPPDocViewer2/images/MAPP/MPPMedium/2011030617371701.tif" class="jqzoom"><img id="jobDocSuggestionbox_form:imgViewerArea" src="/MPPDocViewer2/images/MAPP/MAPPMedium/2011030617371701.tif" style="border: 1px solid #666;" /></a><script type="text/javascript">//<![CDATA[

      {

          var selector = ".jqzoom";

          try {

              selector = eval(".jqzoom");

          } catch (e) {}

          jQuery(selector).jQuery(function() {jQuery(".jqzoom").jqzoom();});

      }

      //]]></script></span>

                      </div>

      {code}

        • 1. jQZoom and Richfaces
          Anil Jacob Newbie

          figured it out

           

          added  onRowMouseUp="selectRowT1(this)" on the richdatatable

           

          and on the jquery that i need to trigger dynamically I used this

           

          <rich:jQuery name="selectRowT1" timing="onJScall" query="mouseover(function(){jQuery(function() {jQuery(&quot;.jqzoom&quot;).jqzoom();});    })" />