All the above three words are confusing. I want to mean that using liferay CMS as well
as alloy (alloy is javascript framework by Liferay) how can we implement CAROUSEL?
Wow what does it mean by the fancy word carousel? Let’s do a little Wikipedia search in
internet. Hit the following URL
www.en.wikipedia.org/wiki/Carousel
If we go through the above URL it says that carousel is an amusement ride consisting of
a rotating circular platform with seats for riders.
So what’s my intention? In daily life we always see carousel in web page on the top of a
main page. To get actual imagination of carousel lets visit the URL www.liferay.com and
you will see the following on the top of the page.
That’s there are some images which will be rotating periodically one after another. This
is the effect we termed as carousel which is borrowed from ancient age. Got idea? Let’s
do the implementation.
How am I going to implement it?
1. Create Structure
2. Create template
3. Create web content
4. Show the web content in “Web Content Display” Portlet
Creating Structure:
Launch your Liferay Portal. Go to the control panel and add one structure. In our
structure we are going to use only one component only. And we will use “Image Gallary”
from control panel. I have created the structure as bellow.
You can do the same thing by copying the following in your launch editor.
Creating web content:
Now you can create the web content which should be associated with the above
template. Upload multiple images into image gallery and after that add those images in
web content too.
Show the CROUSEL:
Add a web content display portlet in any one of the page and select the above newly
created web content.
as alloy (alloy is javascript framework by Liferay) how can we implement CAROUSEL?
Wow what does it mean by the fancy word carousel? Let’s do a little Wikipedia search in
internet. Hit the following URL
www.en.wikipedia.org/wiki/Carousel
If we go through the above URL it says that carousel is an amusement ride consisting of
a rotating circular platform with seats for riders.
So what’s my intention? In daily life we always see carousel in web page on the top of a
main page. To get actual imagination of carousel lets visit the URL www.liferay.com and
you will see the following on the top of the page.
is the effect we termed as carousel which is borrowed from ancient age. Got idea? Let’s
do the implementation.
How am I going to implement it?
1. Create Structure
2. Create template
3. Create web content
4. Show the web content in “Web Content Display” Portlet
Creating Structure:
Launch your Liferay Portal. Go to the control panel and add one structure. In our
structure we are going to use only one component only. And we will use “Image Gallary”
from control panel. I have created the structure as bellow.
| <root> <dynamic-element name='photo' type='image_gallery' index-type='' repeatable='true'></dynamic- element> </root> |
Here I used the element as repeatable. So we need to iterate the same in template.
Creating template:
Add the following in your launch editor.
Creating template:
Add the following in your launch editor.
| <html> <body> <div id="wrapper"> <div id="demo"> #foreach($selection in $photo.getSiblings()) <div style="background: url($selection.getData()); width: 940px; height: 253px;"></div> #end </div> </div> <script type="text/javascript" charset="utf-8"> AUI().ready('aui-carousel', function(A) { var component = new A.Carousel( { intervalTime: 1, contentBox: '#demo', activeIndex: 'rand', height: 254, width: 940 } ); component.render(); }); </script> </body> </html> |
Now you can create the web content which should be associated with the above
template. Upload multiple images into image gallery and after that add those images in
web content too.
Show the CROUSEL:
Add a web content display portlet in any one of the page and select the above newly
created web content.
No comments:
Post a Comment