论坛

主页 » Alloy UI » English

组合视图 统一视图 树状图
讨论主题 [ 上一个 | 下一个 ]
toggle
gordon daniels
Image Carousel
2013年2月7日 上午11:32
答复

gordon daniels

等级: Liferay Master

帖子: 670

加入日期: 2008年8月23日

最近的帖子

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
2013年2月10日 下午5:24
答复

gordon daniels

等级: Liferay Master

帖子: 670

加入日期: 2008年8月23日

最近的帖子

bump: sure could use some advice here.
Hitoshi Ozawa
RE: Image Carousel
2013年2月10日 下午6:08
答复

Hitoshi Ozawa

等级: Liferay Legend

帖子: 7990

加入日期: 2010年3月23日

最近的帖子

Are you asking if you can use alloy ui tags in velocity templates?
gordon daniels
RE: Image Carousel
2013年2月11日 上午6:19
答复

gordon daniels

等级: Liferay Master

帖子: 670

加入日期: 2008年8月23日

最近的帖子

Hi Hitoshi: yes that is what I am asking.
iqbal ahmed
RE: Image Carousel
2013年3月19日 上午6:31
答复

iqbal ahmed

等级: New Member

帖子: 23

加入日期: 2012年4月18日

最近的帖子

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
2013年3月19日 上午6:45
答复

gordon daniels

等级: Liferay Master

帖子: 670

加入日期: 2008年8月23日

最近的帖子

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

thanks again