構造的に表示 平面上に表示 ツリー上に表示
スレッド [ 前へ | 次へ ]
toggle
Andrew Lee
How to setup a showcase similar to Liferay portal
2011/06/14 10:58
答え

Andrew Lee

ランク: New Member

投稿: 8

参加年月日: 2011/06/14

最近の投稿

Hi Liferay,

Love what you guys are doing.
I'm a Joomla user and just set up our first Liferay website: http://www.ossera.com

Need some pointers:

How do I set up a "showcase rotator" that is similar to the Liferay page?

We want to set up a similar rotating header showcase on our site.
http://www.liferay.com/

Is this a special template component - I've looked everywhere but cannot seem to find it.

Thanks,
Andrew Lee
steve rieger
RE: How to setup a showcase similar to Liferay portal
2011/06/14 11:37
答え

steve rieger

ランク: Expert

投稿: 436

参加年月日: 2006/09/11

最近の投稿

that is pure html/js,

i checked out your site, not bad...
steve rieger
RE: How to setup a showcase similar to Liferay portal
2011/06/14 11:37
答え

steve rieger

ランク: Expert

投稿: 436

参加年月日: 2006/09/11

最近の投稿

<div id="layout-column_column-1" class="portlet-dropzone portlet-column-content"> <div class="portlet-boundary portlet-boundary_56_ portlet-static portlet-static-end portlet-journal-content " id="p_p_id_56_INSTANCE_PJk9_"> <a id="p_56_INSTANCE_PJk9"></a> <div style="" class="portlet-borderless-container"> <div class="portlet-body"> <div id="article_1_14_8451043_2.4" class="journal-content-article"> <style> .vp960 .aui-carousel-item-1 { background-image: url(/image/image_gallery?img_id=8553431); } .vp720 .aui-carousel-item-1 { background-image: url(/image/image_gallery?img_id=8553425); } .vp960 .aui-carousel-item-2 { background-image: url(/image/image_gallery?img_id=8553408); } .vp720 .aui-carousel-item-2 { background-image: url(/image/image_gallery?img_id=8553404); } .vp960 .aui-carousel-item-3 { background-image: url(http://cdn.www.liferay.com/image/image_gallery?uuid=3574ebc3-f7d4-4a33-ad8d-3f9af47ac3b2&amp;groupId=14&amp;t=1305670396168); } .vp720 .aui-carousel-item-3 { background-image: url(http://cdn.www.liferay.com/image/image_gallery?uuid=9abcc01a-b961-4556-9b6f-3fc3869ac766&amp;groupId=14&amp;t=1305670396167); } .vp960 .aui-carousel-item-4 { background-image: url(/image/image_gallery?img_id=8553457); } .vp720 .aui-carousel-item-4 { background-image: url(/image/image_gallery?img_id=8553463); } .vp960 .aui-carousel-item-5 { background-image: url(/image/image_gallery?img_id=8553471); } .vp720 .aui-carousel-item-5 { background-image: url(/image/image_gallery?img_id=8553467); } .vp960 .aui-carousel-item-6 { background-image: url(/image/image_gallery?uuid=66b2117e-1aae-41ca-a97e-02e4929b7eec&amp;groupId=14&amp;t=1307144293964); } .vp720 .aui-carousel-item-6 { background-image: url(/image/image_gallery?uuid=912d9af0-2f2a-461c-aa5d-c781b41483e7&amp;groupId=14&amp;t=1307144293960); } </style> <div id="aui_3_2_0_1266" class="aui-widget aui-component aui-carousel"><div id="carousel" class="article carousel u-12-12 h-14-12 u-9-9 h-10-9 x-6 x-4 aui-carousel-content"> <a class="display-b aui-carousel-item aui-carousel-item-1 callout u-12-12 h-14-12 u-9-9 h-10-9" href="/france2011" style="opacity: 1;"> <div class="invisible"> <p> &nbsp;</p> <p> &nbsp;</p> <p> &nbsp;</p> <p> &nbsp;</p> <p> &nbsp;</p> <p style="margin: 0.75em 0px"> Liferay France Symposium 2011</p> </div> </a> <a class="display-b aui-carousel-item aui-carousel-item-2 callout u-12-12 h-14-12 u-9-9 h-10-9" href="/community" style="opacity: 1;"> <div class="invisible"> <p> Liferay Open Source Community</p> </div> </a> <a class="display-b aui-carousel-item aui-carousel-item-3 callout u-12-12 h-14-12 u-9-9 h-10-9" href="/training/ipadoffer" style="opacity: 1;"> <div class="invisible"> <p> Get an iPad 2 for attending Liferay Training</p> </div> </a> <a class="display-b aui-carousel-item aui-carousel-item-4 callout u-12-12 h-14-12 u-9-9 h-10-9 aui-carousel-item-active" href="/about-us/awards" style="opacity: 1;"> <div class="invisible"> <p> Java CMS</p> </div> </a> <a class="display-b aui-carousel-item aui-carousel-item-5 callout u-12-12 h-14-12 u-9-9 h-10-9" href="/events/liferay-roadshows" style="opacity: 1;"> <div class="invisible"> <p> Liferay Roadshows</p> </div> </a> <a class="display-b aui-carousel-item aui-carousel-item-6 callout u-12-12 h-14-12 u-9-9 h-10-9" href="/web-events" style="opacity: 1;"> <div class="invisible"> <p> Liferay LIVE</p> </div> </a> <menu id="aui_3_2_0_1285"><li><a class="aui-carousel-menu-item aui-carousel-menu-pause"></a></li><li><a class=" aui-carousel-menu-item aui-carousel-menu-prev "></a></li><li><a class="aui-carousel-menu-item aui-carousel-menu-index">0</a></li><li><a class="aui-carousel-menu-item aui-carousel-menu-index">1</a></li><li><a class="aui-carousel-menu-item aui-carousel-menu-index">2</a></li><li><a class="aui-carousel-menu-item aui-carousel-menu-index aui-carousel-menu-active">3</a></li><li><a class="aui-carousel-menu-item aui-carousel-menu-index">4</a></li><li><a class="aui-carousel-menu-item aui-carousel-menu-index">5</a></li><li><a class=" aui-carousel-menu-item aui-carousel-menu-next "></a></li></menu></div></div> <script>/*&lt;![CDATA[*/AUI().ready("aui-carousel",function(a){var b=new a.Carousel({intervalTime:7,contentBox:"#carousel",activeIndex:0,after:{render:function(){a.one(".aui-carousel-item-1").setStyle("opacity",1)}}}).render()});/*]]&gt;*/</script> </div> </div> </div> </div> <div class="portlet-boundary portlet-boundary_56_ portlet-static portlet-static-end portlet-journal-content " id="p_p_id_56_INSTANCE_Jb6L_"> <a id="p_56_INSTANCE_Jb6L"></a> <div style="" class="portlet-borderless-container"> <div class="portlet-body"> <div id="article_1_14_8452325_2.0" class="journal-content-article"> <style> .scroller { -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); background-color: #F0F0F0; background-image: -moz-linear-gradient(#DDD, #F0F0F0); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(1, #DDD), color-stop(0.5, #F0F0F0) ); } .scroller h1 { color: #474A4B; font-weight: bold; font-size: 1em; line-height: 45px; margin: 0; padding: 0 20px; } .scroller h1 a:link { color: #474A4B; text-decoration: none; } .scroller { height: 45px; } .scroller h1 { border-right: 1px solid #F0F0F0; float: left; } .advanced .aui-scroller-item { background-position: center; background-repeat: no-repeat; } .advanced .aui-scroller-item img { opacity: 0; filter: alpha(opacity = 0); } .advanced .aui-scroller-horizontal { border-left: 1px solid #CACACA; } .advanced .aui-scroller-horizontal .aui-scroller-item { height: 100%; padding: 0 10px; } .advanced .aui-scroller-horizontal .aui-scroller-item img { height: auto; vertical-align: top; } .ie8 .advanced .aui-scroller-horizontal .aui-scroller-item img { height: 100%; } .advanced .aui-scroller-content .scroller-item-1 { background-image: url(/image/image_gallery?uuid=34196c51-4b06-4927-8afd-5233aed6ee63&amp;groupId=14&amp;t=1304189393993); } .advanced .aui-scroller-content .scroller-item-2 { background-image: url(/image/image_gallery?uuid=c0111af1-82b2-4d33-a980-4cf719dee702&amp;groupId=14&amp;t=1304189393993); } .advanced .aui-scroller-content .scroller-item-3 { background-image: url(/image/image_gallery?uuid=3a9394d1-e532-4a77-9bac-8dc3bddec754&amp;groupId=14&amp;t=1304189393993); } .advanced .aui-scroller-content .scroller-item-4 { background-image: url(/image/image_gallery?uuid=756cd9a4-2ab4-47ff-86e2-82595238e801&amp;groupId=14&amp;t=1304189393993); } .advanced .aui-scroller-content .scroller-item-5 { background-image: url(/image/image_gallery?uuid=fe4dcee5-aebc-4fd9-ab7f-dfd52f7bfe1e&amp;groupId=14&amp;t=1304189393992); } .advanced .aui-scroller-content .scroller-item-6 { background-image: url(/image/image_gallery?uuid=27e9e191-bc25-4ed0-ab8c-453174672314&amp;groupId=14&amp;t=1304189393992); } .advanced .aui-scroller-content .scroller-item-7 { background-image: url(/image/image_gallery?uuid=8cdaf6bd-3b0a-4227-9eb3-eb467e53478b&amp;groupId=14&amp;t=1304189393992); } </style> <article class="x-6 x-4"> <div class="scroller" id="scroller1"> <h1> <a href="#">Our Clients</a> </h1> <div class="advanced"> <div id="aui_3_2_0_1328" class="aui-widget aui-component aui-scroller aui-scroller-horizontal" style="height: 45px;"><div id="scroller1-content" class="aui-scroller-content aui-widget-content-expanded"> <div class="scroller-item-1 aui-scroller-item"> <a href="/products/liferay-portal/stories"> <img alt="Cisco" src="/image/image_gallery?uuid=34196c51-4b06-4927-8afd-5233aed6ee63&amp;groupId=14&amp;t=1304189393993"> </a> </div> <div class="scroller-item-2 aui-scroller-item"> <a href="/products/liferay-portal/stories"> <img alt="Sesame Street" src="/image/image_gallery?uuid=c0111af1-82b2-4d33-a980-4cf719dee702&amp;groupId=14&amp;t=1304189393993"> </a> </div> <div class="scroller-item-3 aui-scroller-item"> <a href="/products/liferay-portal/stories"> <img alt="T Mobile" src="/image/image_gallery?uuid=3a9394d1-e532-4a77-9bac-8dc3bddec754&amp;groupId=14&amp;t=1304189393993"> </a> </div> <div class="scroller-item-4 aui-scroller-item"> <a href="/products/liferay-portal/stories"> <img alt="Societe Generale" src="/image/image_gallery?uuid=756cd9a4-2ab4-47ff-86e2-82595238e801&amp;groupId=14&amp;t=1304189393993"> </a> </div> <div class="scroller-item-5 aui-scroller-item"> <a href="/products/liferay-portal/stories"> <img alt="Barclays" src="/image/image_gallery?uuid=fe4dcee5-aebc-4fd9-ab7f-dfd52f7bfe1e&amp;groupId=14&amp;t=1304189393992"> </a> </div> <div class="scroller-item-6 aui-scroller-item"> <a href="/products/liferay-portal/stories"> <img alt="Autozone" src="/image/image_gallery?uuid=27e9e191-bc25-4ed0-ab8c-453174672314&amp;groupId=14&amp;t=1304189393992"> </a> </div> <div class="scroller-item-7 aui-scroller-item"> <a href="/products/liferay-portal/stories"> <img alt="China Mobile" src="/image/image_gallery?uuid=8cdaf6bd-3b0a-4227-9eb3-eb467e53478b&amp;groupId=14&amp;t=1304189393992"> </a> </div> </div></div> </div> </div> </article> <script>/*&lt;![CDATA[*/AUI().ready("aui-scroller","transition",function(a){var b=new a.Scroller({contentBox:"#scroller1-content",height:45,orientation:"horizontal"}).render()});/*]]&gt;*/</script> </div> </div> </div> </div> </div>
Andrew Lee
RE: How to setup a showcase similar to Liferay portal
2011/06/14 12:23
答え

Andrew Lee

ランク: New Member

投稿: 8

参加年月日: 2011/06/14

最近の投稿

Thanks Steve!
I'm looking at a solid block of script - any chance you have a version that is formatted?
Andrew Lee
RE: How to setup a showcase similar to Liferay portal
2011/06/14 12:37
答え

Andrew Lee

ランク: New Member

投稿: 8

参加年月日: 2011/06/14

最近の投稿

i found an example online:
http://www.agilecarousel.com/

Thanks!
Andrew
diya laila
RE: How to setup a showcase similar to Liferay portal
2011/09/13 1:26
答え

diya laila

ランク: New Member

投稿: 5

参加年月日: 2011/08/24

最近の投稿

i try to edit this code..but can't used it.please help me..
Praveen P
RE: How to setup a showcase similar to Liferay portal
2012/06/18 3:10
答え

Praveen P

ランク: Regular Member

投稿: 100

参加年月日: 2012/02/20

最近の投稿

Go through this post, structure and template is given it is working fine, it may helpful to you

Participate in the State of Liferay Community 2017. Help the community and even win some prizes!