![]() |
Carousel and LightBox |
PrimeFaces offers a component called a Light Box (<p:lightBox />) which supports <iframe /> elements directly. You can see an example from the PrimeFaces showcase for how to use it.
I thought I would share a more interesting approach using a <p:caraousel /> object to display multiple <iframe /> elements in a more "sexy" approach.
The cool thing is that the code is really easy to implement!
The code was developed using NetBeans 7.2 and Apache Maven. The code can be downloaded here: iframe-example.zip
code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <? xml version = '1.0' encoding = 'UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> > < h:head > < title >< iframe /> exhibition</ title > </ h:head > < h:body > < h:form id = "form1" > < p:lightBox iframe = "true" > < h:outputLink value = "#{sessionBean.urls[0]}" title = "Java Evangelist John Yeary's Blog" > < h:outputText value = "Display Blog" /> </ h:outputLink > </ p:lightBox > < p:carousel id = "carousel1" value = "#{sessionBean.urls}" var = "url" > < f:facet name = "header" > Web Pages </ f:facet > < p:panel style = "width: 600px; height: 800px;" > < iframe src = "#{url}" width = "550px;" height = "775px;" /> </ p:panel > </ p:carousel > </ h:form > </ h:body > </ html > |
0 comments :
Post a Comment