jQZoom and Richfaces
aniljcb Mar 30, 2011 2:45 AMhave 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(".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}