Если интересует решение для jsf (richfaces) + jquery ui dialog (можно взять диалог и из RF):
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
<script type="text/javascript">
var imageDialog: function(elm) {
var $imgdlg = $j(#{rich:element("imgdlg")});
var imgSrc = elm.src;
var i = imgSrc.indexOf("maxDim");
if (i!=-1) imgSrc = imgSrc.substring(0,i-1);
$imgdlg.html('<img src="'+imgSrc+'" style="max-height:1024px;max-width:1280px;"/>');
$imgdlg.dialog({
autoOpen: false,
width: 'auto',
modal: true,
close: function() {$j(this).dialog('destroy');}
});
setTimeout(function(){$imgdlg.dialog('open')}, 300);
};
</script>
<t:div id="imgdlg" styleClass="ui-helper-hidden"/>
<!-- И где-то на форме уменьшенные изображения, на которые можно кликать -->
<t:dataList value="#{someBean.images}" var="image" >
<h:column>
<a4j:outputPanel styleClass="fpanel" layout="block">
<t:div styleClass="pheader">
<h:outputText value="#{image.fileName}"/>
</t:div>
<h:graphicImage value="/imgfile?id=#{image}&maxDim=160"
styleClass="fimage" onclick="imageDialog(this)" />
</a4j:outputPanel>
</h:column>
</t:dataList>
Для получения изображения используется один и тот же сервлет /imgfile, формат примерно такой:
1.
/imgfile?id=XXXXX&maxDim=YYY
с параметрами:
id - идентифификатор изображеня
maxDim - задает максимальное разрешение по ширине/высоте, если не указан, то изображение выводится как есть, если указан - пропорционально уменьшает.
Скрипт просто отрезает всё начиная со слова maxDim и помещает в элемент img внутри div-а, дальше этот div отображается как модальная панель. Таким образом в диалоге отображается оригинальное изображение
