掲示板
Carousel portlet
Hi,
We're planning on implementing a Carousel portlet like the one at Yahoo's home page.
Does anyone have a suggestion if there is already an existing portlet for this or if it's better to develop one from scratch?
One idea we had was to create another view for the Asset Publisher portlet using JQuery or maybe AlloyUI.
We're running on Liferay 5.1.7.
Any suggestion is appreciated, thanks!
We're planning on implementing a Carousel portlet like the one at Yahoo's home page.
Does anyone have a suggestion if there is already an existing portlet for this or if it's better to develop one from scratch?
One idea we had was to create another view for the Asset Publisher portlet using JQuery or maybe AlloyUI.
We're running on Liferay 5.1.7.
Any suggestion is appreciated, thanks!
I did that using the Jquery jcarousel plugin. This plugin needs the elements to move to be list items inside an unordered list, so I had to wrap the HTML that the asset publisher produced in li tags inside journal/asset/abstract.jsp and print ul tags inside asset_publisher/display/abstracts.jsp. Those JSPs need to be deployed inside a hook plugin.
Hope this helps
Hope this helps
The simplest way:
<script type="text/javascript" charset="utf-8">
AUI().ready('aui-carousel', function(A) {
var component = new A.Carousel(
{
intervalTime: 5,
contentBox: '#divanim',
activeIndex: 'rand',
height: 28,
width: 780
}
)
.render();
});
</script>
12年前 に jelmer kuperus によって更新されました。
RE: Carousel portlet
Liferay Legend 投稿: 1191 参加年月日: 10/03/10 最新の投稿
You can use webcontent :
structure :
Template
structure :
<root>
<dynamic-element name="duration" type="list" index-type="" repeatable="false">
<meta-data>
<entry name="displayAsTooltip">false</entry>
<entry name="required">false</entry>
<entry name="instructions">Select how long, in seconds, you would prefer to display an item before switching to the next slide</entry>
<entry name="label">Item Duration</entry>
<entry name="predefinedValue"></entry>
</meta-data>
<dynamic-element name="1" type="1" index-type="" repeatable="false"> </dynamic-element>
<dynamic-element name="2" type="2" index-type="" repeatable="false"> </dynamic-element>
<dynamic-element name="3" type="3" index-type="" repeatable="false"> </dynamic-element>
<dynamic-element name="4" type="4" index-type="" repeatable="false"> </dynamic-element>
<dynamic-element name="5" type="5" index-type="" repeatable="false"> </dynamic-element>
<dynamic-element name="6" type="6" index-type="" repeatable="false"> </dynamic-element>
<dynamic-element name="7" type="7" index-type="" repeatable="false"> </dynamic-element>
<dynamic-element name="8" type="8" index-type="" repeatable="false"> </dynamic-element>
<dynamic-element name="9" type="9" index-type="" repeatable="false"> </dynamic-element>
<dynamic-element name="10" type="10" index-type="" repeatable="false"></dynamic-element>
</dynamic-element>
<dynamic-element name="height" type="text" index-type="" repeatable="false">
<meta-data>
<entry name="displayAsTooltip">false</entry>
<entry name="required">true</entry>
<entry name="instructions">This defines the height of the carousel, in pixels(px). Do not add "px" at the end of the value</entry>
<entry name="label">Height</entry>
<entry name="predefinedValue"></entry>
</meta-data>
</dynamic-element>
<dynamic-element name="width" type="text" index-type="" repeatable="false">
<meta-data>
<entry name="displayAsTooltip">false</entry>
<entry name="required">true</entry>
<entry name="instructions">This defines the width of the carousel, in pixels(px). Do not add "px" at the end of the value</entry>
<entry name="label">Width</entry>
<entry name="predefinedValue"></entry>
</meta-data>
</dynamic-element>
<dynamic-element name="content" type="text_area" index-type="text" repeatable="true">
<meta-data>
<entry name="displayAsTooltip">false</entry>
<entry name="required">true</entry>
<entry name="instructions">This is the content of this slide. To create more slides, click on the " " button</entry>
<entry name="label">content</entry>
<entry name="predefinedValue"></entry>
</meta-data>
</dynamic-element>
</root>
Template
#set ($contentId = $reserved-article-id.getData())
#set ($contentClass = "multiple-items-" + $contentId + "-carousel")
<style type="text/css" media="screen">
#$contentClass {
height: $height.getData()px;
position: relative;
width: $width.getData()px;
}
#$contentClass .carousel-item {
height: $height.getData()px;
overflow: hidden;
width: $width.getData()px;
position: absolute;
top: 0;
}
</style>
<div id="$contentClass">
#foreach ($item in $content.getSiblings())
<div class="carousel-item">
$item.getData()
</div>
#end
</div>
<script type="text/javascript">
AUI().ready(
'aui-carousel',
function(A) {
var component = new A.Carousel(
{
activeIndex: 'rand',
contentBox: '#$contentClass',
height: $height.getData(),
intervalTime: $duration.getData(),
width: $width.getData()
}
)
.render();
});
</script>
12年前 に Nilesh Gundecha によって更新されました。
RE: Carousel portlet
Regular Member 投稿: 205 参加年月日: 09/12/01 最新の投稿
I tried using the Alloy UI and could successfully achieve it. But the problem what I faced was that every time my portal page use to get refreshed, the Carousel use to get reloaded. And whenever the Carousel gets reloaded, it displays all the <div>'s for few seconds and then starts its carousel effect. I want to avoid this. Is there any way I can configure this?
Thanks and Regards,
Nilesh.
Thanks and Regards,
Nilesh.
Hi Nilesh,
I don't think you can avoid this "feature". It all depends on your network connection speed because the page has to be completely loaded before the carousel script is run. So all html has to be loaded before the js effect can start and redisplay the carousel contents. Testing it at localhost you shouldn't see the divs.
HTH Oli
I don't think you can avoid this "feature". It all depends on your network connection speed because the page has to be completely loaded before the carousel script is run. So all html has to be loaded before the js effect can start and redisplay the carousel contents. Testing it at localhost you shouldn't see the divs.
HTH Oli
12年前 に Nilesh Gundecha によって更新されました。
RE: Carousel portlet
Regular Member 投稿: 205 参加年月日: 09/12/01 最新の投稿
Hi Oliver,
Many Thanks for your reply. But I dont see this to be a network connection speed problem. As I am not facing the same problem when I am surfing the liferay.com. As we know in liferay.com, on its home page itself, Alloy Carousel is used where different images are embedded inside the div are is carousel effect.
But while surfing this, I am not facing any problem. There is no reloading delay which makes all the content to be seen first, and then effect.
I am facing problem in my local system itself. I will post my code here.
Regards,
Nilesh.
Many Thanks for your reply. But I dont see this to be a network connection speed problem. As I am not facing the same problem when I am surfing the liferay.com. As we know in liferay.com, on its home page itself, Alloy Carousel is used where different images are embedded inside the div are is carousel effect.
But while surfing this, I am not facing any problem. There is no reloading delay which makes all the content to be seen first, and then effect.
I am facing problem in my local system itself. I will post my code here.
Regards,
Nilesh.
hi, try to position your divs to overlap each other
12年前 に Christopher Jimenez によって更新されました。
RE: Carousel portlet
New Member 投稿: 11 参加年月日: 11/12/23 最新の投稿
I dont want to have all the information in the same web content... I like to do the same but web content with a special tag or categories
11年前 に Mika Koivisto によって更新されました。
RE: Carousel portlet
Liferay Legend 投稿: 1519 参加年月日: 06/08/07 最新の投稿
Just thought I'd let everyone know that I recently made a photo carousel portlet that uses Alloy UI carousel which you can quite conveniently configure and it pulls the images from Document's and Media.
Mika I am not able to build the portlet with build-css goal enabled
Edit 1:
I use plugin version 6.1.1
I receive error
<executions>
<execution>
<phase>generate-sources</phase>
<goals>
<goal>build-css</goal>
</goals>
</execution>
</executions>
Edit 1:
I use plugin version 6.1.1
I receive error
Failed to execute goal com.liferay.maven.plugins:liferay-maven-plugin:6.1.1:build-css (default) on project photo-carousel-portlet: basedir C:\...\photo-carousel-portlet\target\photo-carousel-portlet-0.1-SNAPSHOT does not exist. -> [Help 1]
11年前 に Mika Koivisto によって更新されました。
RE: Carousel portlet
Liferay Legend 投稿: 1519 参加年月日: 06/08/07 最新の投稿
It requires 6.1.1 or 6.1.20 version of the Liferay maven plugin which has the build-css goal.