How to setup a showcase similar to Liferay portal

[12年前 に Andrew Lee によって更新されました。]

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

[12年前 に steve rieger によって更新されました。]

that is pure html/js,

i checked out your site, not bad...

[12年前 に steve rieger によって更新されました。]

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

[12年前 に Andrew Lee によって更新されました。]

Thanks Steve!
I'm looking at a solid block of script - any chance you have a version that is formatted?

[12年前 に Andrew Lee によって更新されました。]

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

Thanks!
Andrew

[12年前 に diya laila によって更新されました。]

i try to edit this code..but can't used it.please help me..

[11年前 に Praveen P によって更新されました。]

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