最近做图片显示时，发现了jQuery的lightBox()功能很强大，记录下来：
?
官方DEMO：
http://leandrovieira.com/projects/jquery/lightbox/
?
Sample:
?
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j" %>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich" %>
<link rel="stylesheet" type="text/css"
????? href="<h:outputText value="#{request.contextPath}"/>/css/jquery.lightbox.css"/>
<script type="text/javascript" charset="utf-8"
??????? src="<h:outputText value="#{request.contextPath}"/>/js/jquery.lightbox.min.js.jsp"></script>
<script type="text/javascript">
??? jQuery(function() {
??????? reload();
??? });
??? function reload() {
??????? jQuery('.lightboximg').lightBox();
??? }
</script>
<h:panelGrid columns="2">
??? <rich:dataGrid id="profilePhotoGrid"
?????????????????? value="#{artistManageBean.profilePhotos}"
?????????????????? var="photo" columns="4" elements="12">
??????? <f:facet name="header">
??????????? <rich:datascroller align="left" oncomplete="reload();" renderIfSinglePage="false"/>
??????? </f:facet>
??????? <h:panelGrid>
??????????? <f:verbatim>
??? ??????????? <h:panelGroup>
??? ??????????? ??? <a4j:commandLink id="remove" ajaxSingle="true"
??? ???????????????????????????????? reRender="artist:profilePhotoGrid"
??? ???????????????????????????????? action="#{artistManageBean.doRemoveProfilePhoto}"
??? ???????????????????????????????? title="Remove the photo"
??? ???????????????????????????????? styleClass="control-thumb-img"
??? ???????????????????????????????? oncomplete="fixBrokenImages();"
??? ???????????????????????????????? eventsQueue="remQueue">
??? ??????????????????? <h:graphicImage id="remimg" url="/images/icons/delete.png"/>
??? ??????????????? </a4j:commandLink>
??? ??????????????? <a class="lightboximg"
href="<h:outputText value="#{request.contextPath}/photo/large/#{photo.name.fullPath}"/>">
??? ??? ???????????????? <h:graphicImage id="img" url="/photo/thumbnail/#{photo.name.fullPath}"
??? ??? ???????????????????????????????? styleClass="thumbnailArtistImage"/>
??? ??? ??????????? </a>
??? ??????????? </h:panelGroup>
??????????? </f:verbatim>
??????? </h:panelGrid>
??? </rich:dataGrid>
??? <h:panelGroup>
??? ??? ?<h:graphicImage id="def"
??????????? url="/photo/normal/#{artistManageBean.defaultPhoto.name.fullPath}"
??????????? style="opacity:0.85; border: 1px solid rgb(237, 237, 237); padding: 1px;"/>
??? ??? <br/>
??? ???
??? ??? <div style="margin-bottom:5px;">
?????????? <strong><h:outputText value="Upload new Photo: " /></strong>
?????? </div>
?????? <div style="background-color: #ffffff; text-align: center; width: 280px;">
?????????? <rich:fileUpload fileUploadListener="#{artistManageBean.profilePhotoUploadListener}"
??????????????????????????? id="profilePhotoUpload" immediateUpload="true"
??????????????????????????? listWidth="280" listHeight="150" autoclear="true"
??????????????????????????? acceptedTypes="jpg, gif, png">
?????????????? <a4j:support event="onuploadcomplete" reRender="artist:profilePhotoGrid"
??????????????????????????? oncomplete="fixBrokenImages();"/>
?????????? </rich:fileUpload>
?????? </div>
?????? <div class="note"><b>Images types allowed: </b>JPG, GIF, PNG</div>
??? </h:panelGroup>
??
</h:panelGrid>