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

jQZoom and Richfaces

aniljcb Mar 30, 2011 2:45 AM

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>

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

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

<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(".jqzoom").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

aniljcb Mar 30, 2011 3:55 AM (in response to aniljcb)

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(".jqzoom").jqzoom();}); })" />
Actions