Foren

Home » Liferay Portal » English » 3. Development

Kombinierte Ansicht Flache Ansicht Baumansicht
Threads [ Zurück | Nächste ]
toggle
Kristian Gil
Carousel portlet
12. Mai 2011 08:33
Antwort

Kristian Gil

Rang: New Member

Nachrichten: 22

Eintrittsdatum: 14. Juli 2010

Neue Beiträge

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!
Sergio Sanchez
RE: Carousel portlet
12. Mai 2011 10:07
Antwort

Sergio Sanchez

Rang: Junior Member

Nachrichten: 41

Eintrittsdatum: 3. Februar 2011

Neue Beiträge

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
gofri _
RE: Carousel portlet
13. Mai 2011 06:48
Antwort

gofri _

Rang: Junior Member

Nachrichten: 94

Eintrittsdatum: 2. März 2007

Neue Beiträge

The simplest way:

 1<script type="text/javascript" charset="utf-8">
 2AUI().ready('aui-carousel', function(A) {
 3
 4    var component = new A.Carousel(
 5        {
 6            intervalTime: 5,
 7            contentBox: '#divanim',
 8            activeIndex: 'rand',
 9            height: 28,
10            width: 780
11        }
12    )
13    .render();
14
15});
16</script>
Jelmer Kuperus
RE: Carousel portlet
13. Mai 2011 09:15
Antwort

Jelmer Kuperus

Rang: Liferay Legend

Nachrichten: 1190

Eintrittsdatum: 10. März 2010

Neue Beiträge

You can use webcontent :

structure :

 1<root>
 2  <dynamic-element name='duration' type='list' index-type='' repeatable='false'>
 3  <meta-data>
 4            <entry name="displayAsTooltip"><![CDATA[false]]></entry>
 5            <entry name="required"><![CDATA[false]]></entry>
 6            <entry name="instructions"><![CDATA[Select how long, in seconds, you would prefer to display an item before switching to the next slide]]></entry>
 7            <entry name="label"><![CDATA[Item Duration]]></entry>
 8            <entry name="predefinedValue"><![CDATA[]]></entry>
 9        </meta-data>
10
11    <dynamic-element name='1' type='1' index-type='' repeatable='false'>  </dynamic-element>
12    <dynamic-element name='2' type='2' index-type='' repeatable='false'>  </dynamic-element>
13    <dynamic-element name='3' type='3' index-type='' repeatable='false'>  </dynamic-element>
14    <dynamic-element name='4' type='4' index-type='' repeatable='false'>  </dynamic-element>
15    <dynamic-element name='5' type='5' index-type='' repeatable='false'>  </dynamic-element>
16    <dynamic-element name='6' type='6' index-type='' repeatable='false'>  </dynamic-element>
17    <dynamic-element name='7' type='7' index-type='' repeatable='false'>  </dynamic-element>
18    <dynamic-element name='8' type='8' index-type='' repeatable='false'>  </dynamic-element>
19    <dynamic-element name='9' type='9' index-type='' repeatable='false'>  </dynamic-element>
20    <dynamic-element name='10' type='10' index-type='' repeatable='false'></dynamic-element>
21  </dynamic-element>
22  <dynamic-element name='height' type='text' index-type='' repeatable='false'>
23  <meta-data>
24            <entry name="displayAsTooltip"><![CDATA[false]]></entry>
25            <entry name="required"><![CDATA[true]]></entry>
26            <entry name="instructions"><![CDATA[This defines the height of the carousel, in pixels(px). Do not add "px" at the end of the value]]></entry>
27            <entry name="label"><![CDATA[Height]]></entry>
28            <entry name="predefinedValue"><![CDATA[]]></entry>
29        </meta-data>
30</dynamic-element>
31  <dynamic-element name='width' type='text' index-type='' repeatable='false'>
32  <meta-data>
33            <entry name="displayAsTooltip"><![CDATA[false]]></entry>
34            <entry name="required"><![CDATA[true]]></entry>
35            <entry name="instructions"><![CDATA[This defines the width of the carousel, in pixels(px). Do not add "px" at the end of the value]]></entry>
36            <entry name="label"><![CDATA[Width]]></entry>
37            <entry name="predefinedValue"><![CDATA[]]></entry>
38        </meta-data>
39</dynamic-element>
40  <dynamic-element name='content' type='text_area' index-type='text' repeatable='true'>
41  <meta-data>
42            <entry name="displayAsTooltip"><![CDATA[false]]></entry>
43            <entry name="required"><![CDATA[true]]></entry>
44            <entry name="instructions"><![CDATA[This is the content of this slide. To create more slides, click on the " " button]]></entry>
45            <entry name="label"><![CDATA[content]]></entry>
46            <entry name="predefinedValue"><![CDATA[]]></entry>
47        </meta-data>
48</dynamic-element>
49</root>


Template


 1#set ($contentId = $reserved-article-id.getData())
 2#set ($contentClass = "multiple-items-" + $contentId + "-carousel")
 3
 4<style type="text/css" media="screen">
 5    #$contentClass {
 6        height: $height.getData()px;
 7        position: relative;
 8        width: $width.getData()px;
 9    }
10
11    #$contentClass .carousel-item {
12        height: $height.getData()px;
13        overflow: hidden;
14        width: $width.getData()px;
15        position: absolute;
16        top: 0;
17    }
18</style>
19
20<div id="$contentClass">
21    #foreach ($item in $content.getSiblings())
22        <div class="carousel-item">
23            $item.getData()
24        </div>
25    #end
26</div>
27
28<script type="text/javascript">
29    AUI().ready(
30    'aui-carousel',
31    function(A) {
32        var component = new A.Carousel(
33            {
34                activeIndex: 'rand',
35                contentBox: '#$contentClass',
36                height: $height.getData(),
37                intervalTime: $duration.getData(),
38                width: $width.getData()
39            }
40        )
41        .render();
42    });
43</script>
Armando Ponce
RE: Carousel portlet
16. Mai 2011 09:11
Antwort

Armando Ponce

Rang: New Member

Nachrichten: 8

Eintrittsdatum: 16. Mai 2011

Neue Beiträge

In Liferay 5.1.7 there is no Alloy UI, is it? I think the way to go is with Jquery.
Nilesh Gundecha
RE: Carousel portlet
17. Mai 2011 00:40
Antwort

Nilesh Gundecha

Rang: Regular Member

Nachrichten: 189

Eintrittsdatum: 30. November 2009

Neue Beiträge

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.
Oliver Bayer
RE: Carousel portlet
17. Mai 2011 01:10
Antwort

Oliver Bayer

Rang: Liferay Master

Nachrichten: 869

Eintrittsdatum: 18. Februar 2009

Neue Beiträge

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
Nilesh Gundecha
RE: Carousel portlet
17. Mai 2011 01:22
Antwort

Nilesh Gundecha

Rang: Regular Member

Nachrichten: 189

Eintrittsdatum: 30. November 2009

Neue Beiträge

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.
gofri _
RE: Carousel portlet
17. Mai 2011 02:03
Antwort

gofri _

Rang: Junior Member

Nachrichten: 94

Eintrittsdatum: 2. März 2007

Neue Beiträge

hi, try to position your divs to overlap each other
Christopher Jimenez
RE: Carousel portlet
30. Januar 2012 10:15
Antwort

Christopher Jimenez

Rang: New Member

Nachrichten: 10

Eintrittsdatum: 23. Dezember 2011

Neue Beiträge

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
Mika Koivisto
RE: Carousel portlet
22. August 2012 20:26
Antwort

Mika Koivisto

LIFERAY STAFF

Rang: Liferay Legend

Nachrichten: 1499

Eintrittsdatum: 7. August 2006

Neue Beiträge

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.
Matus Ferko
RE: Carousel portlet
4. September 2012 12:59
Antwort

Matus Ferko

Rang: Junior Member

Nachrichten: 26

Eintrittsdatum: 5. Juni 2009

Neue Beiträge

Mika I am not able to build the portlet with build-css goal enabled
1<executions>
2        <execution>
3            <phase>generate-sources</phase>
4                <goals>
5                    <goal>build-css</goal>
6                </goals>
7        </execution>
8    </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]
Mika Koivisto
RE: Carousel portlet
4. September 2012 11:46
Antwort

Mika Koivisto

LIFERAY STAFF

Rang: Liferay Legend

Nachrichten: 1499

Eintrittsdatum: 7. August 2006

Neue Beiträge

It requires 6.1.1 or 6.1.20 version of the Liferay maven plugin which has the build-css goal.
Hans-Jörg Alles
RE: Carousel portlet
11. Januar 2013 05:12
Antwort

Hans-Jörg Alles

Rang: New Member

Nachrichten: 1

Eintrittsdatum: 30. Mai 2012

Neue Beiträge

Hello Mika,

i tried your photo portlet. It have everything on board i need, thank you very much.
But could it be, that if you enable link and store url per picture, that this works ( mouse / hyperlink ) in FF but not in IE 8 ?

Greatings

Hans-Jörg
Valérie barbot
RE: Carousel portlet
12. Dezember 2013 06:52
Antwort

Valérie barbot

Rang: Junior Member

Nachrichten: 71

Eintrittsdatum: 7. April 2009

Neue Beiträge

photo carousel portlet is very useful. i have a problem with rights because guest must not view the folder but only access. i have the error :

Caused by: org.apache.jasper.JasperException: An exception occurred processing JSP page /view.jsp at line 29
thanks