最近做图片显示时,发现了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>