Forums

Home » Alloy UI » English

Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
gordon daniels
Image Carousel
February 7, 2013 11:32 AM
Answer

gordon daniels

Rank: Liferay Master

Posts: 735

Join Date: August 23, 2008

Recent Posts

Hi,

I am trying to learn AUI and have a question. Is it possible to take the image carousel code for example, and create web content, structure, and template within the control panel or do I need to do this at the file level?

Might seem like a dumb question emoticon

thanks
gordon daniels
RE: Image Carousel
February 10, 2013 5:24 PM
Answer

gordon daniels

Rank: Liferay Master

Posts: 735

Join Date: August 23, 2008

Recent Posts

bump: sure could use some advice here.
Hitoshi Ozawa
RE: Image Carousel
February 10, 2013 6:08 PM
Answer

Hitoshi Ozawa

Rank: Liferay Legend

Posts: 7949

Join Date: March 23, 2010

Recent Posts

Are you asking if you can use alloy ui tags in velocity templates?
gordon daniels
RE: Image Carousel
February 11, 2013 6:19 AM
Answer

gordon daniels

Rank: Liferay Master

Posts: 735

Join Date: August 23, 2008

Recent Posts

Hi Hitoshi: yes that is what I am asking.
iqbal ahmed
RE: Image Carousel
March 19, 2013 6:31 AM
Answer

iqbal ahmed

Rank: New Member

Posts: 24

Join Date: April 18, 2012

Recent Posts

Hi,

definitely we can use alloy UI tags in Velocity Template. below is the velocity template code which i have written for carosel.

#set($imageWidth = $maxImageWidth.Data)
#set($imageHeight = $maxImageHeight.Data)
#set($imageWidthPx = $imageWidth + "px")
#set($imageHeightPx = $imageHeight + "px")
#set($interval = $timeInterval.Data)
#set($activeIndexValue = $activeIndex.Data)

<style type="text/css">
.aui-carousel {
-moz-user-select: none;
margin: 20px 0;
}
.aui-carousel-item {
border-radius: 10px 10px 10px 10px;
text-indent: -9999em;
}
.aui-carousel li {
margin: 0 !important;
}
</style>

#set($totalCount = 0)
<div id="carousal">
#foreach($imageElement in $ImageElementSet.getSiblings())
#if($imageElement.image.getData() != "")
#if($imageElement.linkUrl.getData() != "")
<a href="$imageElement.linkUrl.Data">
<img class="aui-carousel-item" src="$imageElement.image.Data" height="$imageHeightPx" width="$imageWidthPx" />
</a>
#else
<img class="aui-carousel-item" src="$imageElement.image.Data" height="$imageHeightPx" width="$imageWidthPx" />
#end
#set($totalCount = $totalCount + 1)
#end
#end
</div>

#if($totalCount > 0)
<script>
AUI().ready('aui-carousel', function(A)
{
var carousel = new A.Carousel(
{
contentBox: '#carousal',
activeIndex: $activeIndexValue,
intervalTime: $interval,
width: $imageWidth,
height: $imageHeight
}).render();
});
</script>
#end
gordon daniels
RE: Image Carousel
March 19, 2013 6:45 AM
Answer

gordon daniels

Rank: Liferay Master

Posts: 735

Join Date: August 23, 2008

Recent Posts

iqbal: thank you for your reply. This is very helpful to learn from.

thanks again