jQuery lightBox();
最近做图片显示时，发现了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"
??? ???????????????????????????????? styleurl="/images/icons/delete.png"/>
??? ??????????????? </a4j:commandLink>
??? ??????????????? <a url="/photo/thumbnail/#{photo.name.fullPath}"
??? ??? ???????????????????????????????? style/></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>
