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"
                                     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>