フォーラム

ホーム » Liferay Portal » English » 3. Development

構造的に表示 平面上に表示 ツリー上に表示
スレッド [ 前へ | 次へ ]
toggle
How to get Image Slide Show using Web Content in liferay6 Juhi Kumari 2012/01/06 3:12
RE: How to get Image Slide Show using Web Content in liferay6 Deepak R 2012/01/06 5:03
RE: How to get Image Slide Show using Web Content in liferay6 Bradley Wood 2012/01/06 11:33
RE: How to get Image Slide Show using Web Content in liferay6 Juhi Kumari 2012/01/08 22:50
RE: How to get Image Slide Show using Web Content in liferay6 Deepak R 2012/01/08 23:33
RE: How to get Image Slide Show using Web Content in liferay6 Juhi Kumari 2012/01/09 0:47
RE: How to get Image Slide Show using Web Content in liferay6 Lanre Ogunbayo 2012/02/09 15:31
RE: How to get Image Slide Show using Web Content in liferay6 Lanre Ogunbayo 2012/02/09 16:19
RE: How to get Image Slide Show using Web Content in liferay6 Marco Faustinelli 2012/09/11 11:39
RE: How to get Image Slide Show using Web Content in liferay6 Mradul Ashok 2012/10/29 4:16
RE: How to get Image Slide Show using Web Content in liferay6 Nikhil Nishchal 2012/10/29 4:29
RE: How to get Image Slide Show using Web Content in liferay6 Mradul Ashok 2012/10/29 5:26
RE: How to get Image Slide Show using Web Content in liferay6 Nikhil Nishchal 2012/10/29 5:32
RE: How to get Image Slide Show using Web Content in liferay6 Mradul Ashok 2012/10/29 7:24
RE: How to get Image Slide Show using Web Content in liferay6 Vasanth Kumar 2012/08/06 22:26
RE: How to get Image Slide Show using Web Content in liferay6 Matthew Dixon 2012/09/03 4:58
RE: How to get Image Slide Show using Web Content in liferay6 Ben Chapman 2012/02/10 10:42
RE: How to get Image Slide Show using Web Content in liferay6 Ben Chapman 2012/02/10 12:39
RE: How to get Image Slide Show using Web Content in liferay6 Nagarjuna Gottimukkala 2012/05/11 4:52
RE: How to get Image Slide Show using Web Content in liferay6 Kumar Bonagiri 2012/05/14 1:03
RE: How to get Image Slide Show using Web Content in liferay6 Vishal Panchal 2013/04/17 21:03
RE: How to get Image Slide Show using Web Content in liferay6 Colton3310 Martin 2013/05/06 1:21
RE: How to get Image Slide Show using Web Content in liferay6 Vishal Panchal 2013/05/06 21:06
RE: How to get Image Slide Show using Web Content in liferay6 parikshit sharma 2013/05/06 2:28
RE: How to get Image Slide Show using Web Content in liferay6 Colton3310 Martin 2013/05/06 19:50
RE: How to get Image Slide Show using Web Content in liferay6 parikshit sharma 2013/05/07 0:39
Juhi Kumari
How to get Image Slide Show using Web Content in liferay6
2012/01/06 3:12
答え

Juhi Kumari

ランク: Expert

投稿: 347

参加年月日: 2011/12/12

最近の投稿

Hi
I want image slide show using Web Content in liferay6, but don't know how to achieve this. Just like in liferay.com home page.
If any idea plz share!!

Regards
Juhi
Deepak R
RE: How to get Image Slide Show using Web Content in liferay6
2012/01/06 5:03
答え

Deepak R

ランク: New Member

投稿: 10

参加年月日: 2011/10/10

最近の投稿

Take a look at this site.
http://demo.marcofolio.net/bgimg_slideshow/
Developed in jquery.

Thank you,
Deepak
匿名
RE: How to get Image Slide Show using Web Content in liferay6
2012/01/06 11:33
答え

匿名

download the web content hook from liferay-plugins repository in there it has a carousel

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        <dynamic-element name='1' type='1' index-type='' repeatable='false'></dynamic-element>
11        <dynamic-element name='2' type='2' index-type='' repeatable='false'></dynamic-element>
12        <dynamic-element name='3' type='3' index-type='' repeatable='false'></dynamic-element>
13        <dynamic-element name='4' type='4' index-type='' repeatable='false'></dynamic-element>
14        <dynamic-element name='5' type='5' index-type='' repeatable='false'></dynamic-element>
15        <dynamic-element name='6' type='6' index-type='' repeatable='false'></dynamic-element>
16        <dynamic-element name='7' type='7' index-type='' repeatable='false'></dynamic-element>
17        <dynamic-element name='8' type='8' index-type='' repeatable='false'></dynamic-element>
18        <dynamic-element name='9' type='9' index-type='' repeatable='false'></dynamic-element>
19        <dynamic-element name='10' type='10' index-type='' repeatable='false'></dynamic-element>
20    </dynamic-element>
21    <dynamic-element name='height' type='text' index-type='' repeatable='false'>
22        <meta-data>
23            <entry name="displayAsTooltip"><![CDATA[false]]></entry>
24            <entry name="required"><![CDATA[true]]></entry>
25            <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>
26            <entry name="label"><![CDATA[Height]]></entry>
27            <entry name="predefinedValue"><![CDATA[]]></entry>
28        </meta-data>
29    </dynamic-element>
30    <dynamic-element name='width' type='text' index-type='' repeatable='false'>
31        <meta-data>
32            <entry name="displayAsTooltip"><![CDATA[false]]></entry>
33            <entry name="required"><![CDATA[true]]></entry>
34            <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>
35            <entry name="label"><![CDATA[Width]]></entry>
36            <entry name="predefinedValue"><![CDATA[]]></entry>
37        </meta-data>
38    </dynamic-element>
39    <dynamic-element name='content' type='text_area' index-type='text' repeatable='true'>
40        <meta-data>
41            <entry name="displayAsTooltip"><![CDATA[false]]></entry>
42            <entry name="required"><![CDATA[true]]></entry>
43            <entry name="instructions"><![CDATA[This is the content of this slide. To create more slides, click on the " " button]]></entry>
44            <entry name="label"><![CDATA[content]]></entry>
45            <entry name="predefinedValue"><![CDATA[]]></entry>
46        </meta-data>
47    </dynamic-element>
48</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>
Juhi Kumari
RE: How to get Image Slide Show using Web Content in liferay6
2012/01/08 22:50
答え

Juhi Kumari

ランク: Expert

投稿: 347

参加年月日: 2011/12/12

最近の投稿

Hi Bradley,

Thanks for response.
I tried this but only first image is displaying. I want all images should display like slidshow.

Regards
Juhi
Deepak R
RE: How to get Image Slide Show using Web Content in liferay6
2012/01/08 23:33
答え

Deepak R

ランク: New Member

投稿: 10

参加年月日: 2011/10/10

最近の投稿

Great. Working perfectly. Previously I had done image slider using custom portlet. But this one is so easy, also user can easily change image if needs to.

Thank you,
Deepak
Juhi Kumari
RE: How to get Image Slide Show using Web Content in liferay6
2012/01/09 0:47
答え

Juhi Kumari

ランク: Expert

投稿: 347

参加年月日: 2011/12/12

最近の投稿

Hi Bradley,

I found my mistake, now its working fine. Thanks a lot.

Regards
Juhi
Lanre Ogunbayo
RE: How to get Image Slide Show using Web Content in liferay6
2012/02/09 15:31
答え

Lanre Ogunbayo

ランク: New Member

投稿: 2

参加年月日: 2011/11/12

最近の投稿

Hello Juhi,
What was your mistake? I'm stuck on the first image...I suspect I've made the same mistake but I can't figure it out..
Thanks
Lanre Ogunbayo
RE: How to get Image Slide Show using Web Content in liferay6
2012/02/09 16:19
答え

Lanre Ogunbayo

ランク: New Member

投稿: 2

参加年月日: 2011/11/12

最近の投稿

Aha...found my mistake too!
Ben Chapman
RE: How to get Image Slide Show using Web Content in liferay6
2012/02/10 10:42
答え

Ben Chapman

ランク: New Member

投稿: 23

参加年月日: 2011/03/07

最近の投稿

Bradley,

Sorry, but I'm just not quite getting something here. The text that would be input in structure looks like the "alt" text or no image text. Is that true? In looking at the structure and template I don't see any reference to an image file, which led me to believe that the image would be located in the CSS (this seems to be how liferay does it at liferay.com). However, that doesn't see very end-user friendly and the script doesn't seem to be creating uniquely named entries in the classes anyway.

I must just not be getting something very fundamental. Could you point me in the right direction? Assume that we have a set of images image1.png, image2.png, and image3.png. How would I reference them?

Thank you for any guidance and sorry to be so clueless. We're using 6.0 EE.

Ben
Ben Chapman
RE: How to get Image Slide Show using Web Content in liferay6
2012/02/10 12:39
答え

Ben Chapman

ランク: New Member

投稿: 23

参加年月日: 2011/03/07

最近の投稿

I'm responding to my own post only because the answer was very obvious, but maybe it will help someone else in the future. Once you have configured the template and structure as above, create a new web content element. Do not put any text into the HTML area, just click on the image icon, then click on browse server and browse to the image that you want to use as the banner in the slider/carousel. Repeat as required.

I was over-thinking the issue.

Sorry for posting such a silly question!
Nagarjuna Gottimukkala
RE: How to get Image Slide Show using Web Content in liferay6
2012/05/11 4:52
答え

Nagarjuna Gottimukkala

ランク: New Member

投稿: 23

参加年月日: 2012/05/06

最近の投稿

Hi,
I am new to liferay. I am using liferay 6.1. i am using liferay plugins sdk. can you please tell me in which files i need to add this code?

Thanking You,
Nagarjuna Gottimukkala.
Kumar Bonagiri
RE: How to get Image Slide Show using Web Content in liferay6
2012/05/14 1:03
答え

Kumar Bonagiri

ランク: Junior Member

投稿: 35

参加年月日: 2012/04/22

最近の投稿

Hi Bradley,

From where i have to download the web content hook from liferay-plugins repository in there it has a carousel

please provide me the URL and the Plugin name

Regards,
Kumar
Vasanth Kumar
RE: How to get Image Slide Show using Web Content in liferay6
2012/08/06 22:26
答え

Vasanth Kumar

ランク: New Member

投稿: 8

参加年月日: 2012/07/09

最近の投稿

Deepak R:
Great. Working perfectly. Previously I had done image slider using custom portlet. But this one is so easy, also user can easily change image if needs to.

Thank you,
Deepak



Hi Deepak/Juhi/Lanre,

I am trying to implement portlet with images(need to get from database, physical path should be provided in Demoticon having Hyperlink & video image. On click of Image, description/content should be opened in new portlet.

Can you plz share the image slide show stuff which you guys tried with steps.

I am using liferay6.1ce.

Appreciate you help !!!

Thanks
Vasanth
Matthew Dixon
RE: How to get Image Slide Show using Web Content in liferay6
2012/09/03 4:58
答え

Matthew Dixon

ランク: New Member

投稿: 7

参加年月日: 2012/07/19

最近の投稿

Just to confirm that Ben's description above works fine in 6.1 CE. To clarify, you

1) set up the template code above as a web content template
2) set up the structure code above as a web content structure
3) create a web content item into which you add the images you want to slideshow
4) display that web content item using the web content portlet.

The only other thing is that each image is added into a separate "slide" in the web content item. So for the second and subsequent images, you have to click on the green plus sign above and to the right of the rich text editor, adding another blank slide (with its own editor) into which you add the image.

Matt
Marco Faustinelli
RE: How to get Image Slide Show using Web Content in liferay6
2012/09/11 11:39
答え

Marco Faustinelli

ランク: New Member

投稿: 1

参加年月日: 2012/09/10

最近の投稿

Lanre Ogunbayo:
Aha...found my mistake too!


Neither of you writes down what the mistake was like.

In my case I discovered that the content was saved with just one image. I am sure I had put all of them inside, but certainly something went wrong during the save.

Cheers,
Mradul Ashok
RE: How to get Image Slide Show using Web Content in liferay6
2012/10/29 4:16
答え

Mradul Ashok

ランク: New Member

投稿: 3

参加年月日: 2012/10/28

最近の投稿

Marco Faustinelli:
Lanre Ogunbayo:
Aha...found my mistake too!


Neither of you writes down what the mistake was like.

In my case I discovered that the content was saved with just one image. I am sure I had put all of them inside, but certainly something went wrong during the save.

Cheers,



Hey but in my liferay 6.0.6, after creating the template and then the structure, when i go to use them in desired web-content its not reading the template. that i created from control panel, however structure is being read, please help me out asap.

Regards-
Mradul
Nikhil Nishchal
RE: How to get Image Slide Show using Web Content in liferay6
2012/10/29 4:29
答え

Nikhil Nishchal

ランク: Regular Member

投稿: 136

参加年月日: 2012/06/21

最近の投稿

Hello Marco,
Did u choose structure while creating template.
>create structure
>create template (here u can choose the structure for which template is created)
and then at the time of creating webontent when you, choose structure.
You will get either specific template selected or option to select them (in case of multiple template for same structure ).
Mradul Ashok
RE: How to get Image Slide Show using Web Content in liferay6
2012/10/29 5:26
答え

Mradul Ashok

ランク: New Member

投稿: 3

参加年月日: 2012/10/28

最近の投稿

Hey but i am not getting structure choosing facility while creating template in LIferay 6.0.6

Please help....
Nikhil Nishchal
RE: How to get Image Slide Show using Web Content in liferay6
2012/10/29 5:32
答え

Nikhil Nishchal

ランク: Regular Member

投稿: 136

参加年月日: 2012/06/21

最近の投稿

In case of template creation there is button below description for "Structure ".
clicking on that u can choose structure from opened popup window.
Mradul Ashok
RE: How to get Image Slide Show using Web Content in liferay6
2012/10/29 7:24
答え

Mradul Ashok

ランク: New Member

投稿: 3

参加年月日: 2012/10/28

最近の投稿

Hey thanks for responding soon, but i am still stuck that my image show is running but images are not being displayed, i have browse them n the web content, but when i go to see them after publishing, i can't see them, can i be helped somemore.
Vishal Panchal
RE: How to get Image Slide Show using Web Content in liferay6
2013/04/17 21:03
答え

Vishal Panchal

ランク: Expert

投稿: 280

参加年月日: 2012/05/20

最近の投稿

Hello Bradley ,

This is the easiest one.
Made my day.emoticon


Thanks You,
Vishal
Colton3310 Martin
RE: How to get Image Slide Show using Web Content in liferay6
2013/05/06 1:21
答え

Colton3310 Martin

ランク: New Member

投稿: 4

参加年月日: 2013/04/26

最近の投稿

Which one is the easiest one?
parikshit sharma
RE: How to get Image Slide Show using Web Content in liferay6
2013/05/06 2:28
答え

parikshit sharma

ランク: Junior Member

投稿: 48

参加年月日: 2012/10/18

最近の投稿

Hi,
How could I make images slide from left to right or vice-versa in slide show?
Colton3310 Martin
RE: How to get Image Slide Show using Web Content in liferay6
2013/05/06 19:50
答え

Colton3310 Martin

ランク: New Member

投稿: 4

参加年月日: 2013/04/26

最近の投稿

Maybe it has the option. You should find it our.
Vishal Panchal
RE: How to get Image Slide Show using Web Content in liferay6
2013/05/06 21:06
答え

Vishal Panchal

ランク: Expert

投稿: 280

参加年月日: 2012/05/20

最近の投稿

Colton3310 Martin:
Which one is the easiest one?


Hi Colton,

The easiest one here is a imageslide which you will find on liferay's home page.
As per Bradley's privious post we have a readymade structure and template for this, which is also available on liferay called carousel (download the web content hook from liferay-plugins repository).

After deploying this hook you will have one structure and template available in your webcontent , apply this you will able to select your desired images , size in which you want to display a slider and a time interval of image change.

Further you will be able to download this hook from liferay and also as an alternative you may download it from http://www.liferay.com/marketplace/-/mp/application/18455438

Go through this link for more explanation.
http://blogs.xtivia.com/home/-/blogs/carousel-portlet

Please feel free to ask if you need any more information in same regard.emoticon

Have a nice day.!

Best Regards,
Vishal Panchal
parikshit sharma
RE: How to get Image Slide Show using Web Content in liferay6
2013/05/07 0:39
答え

parikshit sharma

ランク: Junior Member

投稿: 48

参加年月日: 2012/10/18

最近の投稿

Colton3310 Martin:
Maybe it has the option. You should find it our.


Didn't find such option ..that's why posted the comment,if you have any then share it ......