-
1. rich:jquery not working with jquery extension cloud zoom
Hi Anil,
Can you please explain more how do you load image dynamically?
-
2. Re: rich:jquery not working with jquery extension cloud zoom
Sure Nick,
I have a richdatatable of image thumbnails on the nav bar. When user clicks on it I load an image dynamically to the content area. That is when i want the cloud zoom(or jqzoom) to fire and show the zoom window next to the image in the content area. I currently have it kinda working with jqzoom jquery extension, but its unreliable(and creates a lot of div's without cleaning up) because i am using the onRowMouseUp event to call the jquery function on mouseover(which is a very convoluted way!).
I tried calling the rich:jquery in the rerenderer of a4j:support, but that didnt work. that is when I used the onRowMouseUp event on the datatable.
I tied the the timing="onload" but the problem then is the jqzoom dont work only when I click the thumbnail and load the image in the content arean and then do a page refresh.
Any help is greatly appreciated. I am struggling with this issue since last one month.
Thanks
Anil
Below is the code...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:sandbox="http://richfaces.org/sandbox/jQueryPlugin"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8"/>
<title>
<ui:insert name="title"/>
</title>
<link rel="STYLESHEET" type="text/css" href="${facesContext.externalContext.requestContextPath}/css/common.css"/>
<link rel="stylesheet" href="${facesContext.externalContext.requestContextPath}/css/jqzoom.css"/>
<ui:include src="/templates/include/dynamic-css.xhtml" />
</head><body>
<sandbox:jQueryPlugin src="/scripts/jquery.jqzoom1.0.1.js"></sandbox:jQueryPlugin>
<ui:include src="/templates/include/header.xhtml" />
<h:form id="jobDocSuggestionbox_form">
<script type="text/javascript">//<![CDATA[
jQuery(function() {
jQuery(".jqzoom").jqzoom();
});
function processObjectsChange(suggestionBox) {
var items = suggestionBox.getSelectedItems();
var jobNbr;
var lineNbr;
var srce;
if (items && items.length > 0) {
for ( var i = 0; i < items.length; i++) {
jobNbr = items[i].jobNumber;
lineNbr = items[i].lineNumber;
srce = items[i].srcLoc;
}
document.getElementById('state').innerHTML = "Job Number: "+jobNbr+"<br>Line Number: "+lineNbr+"<br>Source: "+srce;
}else{
document.getElementById('state').innerHTML = '';
}
}
//]]></script><table class="left_menu" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td>
<p>Please type in at least three numbers of the job number you are searching for.</p>
<h:panelGrid columns="2" columnClasses="sb_test_column1,sb_test_column2" width="100%">
<h:panelGroup>
<h:inputText value="#{jobDocSuggestionBox.selectedJobId}" id="text">
</h:inputText>
<rich:suggestionbox id="jobDocSuggestionBoxId" for="text"
usingSuggestObjects="true" onobjectchange="processObjectsChange(suggestion)" fetchValue="#{result.jobNumber}"
suggestionAction="#{jobDocSuggestionBox.autocomplete}" var="result" minChars="3" width="350">
<f:facet name="header">
<h:outputText value="Job Number" />
</f:facet>
<h:column>
<h:outputText value="#{result.jobNumber}" />
</h:column>
<h:column>
<h:outputText value="#{result.lineNumber}" />
</h:column>
<h:column>
<h:outputText value="#{result.srcLoc}"/>
</h:column>
<a4j:support event="onselect" actionListener="#{jobDocSuggestionBox.onSelectEntity}" reRender="imageList,aliasJQueryPanel">
<f:setPropertyActionListener value="#{result.lineNumber}" target="#{jobDocSuggestionBox.selectedLineNbr}" />
</a4j:support>
</rich:suggestionbox>
<div id="state"></div>
<style>
.row {height: 100px;}
.rich-sdt-column-cell-body {height: 100px; text-align: center;valign:center}
#preview{
position:absolute;
border:1px solid #ccc;
background:#888;
padding:5px;
display:none;
color:#fff;
}
.content_container {
left: 0;
position: absolute;
top: 95px;
}
.content_container_left_brick {
background-color: transparent;
width: 235px;
}
.rich-sdt-column-cell {
-moz-box-sizing: border-box;
-moz-user-focus: normal;
background-color: black;
border-bottom: 0 solid;
border-right: 0 solid;
}
</style>
<rich:scrollableDataTable rowKeyVar="rkv" height="700px"
width="200px" id="imageList" rows="400" rowClasses="row"
value="#{jobDocSuggestionBox.imgRecs}" var="thbnl" border="0"
selection="#{jobDocSuggestionBox.thbNlselection}" onRowMouseUp="selectRowT1(this)">
<rich:column id="thumbnail" width="180px">
<h:graphicImage class="preview" value="#{thbnl.imgLocThumbnail}" />
</rich:column>
<a4j:support event="onRowClick" actionListener="#{jobDocSuggestionBox.onSelectImage}" reRender="imgViewerAreaPanel,jqzoomJQuery">
<f:setPropertyActionListener value="#{thbnl.imgLocMedium}" target="#{jobDocSuggestionBox.selectedImage}" />
</a4j:support>
</rich:scrollableDataTable>
<a4j:outputPanel id="aliasJQueryPanel" ajaxRendered="true">
<rich:jQuery selector="#imageList tr img" query="mouseover(function(){var imgFileName=this.src;imgFileName = imgFileName.replace("MAOPThumbnail", "MAOPMedium");jQuery("body").append("<p id='preview'><img src='"+ imgFileName +"' alt='"+imgFileName+"' /></p>");jQuery("#preview").css("top",(5) + "px").css("left",(325) + "px").fadeIn("fast");})"/>
<rich:jQuery selector="#imageList tr img" query="mouseout(function(){jQuery("#preview").remove()})"/>
</a4j:outputPanel>
<rich:spacer height="30px" />
</h:panelGroup>
</h:panelGrid>
</td>
</tr>
</tbody>
</table><table cellpadding="0" cellspacing="0" border="0" class="content_container" width="100%">
<tbody>
<tr>
<td>
<div class="content_container_left_brick"></div>
</td>
<td width="100%" class="content_container_pdddings">
<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="/MAOPDocViewer2#{jobDocSuggestionBox.selectedImageHighRes}" class="jqzoom" title="#{jobDocSuggestionBox.imgFileName}">
<h:graphicImage id="imgViewerArea" style="border: 1px solid #666;" value="#{jobDocSuggestionBox.selectedImage}" />
</h:outputLink>
</a4j:outputPanel>
<rich:jQuery name="selectRowT1" id="jqzoomJQuery" timing="onJScall" query="mouseover(function(){jQuery(function() {jQuery(".jqzoom").jqzoom();}); })" />
</div>
</fieldset>
<rich:spacer style="height:10px;" />
<rich:separator style="height:1px" />
</td>
</tr>
</tbody>
</table></h:form>
</body>
</html> -
3. Re: rich:jquery not working with jquery extension cloud zoom
Did you get a chance to look at it Nick?
Thanks
Anil
-
4. Re: rich:jquery not working with jquery extension cloud zoom
Anil,
I'm sorry but haven't got a chance to investigate in-depth yet.
-
5. Re: rich:jquery not working with jquery extension cloud zoom
Hi Nick,
When you get time can you take a look into this?
Thanks
Anil
-
6. Re: rich:jquery not working with jquery extension cloud zoom
Hi Nick,
Just wanted to ping to make sure this is on your list. any help is much appreciated.
Thanks
Anil
-
7. Re: rich:jquery not working with jquery extension cloud zoom
Anil,
I'm still loaded with other tasks - but your question is on my list
-
8. Re: rich:jquery not working with jquery extension cloud zoom
Hi Nick, sorry to keep bugging you, did you get a chance to look into this issue.
Thanks
Anil
-
9. Re: rich:jquery not working with jquery extension cloud zoom
Anil,
I'm sorry, but still couldn't get to it.
-
10. Re: rich:jquery not working with jquery extension cloud zoom
Ok, I've taken a look. Here is the sample of my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:sandbox="http://richfaces.org/sandbox/jQueryPlugin" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich"> <head> <meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" /> <title><ui:insert name="title" /></title> <a4j:loadStyle src="/css/jqzoom.css" /> <a4j:loadScript src="resource:///jquery.js" /> <a4j:loadScript src="/js/jquery.jqzoom-core.js" /> </head> <body> <h:form id="jobDocSuggestionbox_form"> <rich:dataTable value="#{capitalsBean.capitals}" var="capital" rowKeyVar="idx"> <rich:column> #{capital.name} </rich:column> <a4j:support event="onRowClick" reRender="imgViewerAreaPanel" oncomplete="jQuery('.jqzoom').jqzoom()"> <f:setPropertyActionListener value="#{capital}" target="#{selectedCapital}" /> <f:setPropertyActionListener value="#{idx}" target="#{selectedCapitalIndex}" /> </a4j:support> </rich:dataTable> <div class="sample-container"> <a4j:outputPanel id="imgViewerAreaPanel"> <h:outputLink id="imgViewerAreaHref" value="#{facesContext.externalContext.requestContextPath}/images/capitals/#{selectedCapitalIndex}.JPG" class="jqzoom"> <h:graphicImage id="imgViewerArea" style="border: 1px solid #666;" value="#{selectedCapital.stateFlag}" /> </h:outputLink> </a4j:outputPanel> </div> </h:form> </body> </html>Garbage images are left in body if there were errors loading images, so make sure you have valid paths - graphicImage does additional processing of paths, while h:outputLink dooes not!
-
11. Re: rich:jquery not working with jquery extension cloud zoom
Thank you very much Nick for your time and effort, that worked. I used to use ICEFaces, you have a convert now.
I think what i was missing was calling the jqzoom on the onComplete event.
Anil