留言板
Image Carousel
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
thanks
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
thanks
Are you asking if you can use alloy ui tags in velocity templates?
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
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