Jack Bakker 11 Years Ago Interesting ... I still prefer jquery rotators and continue to include jquery in tomcat*/ROOT/html/js/jquery and then reference in theme; other aui tools are certainly VERY attractive ; great that Liferay can support each and more Please sign in to reply. Reply as... Cancel David H Nebinger Jack Bakker 11 Years Ago The one thing to keep in mind, Jack, is that Liferay will load AUI anyway (otherwise the portal is not functional). Adding jQuery will result in a larger browser footprint on the client side.Sure you get the effects you're looking for and it will work in your test environment, but end users may balk at the larger memory requirements of their browser w/o understanding why it is needed... Please sign in to reply. Reply as... Cancel
David H Nebinger Jack Bakker 11 Years Ago The one thing to keep in mind, Jack, is that Liferay will load AUI anyway (otherwise the portal is not functional). Adding jQuery will result in a larger browser footprint on the client side.Sure you get the effects you're looking for and it will work in your test environment, but end users may balk at the larger memory requirements of their browser w/o understanding why it is needed... Please sign in to reply. Reply as... Cancel
Jack Bakker 11 Years Ago David, are you implying that all aui gets loaded with each page hit ? I love aui for many things (yes, love), but also might reference one or more versions of jquery in perhaps one or more themes, but then load jquery addons via Liveray Page level JavaScript 1, 2,3 etc. Please sign in to reply. Reply as... Cancel David H Nebinger Jack Bakker 11 Years Ago AUI uses selective loading (only loads modules which are used on the page), so it doesn't load everything and the kitchen sink. But you do get the core AUI, just like when you load jQuery you get the jQuery core.I wouldn't recommend using different versions of jQuery (as you are adding more client browser resource requirements), nor would I recommend loading jQuery on a portlet level (by specifying in liferay-portlet.xml, for example).If you are planning to use jQuery in your portlets, I'd stick with a single version of jQuery loaded at the theme level. Please sign in to reply. Reply as... Cancel
David H Nebinger Jack Bakker 11 Years Ago AUI uses selective loading (only loads modules which are used on the page), so it doesn't load everything and the kitchen sink. But you do get the core AUI, just like when you load jQuery you get the jQuery core.I wouldn't recommend using different versions of jQuery (as you are adding more client browser resource requirements), nor would I recommend loading jQuery on a portlet level (by specifying in liferay-portlet.xml, for example).If you are planning to use jQuery in your portlets, I'd stick with a single version of jQuery loaded at the theme level. Please sign in to reply. Reply as... Cancel
Jack Bakker 11 Years Ago loading multiple jquery versions is pretty straight forward ; also is load of addons requiring specific versions Please sign in to reply. Reply as... Cancel
Bradley Wood 11 Years Ago Here is a sliding carousel that Robert and I made by using Alloyhttp://codepen.io/randombrad/pen/cDjvB Please sign in to reply. Reply as... Cancel Bradley Wood Bradley Wood Luis Mas 10 Years Ago It would be great if you add to the sample some text content inside the image for demoing that something like this http://bqworks.com/products/advanced-slider/mixed.html can be done with AlloyUI carousel. Please sign in to reply. Reply as... Cancel chirag @ India 10 Years Ago Too good Using this i made web-content Carousel.In that we insert only id of web-content & then it display whole content instead of image check it Please sign in to reply. Reply as... Cancel chirag @ India chirag @ India 10 Years Ago You can check at http://liferay.medicalassociation.in/home Please sign in to reply. Reply as... Cancel guest Here 10 Years Ago Nice tutorial. I'm trying to implement it, and it works fine. Except for the images hyperlinks:- liferay assigns the site path + the provided linkUrl as the hyperlinnk. So if the image has a url (outside the portal), say, www.urlhere.com, liferay gives: www.siteurl.com/www.urlhere.com.How can I go around this problem?Thanks! Please sign in to reply. Reply as... Cancel Tejas Kanani guest Here 10 Years Ago Try giving complete url including http in url textbox.So give http://www.urlhere.com instead of www.urlhere.com. It should resolve your problem. Please sign in to reply. Reply as... Cancel guest Here 10 Years Ago Thank you Tejas, thad did the trick! Please sign in to reply. Reply as... Cancel Riley Pickerl 10 Years Ago On the liferay homepage the carousel is responsive. Do you have the js to do this or is this something that is handled by AUI? Thanks Please sign in to reply. Reply as... Cancel Tejas Kanani Riley Pickerl 10 Years Ago Riley, Check this out it is something you are looking for.http://codepen.io/randombrad/pen/cDjvB Please sign in to reply. Reply as... Cancel Kiran Yalavali Tejas Kanani 8 Years Ago Hi Tejas Kanani,How to add title and description on carousel image slide show in web content .Please help me. Please sign in to reply. Reply as... Cancel V D L 10 Years Ago hi tejas..i followed your steps exactly..i created structure and tenplate with your code( no chane)..but it is showing only first image ...it is not sliding..sliding bar also not visible...and on left side of top it is displaying this.ageWidth = 600) Please sign in to reply. Reply as... Cancel V D L 10 Years Ago sorry tejas... mistake was in copying code.. now it is working fine..thanks for this blog Please sign in to reply. Reply as... Cancel Tejas Kanani V D L 10 Years Ago Glad to know that it helped you. Please sign in to reply. Reply as... Cancel siddhant jain Tejas Kanani 10 Years Ago its not working in LR 6.2 Please sign in to reply. Reply as... Cancel Tejas Kanani siddhant jain 10 Years Ago Thanks Siddhant for pointing out. I've also attached code for 6.2 now. Try that out, it should work in 6.2. Please sign in to reply. Reply as... Cancel Philip Teagle Tejas Kanani 10 Years Ago Hi Tejas,I am still not able to get this to work in 6.2. Is it required to load the seed and CSS files or is that done by the base 6.2 product? If so, where should this be done? In the web content?<script src="http://cdn.alloyui.com/2.0.0/aui/aui-min.js"></script><link href="http://cdn.alloyui.com/2.0.0/aui-css/css/bootstrap.min.css" rel="stylesheet"></link> Please sign in to reply. Reply as... Cancel Tejas Kanani Philip Teagle 10 Years Ago Hi Philip,As it's using Alloy UI's Carousel function itself, all required css & js should be there in Liferay 6.2 theme. No need to include any more css & js specific to display carousel. Try by verifying the code with Liferay 6.2 default(Classic) theme. And if you are using your custom theme, make sure it properly loads aui js & css. Please sign in to reply. Reply as... Cancel Marco Moncalvo 10 Years Ago For Liferay 6.2 / Responsive Carousel Structure:<root available-locales="es_ES" default-locale="es_ES"> <dynamic-element dataType="string" indexType="" name="activeIndex" readOnly="false" repeatable="false" required="false" showLabel="true" type="text" width="small"> <meta-data locale="es_ES"> <entry name="label"> <![CDATA[activeIndex]]> </entry> <entry name="predefinedValue"> <![CDATA[0]]> </entry> <entry name="tip"> <![CDATA[Index of the first visible item of the carousel]]> </entry> </meta-data> </dynamic-element> <dynamic-element dataType="string" indexType="" name="timeInterval" readOnly="false" repeatable="false" required="false" showLabel="true" type="text" width="small"> <meta-data locale="es_ES"> <entry name="label"> <![CDATA[timeInterval]]> </entry> <entry name="predefinedValue"> <![CDATA[0.75]]> </entry> <entry name="tip"> <![CDATA[Interval time in seconds between an item transition.]]> </entry> </meta-data> </dynamic-element> <dynamic-element dataType="image" fieldNamespace="wcm" indexType="keyword" name="image" readOnly="false" repeatable="true" required="false" showLabel="true" type="wcm-image" width=""> <dynamic-element dataType="string" indexType="keyword" name="linkUrl" readOnly="false" repeatable="false" required="false" showLabel="true" type="text" width="small"> <meta-data locale="es_ES"> <entry name="label"> <![CDATA[linkUrl]]> </entry> <entry name="predefinedValue"> <![CDATA[]]> </entry> <entry name="tip"> <![CDATA[]]> </entry> </meta-data> </dynamic-element> <meta-data locale="es_ES"> <entry name="label"> <![CDATA[image]]> </entry> <entry name="predefinedValue"> <![CDATA[]]> </entry> <entry name="tip"> <![CDATA[]]> </entry> </meta-data> </dynamic-element></root>Template:#set($interval = $timeInterval.Data)#set($activeIndexValue = $activeIndex.Data)<style type="text/css">.aui .carousel { margin-bottom: 0;}.auiCarousel .aui-carousel-item { height: auto; position: relative; display: none;}.auiCarousel .carousel-item img { width: 100%; height: auto;}.auiCarousel .carousel-item-active { display: block;}</style>#set($totalCount = 0)<div class="auiCarousel"> #foreach($imageElement in $image.getSiblings()) <div class="aui-carousel-item"> #if($imageElement.getData() != "") #if($imageElement.linkUrl.getData() != "") <a href="$imageElement.linkUrl.Data"> <img src="$imageElement.Data" /> </a> #else <img src="$imageElement.Data" /> #end #set($totalCount = $totalCount + 1) #end </div> #end</div>#if($totalCount > 0)<script>// Defining Carousel Module"YUI().use('aui-carousel', function(Y) { new Y.Carousel({ contentBox: '.auiCarousel', activeIndex: $activeIndexValue, intervalTime: $interval, }).render();});</script>#end Please sign in to reply. Reply as... Cancel (You) 9 Years Ago [...] AUI Carousel using WebContent Structure/Template - Blog | Liferay [...] Read More Please sign in to reply. Reply as... Cancel Aaron Paxson 9 Years Ago Hmmm... very odd. The 6.2 code doesn't seem to work. The carousel loads, and I can see the carousel controls changing, but no images show and no link. When doing an inspection, the link the images point to works fine. Please sign in to reply. Reply as... Cancel Aaron Paxson Aaron Paxson 9 Years Ago Nevermind. I used Marco's CSS Style in the template and works fine. Please sign in to reply. Reply as... Cancel Shahid Khan 9 Years Ago If I want to put ‘sequence’ and ‘alternate text’ fields in ImageElementSet then what modifications I need to make here? Please sign in to reply. Reply as... Cancel Shahid Khan 9 Years Ago I am able to display it after logged in. but this Carousel is not visible for Guest user.Can anybody tell me how to overcome this problem?i tried all basic permissions and settings but still no use Please sign in to reply. Reply as... Cancel Sujeet Rai 9 Years Ago Hi Tejas,Same issue. href" " not responding.when i am giving link "http://www.google.com" in linkUrl then, that image also disappear. Please sign in to reply. Reply as... Cancel Sujeet Rai Sujeet Rai 9 Years Ago Using Liferay 6.2 Please sign in to reply. Reply as... Cancel Valentin Rabollet 9 Years Ago Hi Tejas,I'm a newbie using CE 62 GA2 and I ve created the structure and the template with the scripts above. Suprisingly, the Web Content Display show me this : -------------------------------------#set($imageWidth = $maxImageWidth.Data) #set($imageHeight = $maxImageHeight.Data) #set($imageWidthPx = $imageWidth + "px") #set($imageHeightPx = $imageHeight + "px") #set($interval = $timeInterval.Data) #set($activeIndexValue = $activeIndex.Data) #set($totalCount = 0)#foreach($imageElement in $image.getSiblings()) #if($imageElement.getData() != "") #if($imageElement.linkUrl.getData() != "") #else #end #set($totalCount = $totalCount + 1) #end #end#if($totalCount > 0) #end ------------------------------------------------------Did I miss something? Must I load Alloy UI somewhere first?Thanks for your help! Please sign in to reply. Reply as... Cancel Ved Mishra 7 Years Ago can it be responsive ? because i used this one and its not responsive Please sign in to reply. Reply as... Cancel Mohamed Sayed 7 Years Ago can i create a template like this for blogs portlet please advice Please sign in to reply. Reply as... Cancel Mohamed Sayed 7 Years Ago can i create a template like this for blogs portlet please advice Please sign in to reply. Reply as... Cancel William Sousa 7 Years Ago Hey guys, How can I implement this code using Liferay7?There are any example or tutorial for Carousel in Liferay7?Best regards! Please sign in to reply. Reply as... Cancel
Bradley Wood Bradley Wood Luis Mas 10 Years Ago It would be great if you add to the sample some text content inside the image for demoing that something like this http://bqworks.com/products/advanced-slider/mixed.html can be done with AlloyUI carousel. Please sign in to reply. Reply as... Cancel chirag @ India 10 Years Ago Too good Using this i made web-content Carousel.In that we insert only id of web-content & then it display whole content instead of image check it Please sign in to reply. Reply as... Cancel chirag @ India chirag @ India 10 Years Ago You can check at http://liferay.medicalassociation.in/home Please sign in to reply. Reply as... Cancel guest Here 10 Years Ago Nice tutorial. I'm trying to implement it, and it works fine. Except for the images hyperlinks:- liferay assigns the site path + the provided linkUrl as the hyperlinnk. So if the image has a url (outside the portal), say, www.urlhere.com, liferay gives: www.siteurl.com/www.urlhere.com.How can I go around this problem?Thanks! Please sign in to reply. Reply as... Cancel Tejas Kanani guest Here 10 Years Ago Try giving complete url including http in url textbox.So give http://www.urlhere.com instead of www.urlhere.com. It should resolve your problem. Please sign in to reply. Reply as... Cancel guest Here 10 Years Ago Thank you Tejas, thad did the trick! Please sign in to reply. Reply as... Cancel Riley Pickerl 10 Years Ago On the liferay homepage the carousel is responsive. Do you have the js to do this or is this something that is handled by AUI? Thanks Please sign in to reply. Reply as... Cancel Tejas Kanani Riley Pickerl 10 Years Ago Riley, Check this out it is something you are looking for.http://codepen.io/randombrad/pen/cDjvB Please sign in to reply. Reply as... Cancel Kiran Yalavali Tejas Kanani 8 Years Ago Hi Tejas Kanani,How to add title and description on carousel image slide show in web content .Please help me. Please sign in to reply. Reply as... Cancel V D L 10 Years Ago hi tejas..i followed your steps exactly..i created structure and tenplate with your code( no chane)..but it is showing only first image ...it is not sliding..sliding bar also not visible...and on left side of top it is displaying this.ageWidth = 600) Please sign in to reply. Reply as... Cancel V D L 10 Years Ago sorry tejas... mistake was in copying code.. now it is working fine..thanks for this blog Please sign in to reply. Reply as... Cancel Tejas Kanani V D L 10 Years Ago Glad to know that it helped you. Please sign in to reply. Reply as... Cancel siddhant jain Tejas Kanani 10 Years Ago its not working in LR 6.2 Please sign in to reply. Reply as... Cancel Tejas Kanani siddhant jain 10 Years Ago Thanks Siddhant for pointing out. I've also attached code for 6.2 now. Try that out, it should work in 6.2. Please sign in to reply. Reply as... Cancel Philip Teagle Tejas Kanani 10 Years Ago Hi Tejas,I am still not able to get this to work in 6.2. Is it required to load the seed and CSS files or is that done by the base 6.2 product? If so, where should this be done? In the web content?<script src="http://cdn.alloyui.com/2.0.0/aui/aui-min.js"></script><link href="http://cdn.alloyui.com/2.0.0/aui-css/css/bootstrap.min.css" rel="stylesheet"></link> Please sign in to reply. Reply as... Cancel Tejas Kanani Philip Teagle 10 Years Ago Hi Philip,As it's using Alloy UI's Carousel function itself, all required css & js should be there in Liferay 6.2 theme. No need to include any more css & js specific to display carousel. Try by verifying the code with Liferay 6.2 default(Classic) theme. And if you are using your custom theme, make sure it properly loads aui js & css. Please sign in to reply. Reply as... Cancel Marco Moncalvo 10 Years Ago For Liferay 6.2 / Responsive Carousel Structure:<root available-locales="es_ES" default-locale="es_ES"> <dynamic-element dataType="string" indexType="" name="activeIndex" readOnly="false" repeatable="false" required="false" showLabel="true" type="text" width="small"> <meta-data locale="es_ES"> <entry name="label"> <![CDATA[activeIndex]]> </entry> <entry name="predefinedValue"> <![CDATA[0]]> </entry> <entry name="tip"> <![CDATA[Index of the first visible item of the carousel]]> </entry> </meta-data> </dynamic-element> <dynamic-element dataType="string" indexType="" name="timeInterval" readOnly="false" repeatable="false" required="false" showLabel="true" type="text" width="small"> <meta-data locale="es_ES"> <entry name="label"> <![CDATA[timeInterval]]> </entry> <entry name="predefinedValue"> <![CDATA[0.75]]> </entry> <entry name="tip"> <![CDATA[Interval time in seconds between an item transition.]]> </entry> </meta-data> </dynamic-element> <dynamic-element dataType="image" fieldNamespace="wcm" indexType="keyword" name="image" readOnly="false" repeatable="true" required="false" showLabel="true" type="wcm-image" width=""> <dynamic-element dataType="string" indexType="keyword" name="linkUrl" readOnly="false" repeatable="false" required="false" showLabel="true" type="text" width="small"> <meta-data locale="es_ES"> <entry name="label"> <![CDATA[linkUrl]]> </entry> <entry name="predefinedValue"> <![CDATA[]]> </entry> <entry name="tip"> <![CDATA[]]> </entry> </meta-data> </dynamic-element> <meta-data locale="es_ES"> <entry name="label"> <![CDATA[image]]> </entry> <entry name="predefinedValue"> <![CDATA[]]> </entry> <entry name="tip"> <![CDATA[]]> </entry> </meta-data> </dynamic-element></root>Template:#set($interval = $timeInterval.Data)#set($activeIndexValue = $activeIndex.Data)<style type="text/css">.aui .carousel { margin-bottom: 0;}.auiCarousel .aui-carousel-item { height: auto; position: relative; display: none;}.auiCarousel .carousel-item img { width: 100%; height: auto;}.auiCarousel .carousel-item-active { display: block;}</style>#set($totalCount = 0)<div class="auiCarousel"> #foreach($imageElement in $image.getSiblings()) <div class="aui-carousel-item"> #if($imageElement.getData() != "") #if($imageElement.linkUrl.getData() != "") <a href="$imageElement.linkUrl.Data"> <img src="$imageElement.Data" /> </a> #else <img src="$imageElement.Data" /> #end #set($totalCount = $totalCount + 1) #end </div> #end</div>#if($totalCount > 0)<script>// Defining Carousel Module"YUI().use('aui-carousel', function(Y) { new Y.Carousel({ contentBox: '.auiCarousel', activeIndex: $activeIndexValue, intervalTime: $interval, }).render();});</script>#end Please sign in to reply. Reply as... Cancel (You) 9 Years Ago [...] AUI Carousel using WebContent Structure/Template - Blog | Liferay [...] Read More Please sign in to reply. Reply as... Cancel Aaron Paxson 9 Years Ago Hmmm... very odd. The 6.2 code doesn't seem to work. The carousel loads, and I can see the carousel controls changing, but no images show and no link. When doing an inspection, the link the images point to works fine. Please sign in to reply. Reply as... Cancel Aaron Paxson Aaron Paxson 9 Years Ago Nevermind. I used Marco's CSS Style in the template and works fine. Please sign in to reply. Reply as... Cancel Shahid Khan 9 Years Ago If I want to put ‘sequence’ and ‘alternate text’ fields in ImageElementSet then what modifications I need to make here? Please sign in to reply. Reply as... Cancel Shahid Khan 9 Years Ago I am able to display it after logged in. but this Carousel is not visible for Guest user.Can anybody tell me how to overcome this problem?i tried all basic permissions and settings but still no use Please sign in to reply. Reply as... Cancel Sujeet Rai 9 Years Ago Hi Tejas,Same issue. href" " not responding.when i am giving link "http://www.google.com" in linkUrl then, that image also disappear. Please sign in to reply. Reply as... Cancel Sujeet Rai Sujeet Rai 9 Years Ago Using Liferay 6.2 Please sign in to reply. Reply as... Cancel Valentin Rabollet 9 Years Ago Hi Tejas,I'm a newbie using CE 62 GA2 and I ve created the structure and the template with the scripts above. Suprisingly, the Web Content Display show me this : -------------------------------------#set($imageWidth = $maxImageWidth.Data) #set($imageHeight = $maxImageHeight.Data) #set($imageWidthPx = $imageWidth + "px") #set($imageHeightPx = $imageHeight + "px") #set($interval = $timeInterval.Data) #set($activeIndexValue = $activeIndex.Data) #set($totalCount = 0)#foreach($imageElement in $image.getSiblings()) #if($imageElement.getData() != "") #if($imageElement.linkUrl.getData() != "") #else #end #set($totalCount = $totalCount + 1) #end #end#if($totalCount > 0) #end ------------------------------------------------------Did I miss something? Must I load Alloy UI somewhere first?Thanks for your help! Please sign in to reply. Reply as... Cancel Ved Mishra 7 Years Ago can it be responsive ? because i used this one and its not responsive Please sign in to reply. Reply as... Cancel Mohamed Sayed 7 Years Ago can i create a template like this for blogs portlet please advice Please sign in to reply. Reply as... Cancel Mohamed Sayed 7 Years Ago can i create a template like this for blogs portlet please advice Please sign in to reply. Reply as... Cancel William Sousa 7 Years Ago Hey guys, How can I implement this code using Liferay7?There are any example or tutorial for Carousel in Liferay7?Best regards! Please sign in to reply. Reply as... Cancel
Luis Mas 10 Years Ago It would be great if you add to the sample some text content inside the image for demoing that something like this http://bqworks.com/products/advanced-slider/mixed.html can be done with AlloyUI carousel. Please sign in to reply. Reply as... Cancel
chirag @ India 10 Years Ago Too good Using this i made web-content Carousel.In that we insert only id of web-content & then it display whole content instead of image check it Please sign in to reply. Reply as... Cancel chirag @ India chirag @ India 10 Years Ago You can check at http://liferay.medicalassociation.in/home Please sign in to reply. Reply as... Cancel
chirag @ India chirag @ India 10 Years Ago You can check at http://liferay.medicalassociation.in/home Please sign in to reply. Reply as... Cancel
guest Here 10 Years Ago Nice tutorial. I'm trying to implement it, and it works fine. Except for the images hyperlinks:- liferay assigns the site path + the provided linkUrl as the hyperlinnk. So if the image has a url (outside the portal), say, www.urlhere.com, liferay gives: www.siteurl.com/www.urlhere.com.How can I go around this problem?Thanks! Please sign in to reply. Reply as... Cancel Tejas Kanani guest Here 10 Years Ago Try giving complete url including http in url textbox.So give http://www.urlhere.com instead of www.urlhere.com. It should resolve your problem. Please sign in to reply. Reply as... Cancel
Tejas Kanani guest Here 10 Years Ago Try giving complete url including http in url textbox.So give http://www.urlhere.com instead of www.urlhere.com. It should resolve your problem. Please sign in to reply. Reply as... Cancel
guest Here 10 Years Ago Thank you Tejas, thad did the trick! Please sign in to reply. Reply as... Cancel
Riley Pickerl 10 Years Ago On the liferay homepage the carousel is responsive. Do you have the js to do this or is this something that is handled by AUI? Thanks Please sign in to reply. Reply as... Cancel Tejas Kanani Riley Pickerl 10 Years Ago Riley, Check this out it is something you are looking for.http://codepen.io/randombrad/pen/cDjvB Please sign in to reply. Reply as... Cancel Kiran Yalavali Tejas Kanani 8 Years Ago Hi Tejas Kanani,How to add title and description on carousel image slide show in web content .Please help me. Please sign in to reply. Reply as... Cancel
Tejas Kanani Riley Pickerl 10 Years Ago Riley, Check this out it is something you are looking for.http://codepen.io/randombrad/pen/cDjvB Please sign in to reply. Reply as... Cancel Kiran Yalavali Tejas Kanani 8 Years Ago Hi Tejas Kanani,How to add title and description on carousel image slide show in web content .Please help me. Please sign in to reply. Reply as... Cancel
Kiran Yalavali Tejas Kanani 8 Years Ago Hi Tejas Kanani,How to add title and description on carousel image slide show in web content .Please help me. Please sign in to reply. Reply as... Cancel
V D L 10 Years Ago hi tejas..i followed your steps exactly..i created structure and tenplate with your code( no chane)..but it is showing only first image ...it is not sliding..sliding bar also not visible...and on left side of top it is displaying this.ageWidth = 600) Please sign in to reply. Reply as... Cancel
V D L 10 Years Ago sorry tejas... mistake was in copying code.. now it is working fine..thanks for this blog Please sign in to reply. Reply as... Cancel Tejas Kanani V D L 10 Years Ago Glad to know that it helped you. Please sign in to reply. Reply as... Cancel siddhant jain Tejas Kanani 10 Years Ago its not working in LR 6.2 Please sign in to reply. Reply as... Cancel Tejas Kanani siddhant jain 10 Years Ago Thanks Siddhant for pointing out. I've also attached code for 6.2 now. Try that out, it should work in 6.2. Please sign in to reply. Reply as... Cancel Philip Teagle Tejas Kanani 10 Years Ago Hi Tejas,I am still not able to get this to work in 6.2. Is it required to load the seed and CSS files or is that done by the base 6.2 product? If so, where should this be done? In the web content?<script src="http://cdn.alloyui.com/2.0.0/aui/aui-min.js"></script><link href="http://cdn.alloyui.com/2.0.0/aui-css/css/bootstrap.min.css" rel="stylesheet"></link> Please sign in to reply. Reply as... Cancel Tejas Kanani Philip Teagle 10 Years Ago Hi Philip,As it's using Alloy UI's Carousel function itself, all required css & js should be there in Liferay 6.2 theme. No need to include any more css & js specific to display carousel. Try by verifying the code with Liferay 6.2 default(Classic) theme. And if you are using your custom theme, make sure it properly loads aui js & css. Please sign in to reply. Reply as... Cancel
Tejas Kanani V D L 10 Years Ago Glad to know that it helped you. Please sign in to reply. Reply as... Cancel siddhant jain Tejas Kanani 10 Years Ago its not working in LR 6.2 Please sign in to reply. Reply as... Cancel Tejas Kanani siddhant jain 10 Years Ago Thanks Siddhant for pointing out. I've also attached code for 6.2 now. Try that out, it should work in 6.2. Please sign in to reply. Reply as... Cancel Philip Teagle Tejas Kanani 10 Years Ago Hi Tejas,I am still not able to get this to work in 6.2. Is it required to load the seed and CSS files or is that done by the base 6.2 product? If so, where should this be done? In the web content?<script src="http://cdn.alloyui.com/2.0.0/aui/aui-min.js"></script><link href="http://cdn.alloyui.com/2.0.0/aui-css/css/bootstrap.min.css" rel="stylesheet"></link> Please sign in to reply. Reply as... Cancel Tejas Kanani Philip Teagle 10 Years Ago Hi Philip,As it's using Alloy UI's Carousel function itself, all required css & js should be there in Liferay 6.2 theme. No need to include any more css & js specific to display carousel. Try by verifying the code with Liferay 6.2 default(Classic) theme. And if you are using your custom theme, make sure it properly loads aui js & css. Please sign in to reply. Reply as... Cancel
siddhant jain Tejas Kanani 10 Years Ago its not working in LR 6.2 Please sign in to reply. Reply as... Cancel Tejas Kanani siddhant jain 10 Years Ago Thanks Siddhant for pointing out. I've also attached code for 6.2 now. Try that out, it should work in 6.2. Please sign in to reply. Reply as... Cancel Philip Teagle Tejas Kanani 10 Years Ago Hi Tejas,I am still not able to get this to work in 6.2. Is it required to load the seed and CSS files or is that done by the base 6.2 product? If so, where should this be done? In the web content?<script src="http://cdn.alloyui.com/2.0.0/aui/aui-min.js"></script><link href="http://cdn.alloyui.com/2.0.0/aui-css/css/bootstrap.min.css" rel="stylesheet"></link> Please sign in to reply. Reply as... Cancel Tejas Kanani Philip Teagle 10 Years Ago Hi Philip,As it's using Alloy UI's Carousel function itself, all required css & js should be there in Liferay 6.2 theme. No need to include any more css & js specific to display carousel. Try by verifying the code with Liferay 6.2 default(Classic) theme. And if you are using your custom theme, make sure it properly loads aui js & css. Please sign in to reply. Reply as... Cancel
Tejas Kanani siddhant jain 10 Years Ago Thanks Siddhant for pointing out. I've also attached code for 6.2 now. Try that out, it should work in 6.2. Please sign in to reply. Reply as... Cancel Philip Teagle Tejas Kanani 10 Years Ago Hi Tejas,I am still not able to get this to work in 6.2. Is it required to load the seed and CSS files or is that done by the base 6.2 product? If so, where should this be done? In the web content?<script src="http://cdn.alloyui.com/2.0.0/aui/aui-min.js"></script><link href="http://cdn.alloyui.com/2.0.0/aui-css/css/bootstrap.min.css" rel="stylesheet"></link> Please sign in to reply. Reply as... Cancel Tejas Kanani Philip Teagle 10 Years Ago Hi Philip,As it's using Alloy UI's Carousel function itself, all required css & js should be there in Liferay 6.2 theme. No need to include any more css & js specific to display carousel. Try by verifying the code with Liferay 6.2 default(Classic) theme. And if you are using your custom theme, make sure it properly loads aui js & css. Please sign in to reply. Reply as... Cancel
Philip Teagle Tejas Kanani 10 Years Ago Hi Tejas,I am still not able to get this to work in 6.2. Is it required to load the seed and CSS files or is that done by the base 6.2 product? If so, where should this be done? In the web content?<script src="http://cdn.alloyui.com/2.0.0/aui/aui-min.js"></script><link href="http://cdn.alloyui.com/2.0.0/aui-css/css/bootstrap.min.css" rel="stylesheet"></link> Please sign in to reply. Reply as... Cancel Tejas Kanani Philip Teagle 10 Years Ago Hi Philip,As it's using Alloy UI's Carousel function itself, all required css & js should be there in Liferay 6.2 theme. No need to include any more css & js specific to display carousel. Try by verifying the code with Liferay 6.2 default(Classic) theme. And if you are using your custom theme, make sure it properly loads aui js & css. Please sign in to reply. Reply as... Cancel
Tejas Kanani Philip Teagle 10 Years Ago Hi Philip,As it's using Alloy UI's Carousel function itself, all required css & js should be there in Liferay 6.2 theme. No need to include any more css & js specific to display carousel. Try by verifying the code with Liferay 6.2 default(Classic) theme. And if you are using your custom theme, make sure it properly loads aui js & css. Please sign in to reply. Reply as... Cancel
Marco Moncalvo 10 Years Ago For Liferay 6.2 / Responsive Carousel Structure:<root available-locales="es_ES" default-locale="es_ES"> <dynamic-element dataType="string" indexType="" name="activeIndex" readOnly="false" repeatable="false" required="false" showLabel="true" type="text" width="small"> <meta-data locale="es_ES"> <entry name="label"> <![CDATA[activeIndex]]> </entry> <entry name="predefinedValue"> <![CDATA[0]]> </entry> <entry name="tip"> <![CDATA[Index of the first visible item of the carousel]]> </entry> </meta-data> </dynamic-element> <dynamic-element dataType="string" indexType="" name="timeInterval" readOnly="false" repeatable="false" required="false" showLabel="true" type="text" width="small"> <meta-data locale="es_ES"> <entry name="label"> <![CDATA[timeInterval]]> </entry> <entry name="predefinedValue"> <![CDATA[0.75]]> </entry> <entry name="tip"> <![CDATA[Interval time in seconds between an item transition.]]> </entry> </meta-data> </dynamic-element> <dynamic-element dataType="image" fieldNamespace="wcm" indexType="keyword" name="image" readOnly="false" repeatable="true" required="false" showLabel="true" type="wcm-image" width=""> <dynamic-element dataType="string" indexType="keyword" name="linkUrl" readOnly="false" repeatable="false" required="false" showLabel="true" type="text" width="small"> <meta-data locale="es_ES"> <entry name="label"> <![CDATA[linkUrl]]> </entry> <entry name="predefinedValue"> <![CDATA[]]> </entry> <entry name="tip"> <![CDATA[]]> </entry> </meta-data> </dynamic-element> <meta-data locale="es_ES"> <entry name="label"> <![CDATA[image]]> </entry> <entry name="predefinedValue"> <![CDATA[]]> </entry> <entry name="tip"> <![CDATA[]]> </entry> </meta-data> </dynamic-element></root>Template:#set($interval = $timeInterval.Data)#set($activeIndexValue = $activeIndex.Data)<style type="text/css">.aui .carousel { margin-bottom: 0;}.auiCarousel .aui-carousel-item { height: auto; position: relative; display: none;}.auiCarousel .carousel-item img { width: 100%; height: auto;}.auiCarousel .carousel-item-active { display: block;}</style>#set($totalCount = 0)<div class="auiCarousel"> #foreach($imageElement in $image.getSiblings()) <div class="aui-carousel-item"> #if($imageElement.getData() != "") #if($imageElement.linkUrl.getData() != "") <a href="$imageElement.linkUrl.Data"> <img src="$imageElement.Data" /> </a> #else <img src="$imageElement.Data" /> #end #set($totalCount = $totalCount + 1) #end </div> #end</div>#if($totalCount > 0)<script>// Defining Carousel Module"YUI().use('aui-carousel', function(Y) { new Y.Carousel({ contentBox: '.auiCarousel', activeIndex: $activeIndexValue, intervalTime: $interval, }).render();});</script>#end Please sign in to reply. Reply as... Cancel
(You) 9 Years Ago [...] AUI Carousel using WebContent Structure/Template - Blog | Liferay [...] Read More Please sign in to reply. Reply as... Cancel
Aaron Paxson 9 Years Ago Hmmm... very odd. The 6.2 code doesn't seem to work. The carousel loads, and I can see the carousel controls changing, but no images show and no link. When doing an inspection, the link the images point to works fine. Please sign in to reply. Reply as... Cancel Aaron Paxson Aaron Paxson 9 Years Ago Nevermind. I used Marco's CSS Style in the template and works fine. Please sign in to reply. Reply as... Cancel
Aaron Paxson Aaron Paxson 9 Years Ago Nevermind. I used Marco's CSS Style in the template and works fine. Please sign in to reply. Reply as... Cancel
Shahid Khan 9 Years Ago If I want to put ‘sequence’ and ‘alternate text’ fields in ImageElementSet then what modifications I need to make here? Please sign in to reply. Reply as... Cancel
Shahid Khan 9 Years Ago I am able to display it after logged in. but this Carousel is not visible for Guest user.Can anybody tell me how to overcome this problem?i tried all basic permissions and settings but still no use Please sign in to reply. Reply as... Cancel
Sujeet Rai 9 Years Ago Hi Tejas,Same issue. href" " not responding.when i am giving link "http://www.google.com" in linkUrl then, that image also disappear. Please sign in to reply. Reply as... Cancel Sujeet Rai Sujeet Rai 9 Years Ago Using Liferay 6.2 Please sign in to reply. Reply as... Cancel
Valentin Rabollet 9 Years Ago Hi Tejas,I'm a newbie using CE 62 GA2 and I ve created the structure and the template with the scripts above. Suprisingly, the Web Content Display show me this : -------------------------------------#set($imageWidth = $maxImageWidth.Data) #set($imageHeight = $maxImageHeight.Data) #set($imageWidthPx = $imageWidth + "px") #set($imageHeightPx = $imageHeight + "px") #set($interval = $timeInterval.Data) #set($activeIndexValue = $activeIndex.Data) #set($totalCount = 0)#foreach($imageElement in $image.getSiblings()) #if($imageElement.getData() != "") #if($imageElement.linkUrl.getData() != "") #else #end #set($totalCount = $totalCount + 1) #end #end#if($totalCount > 0) #end ------------------------------------------------------Did I miss something? Must I load Alloy UI somewhere first?Thanks for your help! Please sign in to reply. Reply as... Cancel
Ved Mishra 7 Years Ago can it be responsive ? because i used this one and its not responsive Please sign in to reply. Reply as... Cancel
Mohamed Sayed 7 Years Ago can i create a template like this for blogs portlet please advice Please sign in to reply. Reply as... Cancel
Mohamed Sayed 7 Years Ago can i create a template like this for blogs portlet please advice Please sign in to reply. Reply as... Cancel
William Sousa 7 Years Ago Hey guys, How can I implement this code using Liferay7?There are any example or tutorial for Carousel in Liferay7?Best regards! Please sign in to reply. Reply as... Cancel