<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html" xmlns:lightbox="http://richfaces.org/sandbox/lightbox"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<head>
<title>Lightbox sample</title>
<style type="text/css">
#gallery ul {
list-style: none outside none;
}
#gallery ul li {
display: inline;
}
#gallery ul img {
border: 5px solid #3E3E3E;
border-bottom-width: 20px;
}
#gallery ul a:hover img {
border: 5px solid #000;
border-bottom-width: 20px;
color: #FFFFFF;
}
#gallery ul a:hover {
color: #FFFFFF;
}
</style>
</head>
<body>
<ui:include src="menu.xhtml"/>
<div id="gallery">
<ul>
<li>
<a href="photos/image1.jpg" title="Blue flower">
<h:graphicImage value="photos/thumb_image1.jpg"/>
</a>
</li>
<li>
<a href="photos/image2.jpg" title="Red leafs">
<h:graphicImage value="photos/thumb_image2.jpg"/>
</a>
</li>
<li>
<a href="photos/image3.jpg" title="Rain drops">
<h:graphicImage value="photos/thumb_image3.jpg"/>
</a>
</li>
<li>
<a href="photos/image4.jpg" title="Fresh green">
<h:graphicImage value="photos/thumb_image4.jpg"/>
</a>
</li>
<li>
<a href="photos/image5.jpg" title="More fresh green">
<h:graphicImage value="photos/thumb_image5.jpg"/>
</a>
</li>
</ul>
</div>
<lightbox:lightbox id="lightbox" selector="#gallery a" containerBorderSize="#{config.containerBorderSize}"
containerResizeSpeed="#{config.containerResizeSpeed}" keyToClose="#{config.keyToClose}"
keyToNext="#{config.keyToNext}" keyToPrev="#{config.keyToPrev}"
overlayBgColor="#{config.overlayBgColor}"
overlayOpacity="#{config.overlayOpacity}" txtImage="#{config.txtImage}" txtOf="#{config.txtOf}"
imageBlank="#{config.imageBlank}"
imageBtnClose="#{config.imageBtnClose}"
imageBtnNext="#{config.imageBtnNext}"
imageBtnPrev="#{config.imageBtnPrev}"
imageLoading="#{config.imageLoading}"
/>
<h:form id="lightboxForm">
<h:panelGrid columns="3">
<h:outputLabel value="containerBorderSize" for="containerBorderSize"/>
<h:inputText id="containerBorderSize" value="#{config.containerBorderSize}"/>
<h:message for="containerBorderSize"/>
<h:outputLabel value="containerResizeSpeed" for="containerResizeSpeed"/>
<h:inputText id="containerResizeSpeed" value="#{config.containerResizeSpeed}"/>
<h:message for="containerResizeSpeed"/>
<h:outputLabel value="keyToClose" for="keyToClose"/>
<h:inputText id="keyToClose" value="#{config.keyToClose}"/>
<h:message for="keyToClose"/>
<h:outputLabel value="keyToNext" for="keyToNext"/>
<h:inputText id="keyToNext" value="#{config.keyToNext}"/>
<h:message for="keyToNext"/>
<h:outputLabel value="" for="keyToPrev"/>
<h:inputText id="keyToPrev" value="#{config.keyToPrev}"/>
<h:message for="keyToPrev"/>
<h:outputLabel value="overlayBgColor" for="overlayBgColor"/>
<h:inputText id="overlayBgColor" value="#{config.overlayBgColor}"/>
<h:message for="overlayBgColor"/>
<h:outputLabel value="overlayOpacity" for="overlayOpacity"/>
<h:inputText id="overlayOpacity" value="#{config.overlayOpacity}"/>
<h:message for="overlayOpacity"/>
<h:outputLabel value="txtImage" for="txtImage"/>
<h:inputText id="txtImage" value="#{config.txtImage}"/>
<h:message for="txtImage"/>
<h:outputLabel value="txtOf" for="txtOf"/>
<h:inputText id="txtOf" value="#{config.txtOf}"/>
<h:message for="txtOf"/>
<h:outputLabel value="imageBlank" for="imageBlank"/>
<h:inputText id="imageBlank" value="#{config.imageBlank}"/>
<h:message for="imageBlank"/>
<h:outputLabel value="imageBtnClose" for="imageBtnClose"/>
<h:inputText id="imageBtnClose" value="#{config.imageBtnClose}"/>
<h:message for="imageBtnClose"/>
<h:outputLabel value="imageBtnNext" for="imageBtnNext"/>
<h:inputText id="imageBtnNext" value="#{config.imageBtnNext}"/>
<h:message for="imageBtnNext"/>
<h:outputLabel value="imageBtnPrev" for="imageBtnPrev"/>
<h:inputText id="imageBtnPrev" value="#{config.imageBtnPrev}"/>
<h:message for="imageBtnPrev"/>
<h:outputLabel value="imageLoading" for="imageLoading"/>
<h:inputText id="imageLoading" value="#{config.imageLoading}"/>
<h:message for="imageLoading"/>
<a4j:commandButton value="Submit" reRender="lightbox,lightboxForm"/>
</h:panelGrid>
</h:form>
<rich:insert src="/sample_1.xhtml" highlight="html"/>
</body>
</html>