Message Boards

New website picture slider?

Byambadorj Oyunbat, modified 14 Years ago.

New website picture slider?

New Member Posts: 7 Join Date: 8/31/09 Recent Posts


This is jquery or not?
Someone give me source code emoticon
thumbnail
Jonathan Neal, modified 14 Years ago.

RE: New website picture slider?

Junior Member Posts: 66 Join Date: 8/29/07 Recent Posts
Pretty nifty, huh? No, no I didn't come here to pat myself on the back, but I'd be happy to share the source code with you, from the jQuery all the way to the structure and template! Just a sec.

Okay, here you go:


And I'm including a fully working example of the rotating banner @ http://sandbox.thewikies.com/liferay-rotating-banner/

EDIT: Updated links for improved functionality (independence from the theme)
Ujwal Dhomne, modified 14 Years ago.

RE: New website picture slider?

New Member Posts: 4 Join Date: 2/18/10 Recent Posts
Jonathan Neal:
Pretty nifty, huh? No, no I didn't come here to pat myself on the back, but I'd be happy to share the source code with you, from the jQuery all the way to the structure and template! Just a sec.

Okay, here you go:


And I'm including a fully working example of the rotating banner @ http://sandbox.thewikies.com/liferay-rotating-banner/


How to use the Javascript provided with your example ? Where does it go / which folder in liferay ?
Aaron Delani, modified 14 Years ago.

RE: New website picture slider?

Ujwal Dhomne, modified 14 Years ago.

RE: New website picture slider?

New Member Posts: 4 Join Date: 2/18/10 Recent Posts
Aaron Delani:
You may want to place the .js in your "javascript" folder within the theme. Then link it back in, or even add the code to your javascript.js


I got the javascript working, now there is a new issue -

Message: 'bannerNav' is undefined
Line: 1
Char: 302
Code: 0
URI: http://localhost:7080/L-theme/javascript/javascript.js?browserId=ie&minifierType=js&t=1266593023355

Anybody implemented this solution ?
thumbnail
Jonathan Neal, modified 14 Years ago.

RE: New website picture slider?

Junior Member Posts: 66 Join Date: 8/29/07 Recent Posts
Ujwal,

Compare the code output of what you're doing with what I'm doing @ http://sandbox.thewikies.com/liferay-rotating-banner/ and that should reveal the difference / bug.

After you do this, let me know if you have another problem. emoticon
Ujwal Dhomne, modified 14 Years ago.

RE: New website picture slider?

New Member Posts: 4 Join Date: 2/18/10 Recent Posts
Jonathan Neal:
Ujwal,

Compare the code output of what you're doing with what I'm doing @ http://sandbox.thewikies.com/liferay-rotating-banner/ and that should reveal the difference / bug.

After you do this, let me know if you have another problem. emoticon


bannerNav = {}; is missing from the javascript from the download link.

The javascript is failing at this line -
jQuery_banner_img.src = jQuery_banner_each.eq(item).css('background-image').replace(/^.*url\("{0,}|"{0,}\).*$/g, '');

Do I need to do some kind of config changes ?
Ujwal Dhomne, modified 14 Years ago.

RE: New website picture slider?

New Member Posts: 4 Join Date: 2/18/10 Recent Posts
Ujwal Dhomne:
Jonathan Neal:
Ujwal,

Compare the code output of what you're doing with what I'm doing @ http://sandbox.thewikies.com/liferay-rotating-banner/ and that should reveal the difference / bug.

After you do this, let me know if you have another problem. emoticon


bannerNav = {}; is missing from the javascript from the download link.

The javascript is failing at this line -
jQuery_banner_img.src = jQuery_banner_each.eq(item).css('background-image').replace(/^.*url\("{0,}|"{0,}\).*$/g, '');

Do I need to do some kind of config changes ?


Anybody else tried implementing this slider ?
thumbnail
Jonathan Neal, modified 14 Years ago.

RE: New website picture slider?

Junior Member Posts: 66 Join Date: 8/29/07 Recent Posts
Did you get this working? I imagined between the source alone and the working isolated demonstration, yes.
Matthias Fenz, modified 14 Years ago.

RE: New website picture slider?

Junior Member Posts: 79 Join Date: 3/24/09 Recent Posts
hi jonathan,

i tried to implement this, too. the navigation shows up, but it is located at the left side of my web content display. when i add two images, i can see, that the white dots in the navigation change, but the images don't show up.

i implemented the js code at the end of my theme's javascript.js-file. i built the template and the structure, both work (i can select images and direct the link-path). i added the css to my custom.css-file.

can you imagine why the images don't show up?

thanks in advance for every help you can give me emoticon

greets, matthias
Matthias Fenz, modified 14 Years ago.

RE: New website picture slider?

Junior Member Posts: 79 Join Date: 3/24/09 Recent Posts
update:

i think i can slowly imagine where the problem is – when i check the "image" in the dynamically generated css-code with my firebug, i get the same image for both of which i configured. so i think the problem may be in the template / structure and not in the css-file. maybe i'm false, but i wanted to describe this to, maybe it helps to solve my problem...

thx in advance...
Matthias Fenz, modified 14 Years ago.

RE: New website picture slider?

Junior Member Posts: 79 Join Date: 3/24/09 Recent Posts
i have the solution...

in the template, use the following:


<div class="banner-nav" id="banner-nav">
	<h1 class="heading">
		Banners
	</h1>

	#foreach ($e_banner in $banner.getSiblings())
		#set($e_banner_image = $e_banner.getData())
		#set($e_banner_text = $e_banner.getChild("text").getData())
		#set($e_banner_link = $e_banner.getChild("link").getFriendlyUrl())

		<a class="banner" href="$e_banner_link" style="background-image: url($e_banner_image);">
			<p>
					$e_banner_text
			</p>
		</a>
	#end


	#set ($banner_count = 0)

	<menu class="menu">
		<a class="playpause" href="javascript:bannerNav.playpause();">Play / Pause</a>
		<a class="prev" href="javascript:bannerNav.prev();">Previous</a>

		#foreach ($e_banner in $banner.getSiblings())
			<a class="item" href="javascript:bannerNav.toBanner($banner_count);">$banner_count</a>

			#set ($banner_count = $banner_count + 1)
		#end

		<a class="next" href="javascript:bannerNav.next();">Next</a>
	</menu>
</div>
Yan Naing Oo, modified 13 Years ago.

RE: New website picture slider?

Regular Member Posts: 179 Join Date: 2/17/11 Recent Posts
Hi all,

I am attaching the image that i got some issues about banners which can not preview for it.
the uploaded images also can not find in server ?

another problems raising
1. admin/guest users can see after publishing
2. normal users could not see the images (see on attached).

is it regarding Permission problem ?

anybody know for these issues ?

Thanks
Virendra Patidar, modified 13 Years ago.

RE: New website picture slider?

New Member Posts: 13 Join Date: 8/15/10 Recent Posts
Where to add the images and how to add??? I copied code of template, js and css its working but no images are coming..
thumbnail
Ivano Carrara, modified 13 Years ago.

RE: New website picture slider?

Expert Posts: 345 Join Date: 7/3/05 Recent Posts
Jonathan Neal:
Ujwal,

Compare the code output of what you're doing with what I'm doing @ http://sandbox.thewikies.com/liferay-rotating-banner/ and that should reveal the difference / bug.

After you do this, let me know if you have another problem. emoticon


Hi Jonathan!

When I try to access the "http://sandbox.thewikies.com/liferay-rotating-banner" URL, I get the below error:
Not Found The requested URL /liferay-rotating-banner/ was not found on this server.
Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

Please, could you fix it ?

Thank you in advance !

Ivano
thumbnail
Jonathan Neal, modified 13 Years ago.

RE: New website picture slider?

Junior Member Posts: 66 Join Date: 8/29/07 Recent Posts
Hi there! The original source files are still available on pastie (link at the top). I do not maintain the source on my sandbox any longer. If I kept all of my old projects on my personal sandbox then it would just get too big!
thumbnail
Ivano Carrara, modified 13 Years ago.

RE: New website picture slider?

Expert Posts: 345 Join Date: 7/3/05 Recent Posts
Thank you Jonathan!

In fact, without your help, it is not so simple to reassemble your code in a full functioning Journal article for a beginner ...

And, I noticed that there are some references to a custom Theme (http://cdn.www.liferay.com/osb-theme) ...

Please, could you give us some more help ?

Thank you in advance !
Ivano
Yan Naing Oo, modified 13 Years ago.

RE: New website picture slider?

Regular Member Posts: 179 Join Date: 2/17/11 Recent Posts
Hi jonathan,

I got screen blackout problem when i publish it for banners stuff.
do you know how to solve it ?


sometimes it show like following text.

Banners

Play / Pause Previous 0 1 2 3 Next
thumbnail
Zeeshan Khan, modified 12 Years ago.

RE: New website picture slider?

Expert Posts: 349 Join Date: 7/21/11 Recent Posts
Jonathan Neal:
Hi there! The original source files are still available on pastie (link at the top). I do not maintain the source on my sandbox any longer. If I kept all of my old projects on my personal sandbox then it would just get too big!



Hi All !!

i am working on LR 6.06....will this(the links that you guys have given here) work on LIFERAY 6....???

if no, then what changes i have to make....plz guide me through this.....


thnx !!!!!
sandeep tripathi, modified 12 Years ago.

RE: New website picture slider?

Regular Member Posts: 100 Join Date: 10/19/11 Recent Posts
Hi Jonathan,
thanks a lot i had created the banner using the link u had provide it was a great help .
but i want to browse the images for banner from my image gallery and not from by desktop the so that i am sure that i can get the images for the banner every time.
so can u pls help me with that .

Regards
Sandeep
thumbnail
Zeeshan Khan, modified 12 Years ago.

RE: New website picture slider?

Expert Posts: 349 Join Date: 7/21/11 Recent Posts
sandeep tripathi:
Hi Jonathan,
thanks a lot i had created the banner using the link u had provide it was a great help .
but i want to browse the images for banner from my image gallery and not from by desktop the so that i am sure that i can get the images for the banner every time.
so can u pls help me with that .

Regards
Sandeep



Hi Sandeep !!

which link u followed...??? even i have tried many links to create slider, but dint succeed yet....emoticon

can u plz provide me step by step procedure to follow...??? i am using liferay 6.06 bundled with Tomcat....

thnx in advnc for the help u can give me !!!
sandeep tripathi, modified 12 Years ago.

RE: New website picture slider?

Regular Member Posts: 100 Join Date: 10/19/11 Recent Posts
Hi Zeeshan,

u can use this link

http://www.liferay.com/community/forums/-/message_boards/message/4553018

Regards
Sandeep
thumbnail
Zeeshan Khan, modified 12 Years ago.

RE: New website picture slider?

Expert Posts: 349 Join Date: 7/21/11 Recent Posts
sandeep tripathi:
Hi Zeeshan,

u can use this link

http://www.liferay.com/community/forums/-/message_boards/message/4553018

Regards
Sandeep



Hi Sandeep !!
i have already been followed this link...but images were not appearing....can u plz explain me where did u pasted all those codes(templates,structure,etc.).....and also which liferay version u have used for this......???

thnx !!
thumbnail
Achmed Tyrannus Albab, modified 12 Years ago.

RE: New website picture slider?

Regular Member Posts: 158 Join Date: 3/5/10 Recent Posts
Zeeshan Khan:
sandeep tripathi:
Hi Zeeshan,

u can use this link

http://www.liferay.com/community/forums/-/message_boards/message/4553018

Regards
Sandeep



Hi Sandeep !!
i have already been followed this link...but images were not appearing....can u plz explain me where did u pasted all those codes(templates,structure,etc.).....and also which liferay version u have used for this......???

thnx !!


I hope this helps, this is how i did it via CMS Structure and Templates(6.06):
1. Provided that you have the administrator role (or any role that allows adding,editing and publishing rights) , Log in to liferay.
2.Add a Web Content Display to the page where you want the banner in.
3.Once added click the edit icon right under the web content display. The utmost left under the Web Content Display.
4.Once clicked, fill in the name of the content. For this sample name it YUI Slider. Don't click save yet.
5.Depending on your setup, there will be a link name "Advanced »" or "Basic »". Click it if it doesn't display Basic.
6. Once clicked a few fields will appear namely Structure and Templates.
a.Under the Structure hood click the Choose button. And proceed with OK button.
b.Proceed to click Add Structure button.
i.You can either check the box for Auto Generate ID or manually fill in your ID.
ii.Fill in the Name and Description.
iii.Click Launch Editor
iv.Copy the Structure code i posted earlier and replaced whatever whats in side the current one (replace <root></root>)
v.Press Save.
vi.Select the structure you have just created by clicking it. Wallah! Youre Structure is ready.

c.Under Template hood click Select Button and proceed with OK button.
i.Click Add Template.
ii.Fill in the ID or check the checkbox for auto generate ID.
iii.Fill in Name and Description accordingly.
iv.Under the Structure title click Select and proceed to selecting the earlier Structure you've created.
v.Click Launch editor and do the copy pasting of my earlier posted Template codes. Replace anything that is inside it.
vi.Press Save
vii. Select your Template and Walla your Template is ready.

7. Fill in the required fields.
8.Press the green add icon to add more images to the banner.
9.Publish.
10.That will be USD 50.00 for the tutorial. Please bank it in or i will hunt you in the afterlife.
11.Good luck and have fun.
thumbnail
Zeeshan Khan, modified 12 Years ago.

RE: New website picture slider?

Expert Posts: 349 Join Date: 7/21/11 Recent Posts
Achmed Tyrannus Albab:
Zeeshan Khan:
sandeep tripathi:
Hi Zeeshan,

u can use this link

http://www.liferay.com/community/forums/-/message_boards/message/4553018

Regards
Sandeep



Hi Sandeep !!
i have already been followed this link...but images were not appearing....can u plz explain me where did u pasted all those codes(templates,structure,etc.).....and also which liferay version u have used for this......???

thnx !!


I hope this helps, this is how i did it via CMS Structure and Templates(6.06):
1. Provided that you have the administrator role (or any role that allows adding,editing and publishing rights) , Log in to liferay.
2.Add a Web Content Display to the page where you want the banner in.
3.Once added click the edit icon right under the web content display. The utmost left under the Web Content Display.
4.Once clicked, fill in the name of the content. For this sample name it YUI Slider. Don't click save yet.
5.Depending on your setup, there will be a link name "Advanced »" or "Basic »". Click it if it doesn't display Basic.
6. Once clicked a few fields will appear namely Structure and Templates.
a.Under the Structure hood click the Choose button. And proceed with OK button.
b.Proceed to click Add Structure button.
i.You can either check the box for Auto Generate ID or manually fill in your ID.
ii.Fill in the Name and Description.
iii.Click Launch Editor
iv.Copy the Structure code i posted earlier and replaced whatever whats in side the current one (replace <root></root>)
v.Press Save.
vi.Select the structure you have just created by clicking it. Wallah! Youre Structure is ready.

c.Under Template hood click Select Button and proceed with OK button.
i.Click Add Template.
ii.Fill in the ID or check the checkbox for auto generate ID.
iii.Fill in Name and Description accordingly.
iv.Under the Structure title click Select and proceed to selecting the earlier Structure you've created.
v.Click Launch editor and do the copy pasting of my earlier posted Template codes. Replace anything that is inside it.
vi.Press Save
vii. Select your Template and Walla your Template is ready.

7. Fill in the required fields.
8.Press the green add icon to add more images to the banner.
9.Publish.
10.That will be USD 50.00 for the tutorial. Please bank it in or i will hunt you in the afterlife.
11.Good luck and have fun.



Dear Achmed........u know what......you are SIMPLY GREATTTTT....its working for me FINALLYYYYYYY......cheers to you.....and u no need to hunt for me afterlife.....just give me ur account no.... emoticon..thnk u very very much.......u understood my needs.....


emoticon
thumbnail
Ashwin Khandelwal, modified 12 Years ago.

RE: New website picture slider?

Junior Member Posts: 42 Join Date: 10/14/11 Recent Posts
Thnks Achmed....

Your solution works wonder for us. We have been in hunt for this solution since aeons and you simply enlighten our dark hope.



Thnks a lot....Ur Mr. Liferay
thumbnail
Achmed Tyrannus Albab, modified 12 Years ago.

RE: New website picture slider?

Regular Member Posts: 158 Join Date: 3/5/10 Recent Posts
Ok its good to know that you guys made it.
But other side than writing the steps, i am not the right person to be thanking.
Thank the community and the person who came out with the scripts such as the one who wrote the YUI (i'm really sorry i couldnt find the original link) or Jonathan etc.
But anyways i was at the same place where you guys were.

I hope in future maybe you guys could share something on what you had done in the liferay community,
because i really think we are short on the information, especially for newbies like me.

Cheers mateys.

P/S: Earlier i wrote Walla...i actually meant Voila!...Didn't know it really had a meaning.
thumbnail
Zeeshan Khan, modified 12 Years ago.

RE: New website picture slider?

Expert Posts: 349 Join Date: 7/21/11 Recent Posts
Achmed Tyrannus Albab:
Ok its good to know that you guys made it.
But other side than writing the steps, i am not the right person to be thanking.
Thank the community and the person who came out with the scripts such as the one who wrote the YUI (i'm really sorry i couldnt find the original link) or Jonathan etc.
But anyways i was at the same place where you guys were.

I hope in future maybe you guys could share something on what you had done in the liferay community,
because i really think we are short on the information, especially for newbies like me.

Cheers mateys.

P/S: Earlier i wrote Walla...i actually meant Voila!...Didn't know it really had a meaning.



walla-------> Voila !!! emoticonemoticonemoticonemoticonemoticonemoticon
thumbnail
Zeeshan Khan, modified 12 Years ago.

RE: New website picture slider?

Expert Posts: 349 Join Date: 7/21/11 Recent Posts
Achmed Tyrannus Albab:
Ok its good to know that you guys made it.
But other side than writing the steps, i am not the right person to be thanking.
Thank the community and the person who came out with the scripts such as the one who wrote the YUI (i'm really sorry i couldnt find the original link) or Jonathan etc.
But anyways i was at the same place where you guys were.

I hope in future maybe you guys could share something on what you had done in the liferay community,
because i really think we are short on the information, especially for newbies like me.

Cheers mateys.

P/S: Earlier i wrote Walla...i actually meant Voila!...Didn't know it really had a meaning.


Hi Achmed !!

one more thing if u can help....if i want to get the mouse-over slider below to the main slider(PFA), what things i need to do....??

PFA

thnx !!

Attachments:

thumbnail
Achmed Tyrannus Albab, modified 12 Years ago.

RE: New website picture slider?

Regular Member Posts: 158 Join Date: 3/5/10 Recent Posts
That i guess you have to develop it yourself or google around.
Good luck.
thumbnail
Zeeshan Khan, modified 12 Years ago.

RE: New website picture slider?

Expert Posts: 349 Join Date: 7/21/11 Recent Posts
Achmed Tyrannus Albab:
That i guess you have to develop it yourself or google around.
Good luck.



Hi All !!

can u plz suggest any link for the above question that i have posted.......i tried googling around it but dint get what i need....emoticon

emoticon

thnx !!
Cristian Serban, modified 12 Years ago.

RE: New website picture slider?

New Member Posts: 14 Join Date: 9/5/11 Recent Posts
Hi,

The component that you look for is called AUI Scroller

You can see it in action here
thumbnail
Zeeshan Khan, modified 12 Years ago.

RE: New website picture slider?

Expert Posts: 349 Join Date: 7/21/11 Recent Posts
thnx Cristian !!

i want to implement this.....what are the things required for implementing this.....can u help me in this......??
Cristian Serban, modified 12 Years ago.

RE: New website picture slider?

New Member Posts: 14 Join Date: 9/5/11 Recent Posts
Zeeshan Khan:
thnx Cristian !!

i want to implement this.....what are the things required for implementing this.....can u help me in this......??



once you have setted the divs with your photos

<div id="scroller-content">
				<div class="cisco">
					<a href="#">
						<img src="1.png" width="81" height="37" alt="Cisco">
					</a>
				</div>
				<div class="sesame-street">
					<a href="#">
						<img src="2.png" width="81" height="37" alt="Sesame Street">
					</a>
				</div>
			</div>


you need to create the script for it:

AUI().ready('aui-scroller', function (A) {
	var component = new A.Scroller({
			contentBox: '#scroller-content',
			height: 45,
			//width: 640,
			orientation: 'horizontal'
		}).render();
});


this should be all!
thumbnail
Zeeshan Khan, modified 12 Years ago.

RE: New website picture slider?

Expert Posts: 349 Join Date: 7/21/11 Recent Posts
thnx very much Cristian........ emoticonemoticon
Giuseppe Cultrera, modified 12 Years ago.

RE: New website picture slider?

New Member Posts: 4 Join Date: 1/20/10 Recent Posts
Hi Cristian, I am a newbie to develop to LR (till now worked on theme and admin above all).
I would like to create something like http://deploy.alloyui.com/demos/scroller/ as U explained...
I tried the picture slider using tempalte and structures and it works great!
There is some way to do something similar in order to use your wonderful example for the AUI Scroller??? Can I insert in some way the

AUI().ready('aui-scroller', function (A) {
var component = new A.Scroller({
contentBox: '#scroller-content',
height: 45,
//width: 640,
orientation: 'horizontal'
}).render();
});

code in a web content?
I tried inserting it as javascript in the page administrator panel (javascript section) but it doesn't work.
Thanks in advance!!!
Ciao
Pino
Giuseppe Cultrera, modified 12 Years ago.

RE: New website picture slider?

New Member Posts: 4 Join Date: 1/20/10 Recent Posts
Hi Cristian, I am a newbie to develop to LR (till now worked on theme and admin above all).
I would like to create something like http://deploy.alloyui.com/demos/scroller/ as U explained...
I tried the picture slider using tempalte and structures and it works great!
There is some way to do something similar in order to use your wonderful example for the AUI Scroller??? Can I insert in some way the

AUI().ready('aui-scroller', function (A) {
var component = new A.Scroller({
contentBox: '#scroller-content',
height: 45,
//width: 640,
orientation: 'horizontal'
}).render();
});

code in a web content?
I tried inserting it as javascript in the page administrator panel (javascript section) but it doesn't work.
Thanks in advance!!!
Ciao
Pino



Cristian Serban:
Zeeshan Khan:
thnx Cristian !!

i want to implement this.....what are the things required for implementing this.....can u help me in this......??



once you have setted the divs with your photos

<div id="scroller-content">
				<div class="cisco">
					<a href="#">
						<img src="1.png" width="81" height="37" alt="Cisco">
					</a>
				</div>
				<div class="sesame-street">
					<a href="#">
						<img src="2.png" width="81" height="37" alt="Sesame Street">
					</a>
				</div>
			</div>


you need to create the script for it:

AUI().ready('aui-scroller', function (A) {
	var component = new A.Scroller({
			contentBox: '#scroller-content',
			height: 45,
			//width: 640,
			orientation: 'horizontal'
		}).render();
});


this should be all!
sandeep tripathi, modified 12 Years ago.

RE: New website picture slider?

Regular Member Posts: 100 Join Date: 10/19/11 Recent Posts
Hi Cristian

i had try developing the same but it is not working fine for me the aui.js use in the sample code is the same in webapp/root/js/aui/aui.js .
it give me a Error: A.Scroller is not a constructor can u pls help me in this .
Regards
Sandeep
Cristian Serban, modified 12 Years ago.

RE: New website picture slider?

New Member Posts: 14 Join Date: 9/5/11 Recent Posts
Hi,

What version of Alloy and Liferay are u using?
sandeep tripathi, modified 12 Years ago.

RE: New website picture slider?

Regular Member Posts: 100 Join Date: 10/19/11 Recent Posts
Hi
liferay 6.0.5
Cristian Serban, modified 12 Years ago.

RE: New website picture slider?

New Member Posts: 14 Join Date: 9/5/11 Recent Posts
the problem is that you need the last svn version of Alloy

The current released version doesn't include the aui-scroller.

Here you can find the needed soource.
Bimal Jhaveri, modified 12 Years ago.

RE: New website picture slider?

New Member Post: 1 Join Date: 9/21/11 Recent Posts
Can you provide the code for rotating imgae? This link is not working.

http://pastie.org/810166]http://pastie.org/810166
http://pastie.org/810169]http://pastie.org/810169
http://pastie.org/810161]http://pastie.org/810161
http://pastie.org/810212]http://pastie.org/810212

Thanks,
thumbnail
Jonathan Neal, modified 14 Years ago.

RE: New website picture slider?

Junior Member Posts: 66 Join Date: 8/29/07 Recent Posts
Hi all,

I've had several requests for this banner both here on the forums as well as on IRC, so I've made some changes to the Rotating Banner to make the script more accessible for everyone.



First, you don't have to stick the CSS and JS in the theme anymore, I've added fields for you to add the JS and CSS directly into the web content. There were some folks who knew how to use web content, but not how to make a theme, so I hope their lives are made easier by this change.

I tested this all in Liferay 5.2.3 CE this morning, but now I must get back to packing for my big camping trip! And I'm sure you all wanted to know about my camping trip.

Notes:
* I'm editing the original links as not to confuse new guests of this thread.
* This script relies on jQuery which is the main scripting librray of Liferay 5, but is not included in Liferay 6. This won't work in Liferay 6 .... yet =)
thumbnail
Thomas Ricouard, modified 14 Years ago.

RE: New website picture slider?

New Member Posts: 18 Join Date: 9/11/09 Recent Posts
Hey this is great It's helped me a lot, but I have one question, what is the goal of the structure file, I have understand everything exept the way I can use the structure file..... Sound a noobish question but... Can you light me ?

EDIT: In fact, i'm not a javascript developper (still learning a bit..), i'm kinda lost with this, I placed the .css, .Js, .html(template) and the structure file in the same folder, But i don't know where to start.

If i understand correctly I have to edit
[#set($e_banner_image = $e_banner.getData().replaceAll("&amp;", "&amp;").replaceAll("&amp;", "&amp;"))
		#set($e_banner_text = $e_banner.getChild("Test").getData())
		#set($e_banner_link = $e_banner.getChild("link").getFriendlyUrl())

to set the image, link and title, do I have to put the link of my image in the () of the $e_banner.getData() function ?
I also don't get where I can define the path of my Css, jquery and javascript file, I will put these in a folder in my liferay instalation path, the goal is to put the slideshow in a web content....

I hope someone will help me emoticon

I also try to develop my own slideshow (That I put into a web content) but I can't include jquery lib witthout braking liferay menu (jquery conflict I think).

Here is the code
 


<title>Slidedhow</title>
<style type="text/css">
.slideshow { position:absolute; left:50%; right:50%; height: 232px; width: 400px; margin-top:5px; margin-bottom:5px; margin-left:-425px;}
.slideshow img { padding: 2px; border: 1px solid #ccc; }
body {
background-color: transparent;
}
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="html/js/jquery/jquery.js"></script>

<!-- include Cycle plugin -->
<script type="text/javascript" src="http://download.ipodtutofast.com/slide/jquery.cycle.all.2.74.js"></script>


<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
		fx: 'fade' // transision possible ex: fade, scrollUp, shuffle, etc...
	});
});
</script>


	<div class="slideshow">
		<img src="http://www.waza-solutions.com/medias/Image/_img_dyn/med/banner_sage10001221898212.jpg" width="850" height="200">
		<img src="http://www.manapps.tm.fr/manapps/images/crm/sage/sage-banner.png" width="500" height="200">
	</div>
	
	
	





Thanks in advance.
Matthias Fenz, modified 14 Years ago.

RE: New website picture slider?

Junior Member Posts: 79 Join Date: 3/24/09 Recent Posts
thomas, in your function, replace $ by jQuery and it should work...

Thomas Ricouard:


If i understand correctly I have to edit
[#set($e_banner_image = $e_banner.getData().replaceAll("&amp;", "&amp;").replaceAll("&amp;", "&amp;"))
		#set($e_banner_text = $e_banner.getChild("Test").getData())
		#set($e_banner_link = $e_banner.getChild("link").getFriendlyUrl())

to set the image, link and title, do I have to put the link of my image in the () of the $e_banner.getData() function ?


the structure offers you a couple of fields where you can enter your data. you needn't put them in the code... by the way, that wouldn't be very dynamic ;)

hope i could help you...

@jonathan: have fun at your camping trip! and beware of wild animals! ;)
thumbnail
Thomas Ricouard, modified 14 Years ago.

RE: New website picture slider?

New Member Posts: 18 Join Date: 9/11/09 Recent Posts
thomas, in your function, replace $ by jQuery and it should work...


Sorry but which functions ?

Thanks emoticon
Matthias Fenz, modified 14 Years ago.

RE: New website picture slider?

Junior Member Posts: 79 Join Date: 3/24/09 Recent Posts
this function...

<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
        fx: 'fade' // transision possible ex: fade, scrollUp, shuffle, etc...
    });
});
</script>


btw, you don't need the (document).ready, because (function() means the same...

you also don't need to call the jQuery library, because liferay calls this by default (check the sourcce code of your site...)

greez...
Pablo M Mino, modified 14 Years ago.

RE: New website picture slider?

Regular Member Posts: 135 Join Date: 10/2/09 Recent Posts
What happened with JQuery, why it is not included on the LR 6?

The funny part is that I jsut noticed it was absent after reading the post and checking the jedi template using AUI instead of JQuery

How can we include JQuery back again? Or which could be a workaround for this cool slideshow banner?
Pablo M Mino, modified 13 Years ago.

RE: New website picture slider?

Regular Member Posts: 135 Join Date: 10/2/09 Recent Posts
Trying to make it work on LR6

I know nothing about javascript or Jquery, so I tried the most simple solution, downloaded Jquery, placed it inside ROOT and added source=jquery.js to the script line

Didn't worked emoticon

Any suggestion? How far are you from making that "Not in LR6 (yet!)" real?
Antonio Martínez, modified 13 Years ago.

RE: New website picture slider?

Junior Member Posts: 32 Join Date: 1/14/09 Recent Posts
Hi Jonathan, thanks for share.

I have Liferay 5.2.3.

I'm trying this but I get an error with the link, I get "$e_banner_link" as link instead of the correct link.

This is the html generated:

<a style="background-image: url(/image/journal/article?img_id=16407&amp;t=1273734995312); opacity: 1; z-index: 2;" [color="#FF0000]href=&quot;$e_banner_link&quot;[/color]" class="banner">
	<p>	text1	</p>
</a>


In your template i saw:

#set($e_banner_link = $e_banner.getChild("link").getFriendlyUrl())


If I change "getFriendlyUrl()" by "getUrl()" it works but with a link like "/web/10137/6".

Where is the problem?

Thanks.
Matthias Fenz, modified 13 Years ago.

RE: New website picture slider?

Junior Member Posts: 79 Join Date: 3/24/09 Recent Posts
Antonio Martínez:



#set($e_banner_link = $e_banner.getChild("link").getFriendlyUrl())




Hi Antonio, use #set($e_banner_link = $e_banner.getChild("link").getData()) instead... That will fix it...

Greez...
Antonio Martínez, modified 13 Years ago.

RE: New website picture slider?

Junior Member Posts: 32 Join Date: 1/14/09 Recent Posts
Matthias Fenz:
Antonio Martínez:



#set($e_banner_link = $e_banner.getChild("link").getFriendlyUrl())




Hi Antonio, use #set($e_banner_link = $e_banner.getChild("link").getData()) instead... That will fix it...

Greez...


Hi Matthias, thanks.

Whit your solution I'm getting "/web/guest/6" instead of "/web/10137/6", it's better than before.

I'd like to get the full friendly url "/web/guest/news", do you know if is it possible?

Thanks.
Matthias Fenz, modified 13 Years ago.

RE: New website picture slider?

Junior Member Posts: 79 Join Date: 3/24/09 Recent Posts
hi antonio...

i think your problem doesn't depend on the code... look in your manage pages-settings, have you set the correct friendly urls?

normally (and in my case, it works perfect), you only have to enter the friendly url (if you use "text" in your template) – if you use the "link to page", check the settings in manage pages (control panel)

if you need further hints, feel free to ask..

greez, matthias
Antonio Martínez, modified 13 Years ago.

RE: New website picture slider?

Junior Member Posts: 32 Join Date: 1/14/09 Recent Posts
Hi Matthias,

The friendly urls are set and when I click on tab I can see them.

In the tmeplate I have this

...		
#set($e_banner_text = $e_banner.getChild("text").getData())
#set($e_banner_link = $e_banner.getChild("link").getData())
<a class="banner" href="$e_banner_link" style="background-image: url($e_banner_image);">
    <p>$e_banner_text</p>
</a>
...


I'm using the link property for href, of "link to page" type in the structure. But don't work, the url generated is /web/guest/6.

I have changed link type to "text" so I can paste the frindly url directly.

Now it works perfect, but the user prefers the combo for select the page.

Thanks.
thumbnail
Tiago Booz, modified 13 Years ago.

RE: New website picture slider?

New Member Post: 1 Join Date: 3/15/10 Recent Posts
Somebody can help me please?

I'm having the following error in IE.

Mensagem: 'c.eq(...).css(...)' é nulo ou não é um objeto
Linha: 1
Caractere: 1687
Código: 0
URI: http://absmcwmph001:8080/Abril-Interno-v4.2-theme/javascript/javascript.js?browserId=ie&minifierType=js&t=1278342667327


The banner appears correctly but i can't use de nav buttons.


In firefox, I'm having the same error message:

Erro: c.eq(m).css("background-image") is undefined
Arquivo-fonte: http://absmcwmph001:8080/Abril-Interno-v4.2-theme/javascript/javascript.js?browserId=firefox&minifierType=js&t=1278342667327
Linha: 1


Somebody can help me to fix that, please?
Matthias Fenz, modified 13 Years ago.

RE: New website picture slider?

Junior Member Posts: 79 Join Date: 3/24/09 Recent Posts
TJ Booz:
Somebody can help me please?

I'm having the following error in IE.

Mensagem: 'c.eq(...).css(...)' é nulo ou não é um objeto
Linha: 1
Caractere: 1687
Código: 0
URI: http://absmcwmph001:8080/Abril-Interno-v4.2-theme/javascript/javascript.js?browserId=ie&minifierType=js&t=1278342667327


The banner appears correctly but i can't use de nav buttons.


In firefox, I'm having the same error message:

Erro: c.eq(m).css("background-image") is undefined
Arquivo-fonte: http://absmcwmph001:8080/Abril-Interno-v4.2-theme/javascript/javascript.js?browserId=firefox&minifierType=js&t=1278342667327
Linha: 1


Somebody can help me to fix that, please?



hi tj,

do you have the error messages in english?

for the firstb glance i'd say there's a problem with your js-code, but it's hard to identify without further information...

greez matthias
Mihael Palfi, modified 13 Years ago.

RE: New website picture slider?

New Member Posts: 20 Join Date: 11/5/10 Recent Posts
Hello

I have a problem when adding multiple image sliders on a single page. They stop working. The second dosent scroll. The first is sliding image on a strange way??

Is there a way to fix this?

Miha
Mihael Palfi, modified 13 Years ago.

RE: New website picture slider?

New Member Posts: 20 Join Date: 11/5/10 Recent Posts
Hi

Does someone know how to add preloding to the images in the picture slider. We have a problem that the pictures are not completly loaded on slow internet speeds. I am new at jquery so any possible help would be apriciated. (source code)

Thank you for the answers

Miha
thumbnail
Achmed Tyrannus Albab, modified 13 Years ago.

RE: New website picture slider?

Regular Member Posts: 158 Join Date: 3/5/10 Recent Posts
Antonio Martínez:
Hi Matthias,

The friendly urls are set and when I click on tab I can see them.

In the tmeplate I have this

...		
#set($e_banner_text = $e_banner.getChild("text").getData())
#set($e_banner_link = $e_banner.getChild("link").getData())
<a class="banner" href="$e_banner_link" style="background-image: url($e_banner_image);">
    <p>$e_banner_text</p>
</a>
...


I'm using the link property for href, of "link to page" type in the structure. But don't work, the url generated is /web/guest/6.

I have changed link type to "text" so I can paste the frindly url directly.

Now it works perfect, but the user prefers the combo for select the page.

Thanks.



Just to clear things up..coz for newbies in coding like me it can be confusing.
So what you meant here is

Change
#set($e_banner_link = $e_banner.getChild("[b]link[/b]").getData())

to
#set($e_banner_link = $e_banner.getChild("[b]text[/b]").getData())


and then fill in the URL at the webcontent text box.

Thanks Antonio & Mathhias.
thumbnail
Krati Gupta, modified 13 Years ago.

RE: New website picture slider?

Regular Member Posts: 119 Join Date: 12/5/08 Recent Posts
Hi All,

I am using the following template

#foreach ($e_banner in $banner.getSiblings())
#set($e_banner_image = $e_banner.getData().replaceAll("&", "&").replaceAll("&", "&"))
#set($e_banner_text = $e_banner.getChild("text").getData())
#set($e_banner_link = $e_banner.getChild("link").getData())

to link the image with page , but this work only for unhidden pages and if I want to link hidden page with image so how can I achieve this .

Please tell if any one has any idea how to do that .
thumbnail
Nagendra Kumar Busam, modified 13 Years ago.

RE: New website picture slider?

Liferay Master Posts: 678 Join Date: 7/7/09 Recent Posts
Hi,

Does any body made it work in Liferay 6.0.5?

Regards,
- Nagendra Kumar
thumbnail
Danny Francisco, modified 13 Years ago.

RE: New website picture slider?

New Member Posts: 10 Join Date: 12/12/08 Recent Posts
Hi Nagendra Kumar Busam,

I have used this with version 6.0.5
You need jquery to make this work.

http://www.francisco.ph

Cheers,

Danny
thumbnail
Nagendra Kumar Busam, modified 13 Years ago.

RE: New website picture slider?

Liferay Master Posts: 678 Join Date: 7/7/09 Recent Posts
Hi Danny,

Just now i made it working. I am doing the same way you are including jQuery

AUI().use('get', function(A){
    A.Get.script('http://code.jquery.com/jquery-1.4.4.min.js', {

       onSuccess: function(){

           // jQuery() can be used in here...
		   
		   // Added other js code related to banner navigation here
 });
});


If some body is looking for same, i hope this code helps

Regards,
- Nagendra Kumar
thumbnail
Leo dil dil, modified 13 Years ago.

RE: New website picture slider?

New Member Posts: 9 Join Date: 7/1/09 Recent Posts
Dear Nagendra,

Could you please send me the code or give me tips to go to right direction. I can't make it work.

here is what I've done till now.

I've punted this code

<div class="banner-nav" id="banner-nav">
     <h1 class="heading">
         Banners
     </h1>
 
     #foreach ($e_banner in $banner.getSiblings())
        #set($e_banner_image = $e_banner.getData())
        #set($e_banner_text = $e_banner.getChild("text").getData())
        #set($e_banner_link = $e_banner.getChild("link").getFriendlyUrl())

        <a class="banner" href="$e_banner_link" style="background-image: url($e_banner_image);">
            <p>
                    $e_banner_text
            </p>
        </a>
    #end

    #set ($banner_count = 0)

    <menu class="menu">
        <a class="playpause" href="javascript:bannerNav.playpause();">Play / Pause</a>
        <a class="prev" href="javascript:bannerNav.prev();">Previous</a>

        #foreach ($e_banner in $banner.getSiblings())
            <a class="item" href="javascript:bannerNav.toBanner($banner_count);">$banner_count</a>

            #set ($banner_count = $banner_count + 1)
        #end

        <a class="next" href="javascript:bannerNav.next();">Next</a>
    </menu>
</div>


inside my portal_normal.vm after that I'm stack!!!!!! Don't know how to go further. I'm a newbie to LifeRay, so any help would be great.

Thanks

Leon
thumbnail
Daniele Baggio, modified 13 Years ago.

RE: New website picture slider?

Expert Posts: 336 Join Date: 12/5/08 Recent Posts
And now with Alloy? We need to convert javascript code.
Anyone already does it?
Julien Revert, modified 13 Years ago.

RE: New website picture slider?

New Member Post: 1 Join Date: 12/17/10 Recent Posts
Hi Nagendra,

This realy help yes, thanks.
There is just a small mistake in your code, your forgot an }.

Your code should be :

AUI().use('get', function(A){
   A.Get.script('http://code.jquery.com/jquery-1.4.4.min.js', {

       onSuccess: function(){

           // jQuery() can be used in here...
          
           // Added other js code related to banner navigation here
       }
});
});


The entire js field is in fact :

AUI().use('get', function(A){
	A.Get.script('http://code.jquery.com/jquery-1.4.4.min.js', {
		onSuccess: function(){
		 bannerNav = {};
		
		(function () {
			var item = 0,
			busy = false,
			paused = true,
			interval = null,
			animationSpeed = 0.6,
			animationInterval = 12,
			menuOpacityOff = 0.75,
			menuOpacityOn = 1,
			jQuery_banner,
			jQuery_banner_each,
			jQuery_banner_menu,
			jQuery_banner_item,
			jQuery_banner_play,
			jQuery_banner_img = new Image();
		
			jQuery(document).ready(
				function () {
					jQuery_banner = jQuery('#banner-nav');
		
					if (!jQuery_banner.length) {
						return;
					}
		
					jQuery_banner_each = jQuery_banner.children('.banner');
					jQuery_banner_menu = jQuery_banner.children('.menu');
					jQuery_banner_item = jQuery_banner_menu.children('.item');
					jQuery_banner_play = jQuery_banner_menu.children('.playpause');
		
					item = Math.round(Math.random() * jQuery_banner_each.length) - 1;
		
					bannerNav.toBanner = function (to, animationTime) {
						if (busy || item === to) {
							return;
						} else {
							busy = true;
						}
		
						jQuery_banner_item.eq(item).removeClass('selected');
						jQuery_banner_item.eq(to).addClass('selected').css('opacity', 0).css('opacity', 1).blur();
		
						jQuery_banner_each.eq(to).css('zIndex', 3).animate(
							{
								opacity: 1
							},
							animationTime,
							function () {
								jQuery_banner_each.eq(item).css(
									{
										opacity: 0,
										zIndex: 1
									}
								);
		
								jQuery_banner_each.eq(to).css('zIndex', 2);
		
								item = to;
								busy = false;
							}
						);
					};
		
					bannerNav.setInterval = function () {
						jQuery_banner_play.removeClass('paused');
		
						paused = false;
		
						interval = setInterval(
							function () {
								bannerNav.toBanner(item + 1 &gt; jQuery_banner_each.length - 1 ? 0 : item + 1, animationSpeed * 1000);
							},
							animationInterval * 1000
						);
					};
		
					bannerNav.clearInterval = function () {
						jQuery_banner_play.addClass('paused');
		
						paused = true;
		
						clearInterval(interval);
					};
		
					bannerNav.playpause = function () {
						if (paused) {
							setTimeout(
								function () {
									bannerNav.next(animationSpeed * 1000);
								},
								250
							);					
						} else {
							bannerNav.clearInterval();
						}
					};
		
					bannerNav.prev = function (animationTime) {
						bannerNav.clearInterval();
						bannerNav.toBanner(item - 1 &lt; 0 ? jQuery_banner_each.length - 1 : item - 1, animationTime || 1);
						bannerNav.setInterval();
					};
		
					bannerNav.next = function (animationTime) {
						bannerNav.clearInterval();
						bannerNav.toBanner(item + 1 &gt; jQuery_banner_each.length - 1 ? 0 : item + 1, animationTime || 1);
						bannerNav.setInterval();
					};
		
					jQuery_banner_item.eq(item).addClass('selected');
		
					jQuery_banner_menu.css('opacity', menuOpacityOff);
		
					jQuery_banner_img.onload = function () {
						jQuery_banner.bind(
							'mouseenter',
							function () {
								jQuery_banner_menu.animate(
									{
										opacity: menuOpacityOn
									},
									150
								)
							}
						).bind(
							'mouseleave',
							function () {
								jQuery_banner_menu.animate(
									{
										opacity: menuOpacityOff
									},
									300
								);
							}
						);
		
						jQuery_banner_each.eq(item).css(
							{
								opacity: 1,
								zIndex: 2
							}
						);
		
						bannerNav.setInterval();
					};
		
					if (item &lt; 0) {
						item = 0;
					}
		
					jQuery_banner_img.src = jQuery_banner_each.eq(item).css('background-image').replace(/^.*url\("{0,}|"{0,}\).*$/g, '');
				}
			);
			}());
			/* For HTML5 support in IE */
			(function(){if(!/*@cc_on!@*/0)return;var e = 'abbr,article,aside,audio,canvas,datalist,details,figure,figcaption,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,summary,time,video'.split(','),j=e.length+1;while(--j){document.createElement(e[j])}})();
		}
	});
});


Let me notice that the preview doesn't work because of AUI javascript missing in preview; but this work fine after publishing.

Julien
thumbnail
Achmed Tyrannus Albab, modified 13 Years ago.

RE: New website picture slider?

Regular Member Posts: 158 Join Date: 3/5/10 Recent Posts
Thank You Mr. Nagendra and Julien.
That fixed my 6.0.6. Used this on 5.2.3 too.
Nice slider thanks Jonathan You Happy Camper You!
I'm singing out loud the songs of victory for you guys...in the office..loudly..at 8pm..
Rrrrahhhhhh dum dam dum dam dum dam du dum...
Gavin Mills, modified 12 Years ago.

RE: New website picture slider?

New Member Posts: 3 Join Date: 4/8/11 Recent Posts
I started a post here about this banner not working in IE9 (before I became aware of this thread.)

There seems to be a problem that whenever you move the mouse in IE9 the banner suddenly switches to black.

I don't really think it's a problem with the JavaScript code, because it functions nicely in every other browser, however I thought it best to ask here in case anyone has any ideas and also to give people a heads-up if they are not aware of the problem.
thumbnail
Achmed Tyrannus Albab, modified 12 Years ago.

RE: New website picture slider?

Regular Member Posts: 158 Join Date: 3/5/10 Recent Posts
Gavin Mills:
I started a post here about this banner not working in IE9 (before I became aware of this thread.)

There seems to be a problem that whenever you move the mouse in IE9 the banner suddenly switches to black.

I don't really think it's a problem with the JavaScript code, because it functions nicely in every other browser, however I thought it best to ask here in case anyone has any ideas and also to give people a heads-up if they are not aware of the problem.


Thanks for noticing, i am having the same problem as well. When my mouse hovers on top (or not on top) of it the image goes blank. This happens only on IE9.
Weird enough thsi doesnt happen when i view the frontpage for Liferay.com.

Let me know if anyone ever fix this IE9 bug. Or script upgrade.

Cheers.

<--------------------UPDATE 23/09/2011---------------------->

Apparently this only happens with Liferay 5.2.3 and IE9 not with Liferay 6.0.5 and IE9.
Just a heads up. Maybe you could upgrade to newer Liferay.
thumbnail
Achmed Tyrannus Albab, modified 12 Years ago.

RE: New website picture slider?

Regular Member Posts: 158 Join Date: 3/5/10 Recent Posts
On my latest post before this, i said i noticed that the liferay.com banner doesn't have the flicker problem, yeah it doesn't and because its using YUI.
I had lost the link to the tutorial guide on how to do this in YUI. So i am just going to post it here for those who would like to use the YUI approach.

And FYI this portlet is via CMS Structure and Template. Hope this helps.
Structure:

 
<root>
  <dynamic-element name="duration" type="list" index-type="" repeatable="false">
  <meta-data>
			<entry name="displayAsTooltip">false</entry>
			<entry name="required">false</entry>
			<entry name="instructions">Select how long, in seconds, you would prefer to display an item before switching to the next slide</entry>
			<entry name="label">Item Duration</entry>
			<entry name="predefinedValue"></entry>
		</meta-data>

    <dynamic-element name="1" type="1" index-type="" repeatable="false">  </dynamic-element>
    <dynamic-element name="2" type="2" index-type="" repeatable="false">  </dynamic-element>
    <dynamic-element name="3" type="3" index-type="" repeatable="false">  </dynamic-element>
    <dynamic-element name="4" type="4" index-type="" repeatable="false">  </dynamic-element>
    <dynamic-element name="5" type="5" index-type="" repeatable="false">  </dynamic-element>
    <dynamic-element name="6" type="6" index-type="" repeatable="false">  </dynamic-element>
    <dynamic-element name="7" type="7" index-type="" repeatable="false">  </dynamic-element>
    <dynamic-element name="8" type="8" index-type="" repeatable="false">  </dynamic-element>
    <dynamic-element name="9" type="9" index-type="" repeatable="false">  </dynamic-element>
    <dynamic-element name="10" type="10" index-type="" repeatable="false"></dynamic-element>
  </dynamic-element>
  <dynamic-element name="height" type="text" index-type="" repeatable="false">
  <meta-data>
			<entry name="displayAsTooltip">false</entry>
			<entry name="required">true</entry>
			<entry name="instructions">This defines the height of the carousel, in pixels(px). Do not add "px" at the end of the value</entry>
			<entry name="label">Height</entry>
			<entry name="predefinedValue"></entry>
		</meta-data>
</dynamic-element>
  <dynamic-element name="width" type="text" index-type="" repeatable="false">
  <meta-data>
			<entry name="displayAsTooltip">false</entry>
			<entry name="required">true</entry>
			<entry name="instructions">This defines the width of the carousel, in pixels(px). Do not add "px" at the end of the value</entry>
			<entry name="label">Width</entry>
			<entry name="predefinedValue"></entry>
		</meta-data>
</dynamic-element>
  <dynamic-element name="content" type="text_area" index-type="text" repeatable="true">
  <meta-data>
			<entry name="displayAsTooltip">false</entry>
			<entry name="required">true</entry>
			<entry name="instructions">This is the content of this slide. To create more slides, click on the " " button</entry>
			<entry name="label">content</entry>
			<entry name="predefinedValue"></entry>
		</meta-data>
</dynamic-element>
</root>



Template:


#set ($contentId = $reserved-article-id.getData())
#set ($contentClass = "multiple-items-" + $contentId + "-carousel")

<style type="text/css" media="screen">
    #$contentClass {
        height: $height.getData()px;
        position: relative;
        width: $width.getData()px;
    }

    #$contentClass .carousel-item {
        height: $height.getData()px;
        overflow: hidden;
        width: $width.getData()px;
        position: absolute;
        top: 0;
    }
</style>

<div id="$contentClass">
    #foreach ($item in $content.getSiblings())
        <div class="carousel-item">
            $item.getData()
        </div>
    #end
</div>

<script type="text/javascript">
    AUI().ready(
    'aui-carousel',
    function(A) {
        var component = new A.Carousel(
            {
                activeIndex: 'rand',
                contentBox: '#$contentClass',
                height: $height.getData(),
                intervalTime: $duration.getData(),
                width: $width.getData()
            }
        )
        .render();
    });
</script>


Made on Liferay 6.0.6 and tested in Chrome15.0.874, IE8/9, Firefox5 and Safari 5.0.3.
If you have any questions its best you try searching for the original post. ;)
I hope this helps.

P/S: Don't get me wrong, Johnathan's slider is still great though but i don't think he has all the time to update it. Cheers mate!
sandeep tripathi, modified 12 Years ago.

RE: New website picture slider?

Regular Member Posts: 100 Join Date: 10/19/11 Recent Posts
hi Everyone

I was able to e change the flash banner with the following article . I had created the structured and template and change my flash banner but it is working fine on mozilla server but in IE7 the image show a black border .
the images that i am using are png image is the problem bcoz of png image it any body have any idea then pls help .

Regards
Sandeep
sandeep tripathi, modified 11 Years ago.

RE: New website picture slider?

Regular Member Posts: 100 Join Date: 10/19/11 Recent Posts
hi everyone,

the background banner image are not displaying in IE9 i had read some link and tried out the given solution but still it is not showing the content . does any body have any idea about it .

regards
Sandeep
Pablo M Mino, modified 13 Years ago.

RE: New website picture slider?

Regular Member Posts: 135 Join Date: 10/2/09 Recent Posts
Hi again

Well learning jQuery was easier than I thought and there are a lot of scripts out there to make it easier

I'm still on LR 6 and I coudln't make it work using LR jQuery, had to stick to use $ and target src myself

However I'm writting because I'm not sure if I found a bug or if it is the way I'm doing things

If I open the web content again all my & get converted to &amp; and the " to &quot;, if I save it the banner dies, and if I keep opening and saving the new & transform into &amp; so it becomes impossible to correct
thumbnail
William Valencia, modified 13 Years ago.

RE: New website picture slider?

New Member Post: 1 Join Date: 5/24/10 Recent Posts
Excelent resource!!! Thanks.
thumbnail
Happy K, modified 13 Years ago.

RE: New website picture slider?

Regular Member Posts: 145 Join Date: 1/31/11 Recent Posts
Hi Jonathan,

I want to use Liferay Alloy UI instead of JQuery to make image slider.

However I am not yet able to do so as can't find how to make the code with AUI.

Can you or anyone please help me?
thumbnail
Leo dil dil, modified 13 Years ago.

RE: New website picture slider?

New Member Posts: 9 Join Date: 7/1/09 Recent Posts
Jonathan Neal:
Pretty nifty, huh? No, no I didn't come here to pat myself on the back, but I'd be happy to share the source code with you, from the jQuery all the way to the structure and template! Just a sec.

Okay, here you go:


And I'm including a fully working example of the rotating banner @ http://sandbox.thewikies.com/liferay-rotating-banner/

EDIT: Updated links for improved functionality (independence from the theme)


These links are not working. Can I download them somewhere else.
I'm using LR 6.0.5. Any tips or help would be great.

Thanks
thumbnail
Leo dil dil, modified 13 Years ago.

RE: New website picture slider?

New Member Posts: 9 Join Date: 7/1/09 Recent Posts
Anyone any idea??
thumbnail
Krati Gupta, modified 13 Years ago.

RE: New website picture slider?

Regular Member Posts: 119 Join Date: 12/5/08 Recent Posts
Please help why by using picture slider , the application become very slow !!!!emoticonemoticon:
Hey I got the problem when I am running the rotating banner as a preview so when I am not able to see the images and in error console jQuery is not found error is coming .
So now plz help how to include Jquery in Web content display .
Andrea Caltroni, modified 12 Years ago.

RE: New website picture slider?

New Member Posts: 17 Join Date: 2/19/10 Recent Posts
Can anyone post a minimal set of instructions on how to install the 4 files to have this working for Liferay 6.x?
Where should each one of them go?

Thanks!