Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
New website picture slider? Byambadorj Oyunbat February 1, 2010 7:35 PM
RE: New website picture slider? Jonathan Neal March 5, 2010 8:08 AM
RE: New website picture slider? Ujwal Dhomne February 18, 2010 3:54 PM
RE: New website picture slider? Aaron Delani February 18, 2010 6:07 PM
RE: New website picture slider? Ujwal Dhomne February 19, 2010 8:30 AM
RE: New website picture slider? Jonathan Neal February 19, 2010 10:45 AM
RE: New website picture slider? Ujwal Dhomne February 19, 2010 2:10 PM
RE: New website picture slider? Ujwal Dhomne February 25, 2010 7:15 AM
RE: New website picture slider? Jonathan Neal March 2, 2010 8:20 AM
RE: New website picture slider? Matthias Fenz March 3, 2010 7:15 AM
RE: New website picture slider? Matthias Fenz March 3, 2010 7:55 AM
RE: New website picture slider? Matthias Fenz March 3, 2010 12:05 PM
RE: New website picture slider? Yan Naing Oo March 31, 2011 9:39 PM
RE: New website picture slider? Virendra Patidar January 20, 2011 5:48 AM
RE: New website picture slider? Ivano Carrara February 22, 2011 7:40 AM
RE: New website picture slider? Jonathan Neal February 22, 2011 7:46 AM
RE: New website picture slider? Ivano Carrara February 22, 2011 8:18 AM
RE: New website picture slider? Yan Naing Oo March 15, 2011 7:35 AM
RE: New website picture slider? Zeeshan Khan November 13, 2011 11:30 PM
RE: New website picture slider? sandeep tripathi November 17, 2011 4:17 AM
RE: New website picture slider? Zeeshan Khan November 17, 2011 4:59 AM
RE: New website picture slider? sandeep tripathi November 17, 2011 9:32 PM
RE: New website picture slider? Zeeshan Khan November 17, 2011 10:37 PM
RE: New website picture slider? Achmed Tyrannus Albab November 17, 2011 11:10 PM
RE: New website picture slider? Zeeshan Khan November 18, 2011 1:46 AM
RE: New website picture slider? Ashwin Khandelwal November 18, 2011 1:52 AM
RE: New website picture slider? Achmed Tyrannus Albab November 18, 2011 3:24 AM
RE: New website picture slider? Zeeshan Khan November 21, 2011 2:12 AM
RE: New website picture slider? Zeeshan Khan November 21, 2011 11:03 PM
RE: New website picture slider? Achmed Tyrannus Albab November 21, 2011 11:07 PM
RE: New website picture slider? Zeeshan Khan November 23, 2011 12:56 AM
RE: New website picture slider? Cristian Serban December 20, 2011 12:42 AM
RE: New website picture slider? Zeeshan Khan December 20, 2011 1:11 AM
RE: New website picture slider? Cristian Serban December 21, 2011 12:04 AM
RE: New website picture slider? Zeeshan Khan December 21, 2011 1:24 AM
RE: New website picture slider? Giuseppe Cultrera March 8, 2012 1:25 AM
RE: New website picture slider? Giuseppe Cultrera March 12, 2012 2:46 AM
RE: New website picture slider? sandeep tripathi December 21, 2011 2:41 AM
RE: New website picture slider? Cristian Serban December 21, 2011 11:23 PM
RE: New website picture slider? sandeep tripathi December 21, 2011 11:26 PM
RE: New website picture slider? Cristian Serban December 22, 2011 12:36 AM
RE: New website picture slider? Bimal Jhaveri September 21, 2011 11:37 AM
RE: New website picture slider? Jonathan Neal March 5, 2010 8:09 AM
RE: New website picture slider? Thomas Ricouard March 11, 2010 3:33 AM
RE: New website picture slider? Matthias Fenz March 12, 2010 12:26 AM
RE: New website picture slider? Thomas Ricouard March 12, 2010 12:40 AM
RE: New website picture slider? Matthias Fenz March 12, 2010 3:36 AM
RE: New website picture slider? Pablo M Mino March 26, 2010 1:18 PM
RE: New website picture slider? Pablo M Mino April 7, 2010 11:06 AM
RE: New website picture slider? Antonio Martínez May 13, 2010 12:50 AM
RE: New website picture slider? Matthias Fenz May 19, 2010 1:30 AM
RE: New website picture slider? Antonio Martínez June 8, 2010 12:41 AM
RE: New website picture slider? Matthias Fenz June 9, 2010 1:02 AM
RE: New website picture slider? Antonio Martínez June 10, 2010 7:39 AM
RE: New website picture slider? TJ Booz July 5, 2010 8:42 AM
RE: New website picture slider? Matthias Fenz October 1, 2010 3:19 AM
RE: New website picture slider? Mihael Palfi November 19, 2010 1:01 AM
RE: New website picture slider? Mihael Palfi November 22, 2010 1:44 AM
RE: New website picture slider? Achmed Tyrannus Albab December 8, 2010 8:11 PM
RE: New website picture slider? Krati Gupta December 1, 2010 10:27 PM
RE: New website picture slider? Nagendra Kumar Busam December 2, 2010 2:31 AM
RE: New website picture slider? Danny Francisco December 2, 2010 5:50 AM
RE: New website picture slider? Nagendra Kumar Busam December 2, 2010 6:32 AM
RE: New website picture slider? Leo dil dil December 2, 2010 7:25 AM
RE: New website picture slider? Daniele Baggio December 3, 2010 12:47 AM
RE: New website picture slider? Julien Revert September 21, 2011 10:57 PM
RE: New website picture slider? Achmed Tyrannus Albab April 1, 2011 4:41 AM
RE: New website picture slider? Gavin Mills April 8, 2011 1:33 AM
RE: New website picture slider? Achmed Tyrannus Albab September 22, 2011 8:00 PM
RE: New website picture slider? Achmed Tyrannus Albab November 17, 2011 6:48 PM
RE: New website picture slider? sandeep tripathi March 30, 2012 5:35 AM
RE: New website picture slider? sandeep tripathi April 9, 2012 11:32 PM
RE: New website picture slider? Pablo M Mino May 13, 2010 7:18 AM
RE: New website picture slider? William Valencia August 18, 2010 4:11 PM
RE: New website picture slider? Gaurav Jain February 3, 2011 9:56 PM
RE: New website picture slider? Leo dil dil November 26, 2010 3:02 AM
RE: New website picture slider? Leo dil dil November 26, 2010 11:45 AM
RE: New website picture slider? Krati Gupta December 28, 2010 3:46 AM
RE: New website picture slider? Andrea Caltroni October 11, 2011 9:03 AM
Byambadorj Oyunbat
New website picture slider?
February 1, 2010 7:35 PM
Answer

Byambadorj Oyunbat

Rank: New Member

Posts: 7

Join Date: August 31, 2009

Recent Posts



This is jquery or not?
Someone give me source code emoticon
Jonathan Neal
RE: New website picture slider?
March 5, 2010 8:08 AM
Answer

Jonathan Neal

LIFERAY STAFF

Rank: Junior Member

Posts: 66

Join Date: August 29, 2007

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
RE: New website picture slider?
February 18, 2010 3:54 PM
Answer

Ujwal Dhomne

Rank: New Member

Posts: 4

Join Date: February 18, 2010

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 ?
Anonymous
RE: New website picture slider?
February 18, 2010 6:07 PM
Answer

Anonymous

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
Ujwal Dhomne
RE: New website picture slider?
February 19, 2010 8:30 AM
Answer

Ujwal Dhomne

Rank: New Member

Posts: 4

Join Date: February 18, 2010

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 ?
Jonathan Neal
RE: New website picture slider?
February 19, 2010 10:45 AM
Answer

Jonathan Neal

LIFERAY STAFF

Rank: Junior Member

Posts: 66

Join Date: August 29, 2007

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
RE: New website picture slider?
February 19, 2010 2:10 PM
Answer

Ujwal Dhomne

Rank: New Member

Posts: 4

Join Date: February 18, 2010

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
RE: New website picture slider?
February 25, 2010 7:15 AM
Answer

Ujwal Dhomne

Rank: New Member

Posts: 4

Join Date: February 18, 2010

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 ?
Jonathan Neal
RE: New website picture slider?
March 2, 2010 8:20 AM
Answer

Jonathan Neal

LIFERAY STAFF

Rank: Junior Member

Posts: 66

Join Date: August 29, 2007

Recent Posts

Did you get this working? I imagined between the source alone and the working isolated demonstration, yes.
Matthias Fenz
RE: New website picture slider?
March 3, 2010 7:15 AM
Answer

Matthias Fenz

Rank: Junior Member

Posts: 79

Join Date: March 24, 2009

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
RE: New website picture slider?
March 3, 2010 7:55 AM
Answer

Matthias Fenz

Rank: Junior Member

Posts: 79

Join Date: March 24, 2009

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
RE: New website picture slider?
March 3, 2010 12:05 PM
Answer

Matthias Fenz

Rank: Junior Member

Posts: 79

Join Date: March 24, 2009

Recent Posts

i have the solution...

in the template, use the following:

 1
 2<div class="banner-nav" id="banner-nav">
 3    <h1 class="heading">
 4        Banners
 5    </h1>
 6
 7    #foreach ($e_banner in $banner.getSiblings())
 8        #set($e_banner_image = $e_banner.getData())
 9        #set($e_banner_text = $e_banner.getChild("text").getData())
10        #set($e_banner_link = $e_banner.getChild("link").getFriendlyUrl())
11
12        <a class="banner" href="$e_banner_link" style="background-image: url($e_banner_image);">
13            <p>
14                    $e_banner_text
15            </p>
16        </a>
17    #end
18
19
20    #set ($banner_count = 0)
21
22    <menu class="menu">
23        <a class="playpause" href="javascript:bannerNav.playpause();">Play / Pause</a>
24        <a class="prev" href="javascript:bannerNav.prev();">Previous</a>
25
26        #foreach ($e_banner in $banner.getSiblings())
27            <a class="item" href="javascript:bannerNav.toBanner($banner_count);">$banner_count</a>
28
29            #set ($banner_count = $banner_count + 1)
30        #end
31
32        <a class="next" href="javascript:bannerNav.next();">Next</a>
33    </menu>
34</div>
Jonathan Neal
RE: New website picture slider?
March 5, 2010 8:09 AM
Answer

Jonathan Neal

LIFERAY STAFF

Rank: Junior Member

Posts: 66

Join Date: August 29, 2007

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 =)
Thomas Ricouard
RE: New website picture slider?
March 11, 2010 3:33 AM
Answer

Thomas Ricouard

Rank: New Member

Posts: 18

Join Date: September 11, 2009

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
1[#set($e_banner_image = $e_banner.getData().replaceAll("&", "&").replaceAll("&", "&"))
2        #set($e_banner_text = $e_banner.getChild("Test").getData())
3        #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
 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
 2<html>
 3<head>
 4<title>Slidedhow</title>
 5<style type="text/css">
 6.slideshow { position:absolute; left:50%; right:50%; height: 232px; width: 400px; margin-top:5px; margin-bottom:5px; margin-left:-425px;}
 7.slideshow img { padding: 2px; border: 1px solid #ccc; }
 8body {
 9background-color: transparent;
10}
11</style>
12<!-- include jQuery library -->
13<script type="text/javascript" src="html/js/jquery/jquery.js"></script>
14
15<!-- include Cycle plugin -->
16<script type="text/javascript" src="http://download.ipodtutofast.com/slide/jquery.cycle.all.2.74.js"></script>
17
18
19<script type="text/javascript">
20$(document).ready(function() {
21    $('.slideshow').cycle({
22        fx: 'fade' // transision possible ex: fade, scrollUp, shuffle, etc...
23    });
24});
25</script>
26</head>
27<body background-color:transparent>
28    <div class="slideshow">
29        <img src="http://www.waza-solutions.com/medias/Image/_img_dyn/med/banner_sage10001221898212.jpg" width="850" height="200" />
30        <img src="http://www.manapps.tm.fr/manapps/images/crm/sage/sage-banner.png" width="500" height="200" />
31    </div>
32   
33   
34   
35</body>
36</html>



Thanks in advance.
Matthias Fenz
RE: New website picture slider?
March 12, 2010 12:26 AM
Answer

Matthias Fenz

Rank: Junior Member

Posts: 79

Join Date: March 24, 2009

Recent Posts

thomas, in your function, replace $ by jQuery and it should work...

Thomas Ricouard:


If i understand correctly I have to edit
1[#set($e_banner_image = $e_banner.getData().replaceAll("&", "&").replaceAll("&", "&"))
2        #set($e_banner_text = $e_banner.getChild("Test").getData())
3        #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! ;)
Thomas Ricouard
RE: New website picture slider?
March 12, 2010 12:40 AM
Answer

Thomas Ricouard

Rank: New Member

Posts: 18

Join Date: September 11, 2009

Recent Posts

thomas, in your function, replace $ by jQuery and it should work...


Sorry but which functions ?

Thanks emoticon
Matthias Fenz
RE: New website picture slider?
March 12, 2010 3:36 AM
Answer

Matthias Fenz

Rank: Junior Member

Posts: 79

Join Date: March 24, 2009

Recent Posts

this function...

1<script type="text/javascript">
2$(document).ready(function() {
3    $('.slideshow').cycle({
4        fx: 'fade' // transision possible ex: fade, scrollUp, shuffle, etc...
5    });
6});
7</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
RE: New website picture slider?
March 26, 2010 1:18 PM
Answer

Pablo M Mino

Rank: Regular Member

Posts: 135

Join Date: October 2, 2009

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
RE: New website picture slider?
April 7, 2010 11:06 AM
Answer

Pablo M Mino

Rank: Regular Member

Posts: 135

Join Date: October 2, 2009

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
RE: New website picture slider?
May 13, 2010 12:50 AM
Answer

Antonio Martínez

Rank: Junior Member

Posts: 32

Join Date: January 14, 2009

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:

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


In your template i saw:

1#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.
Pablo M Mino
RE: New website picture slider?
May 13, 2010 7:18 AM
Answer

Pablo M Mino

Rank: Regular Member

Posts: 135

Join Date: October 2, 2009

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
Matthias Fenz
RE: New website picture slider?
May 19, 2010 1:30 AM
Answer

Matthias Fenz

Rank: Junior Member

Posts: 79

Join Date: March 24, 2009

Recent Posts

Antonio Martínez:



1#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
RE: New website picture slider?
June 8, 2010 12:41 AM
Answer

Antonio Martínez

Rank: Junior Member

Posts: 32

Join Date: January 14, 2009

Recent Posts

Matthias Fenz:
Antonio Martínez:



1#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
RE: New website picture slider?
June 9, 2010 1:02 AM
Answer

Matthias Fenz

Rank: Junior Member

Posts: 79

Join Date: March 24, 2009

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
RE: New website picture slider?
June 10, 2010 7:39 AM
Answer

Antonio Martínez

Rank: Junior Member

Posts: 32

Join Date: January 14, 2009

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

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


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.
TJ Booz
RE: New website picture slider?
July 5, 2010 8:42 AM
Answer

TJ Booz

Rank: New Member

Posts: 1

Join Date: March 15, 2010

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?
William Valencia
RE: New website picture slider?
August 18, 2010 4:11 PM
Answer

William Valencia

Rank: New Member

Posts: 1

Join Date: May 24, 2010

Recent Posts

Excelent resource!!! Thanks.
Matthias Fenz
RE: New website picture slider?
October 1, 2010 3:19 AM
Answer

Matthias Fenz

Rank: Junior Member

Posts: 79

Join Date: March 24, 2009

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
RE: New website picture slider?
November 19, 2010 1:01 AM
Answer

Mihael Palfi

Rank: New Member

Posts: 20

Join Date: November 5, 2010

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
RE: New website picture slider?
November 22, 2010 1:44 AM
Answer

Mihael Palfi

Rank: New Member

Posts: 20

Join Date: November 5, 2010

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
Leo dil dil
RE: New website picture slider?
November 26, 2010 3:02 AM
Answer

Leo dil dil

Rank: New Member

Posts: 9

Join Date: July 1, 2009

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
Leo dil dil
RE: New website picture slider?
November 26, 2010 11:45 AM
Answer

Leo dil dil

Rank: New Member

Posts: 9

Join Date: July 1, 2009

Recent Posts

Anyone any idea??
Krati Gupta
RE: New website picture slider?
December 1, 2010 10:27 PM
Answer

Krati Gupta

Rank: Regular Member

Posts: 113

Join Date: December 5, 2008

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 .
Nagendra Kumar Busam
RE: New website picture slider?
December 2, 2010 2:31 AM
Answer

Nagendra Kumar Busam

Rank: Liferay Master

Posts: 637

Join Date: July 7, 2009

Recent Posts

Hi,

Does any body made it work in Liferay 6.0.5?

Regards,
- Nagendra Kumar
Danny Francisco
RE: New website picture slider?
December 2, 2010 5:50 AM
Answer

Danny Francisco

Rank: New Member

Posts: 10

Join Date: December 12, 2008

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
Nagendra Kumar Busam
RE: New website picture slider?
December 2, 2010 6:32 AM
Answer

Nagendra Kumar Busam

Rank: Liferay Master

Posts: 637

Join Date: July 7, 2009

Recent Posts

Hi Danny,

Just now i made it working. I am doing the same way you are including jQuery
 1
 2AUI().use('get', function(A){
 3    A.Get.script('http://code.jquery.com/jquery-1.4.4.min.js', {
 4
 5       onSuccess: function(){
 6
 7           // jQuery() can be used in here...
 8          
 9           // Added other js code related to banner navigation here
10 });
11});


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

Regards,
- Nagendra Kumar
Leo dil dil
RE: New website picture slider?
December 2, 2010 7:25 AM
Answer

Leo dil dil

Rank: New Member

Posts: 9

Join Date: July 1, 2009

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
 1
 2<div class="banner-nav" id="banner-nav">
 3     <h1 class="heading">
 4         Banners
 5     </h1>
 6
 7     #foreach ($e_banner in $banner.getSiblings())
 8        #set($e_banner_image = $e_banner.getData())
 9        #set($e_banner_text = $e_banner.getChild("text").getData())
10        #set($e_banner_link = $e_banner.getChild("link").getFriendlyUrl())
11
12        <a class="banner" href="$e_banner_link" style="background-image: url($e_banner_image);">
13            <p>
14                    $e_banner_text
15            </p>
16        </a>
17    #end
18
19    #set ($banner_count = 0)
20
21    <menu class="menu">
22        <a class="playpause" href="javascript:bannerNav.playpause();">Play / Pause</a>
23        <a class="prev" href="javascript:bannerNav.prev();">Previous</a>
24
25        #foreach ($e_banner in $banner.getSiblings())
26            <a class="item" href="javascript:bannerNav.toBanner($banner_count);">$banner_count</a>
27
28            #set ($banner_count = $banner_count + 1)
29        #end
30
31        <a class="next" href="javascript:bannerNav.next();">Next</a>
32    </menu>
33</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
Daniele Baggio
RE: New website picture slider?
December 3, 2010 12:47 AM
Answer

Daniele Baggio

Rank: Regular Member

Posts: 172

Join Date: December 5, 2008

Recent Posts

And now with Alloy? We need to convert javascript code.
Anyone already does it?
Achmed Tyrannus Albab
RE: New website picture slider?
December 8, 2010 8:11 PM
Answer

Achmed Tyrannus Albab

Rank: Junior Member

Posts: 66

Join Date: March 5, 2010

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

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


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
1#set($e_banner_link = $e_banner.getChild("[b]link[/b]").getData())

to
1#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.
Krati Gupta
RE: New website picture slider?
December 28, 2010 3:46 AM
Answer

Krati Gupta

Rank: Regular Member

Posts: 113

Join Date: December 5, 2008

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 .
Julien Revert
RE: New website picture slider?
September 21, 2011 10:57 PM
Answer

Julien Revert

Rank: New Member

Posts: 1

Join Date: December 17, 2010

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 :
 1
 2AUI().use('get', function(A){
 3   A.Get.script('http://code.jquery.com/jquery-1.4.4.min.js', {
 4
 5       onSuccess: function(){
 6
 7           // jQuery() can be used in here...
 8         
 9           // Added other js code related to banner navigation here
10       }
11});
12});


The entire js field is in fact :
  1
  2AUI().use('get', function(A){
  3    A.Get.script('http://code.jquery.com/jquery-1.4.4.min.js', {
  4        onSuccess: function(){
  5         bannerNav = {};
  6       
  7        (function () {
  8            var item = 0,
  9            busy = false,
 10            paused = true,
 11            interval = null,
 12            animationSpeed = 0.6,
 13            animationInterval = 12,
 14            menuOpacityOff = 0.75,
 15            menuOpacityOn = 1,
 16            jQuery_banner,
 17            jQuery_banner_each,
 18            jQuery_banner_menu,
 19            jQuery_banner_item,
 20            jQuery_banner_play,
 21            jQuery_banner_img = new Image();
 22       
 23            jQuery(document).ready(
 24                function () {
 25                    jQuery_banner = jQuery('#banner-nav');
 26       
 27                    if (!jQuery_banner.length) {
 28                        return;
 29                    }
 30       
 31                    jQuery_banner_each = jQuery_banner.children('.banner');
 32                    jQuery_banner_menu = jQuery_banner.children('.menu');
 33                    jQuery_banner_item = jQuery_banner_menu.children('.item');
 34                    jQuery_banner_play = jQuery_banner_menu.children('.playpause');
 35       
 36                    item = Math.round(Math.random() * jQuery_banner_each.length) - 1;
 37       
 38                    bannerNav.toBanner = function (to, animationTime) {
 39                        if (busy || item === to) {
 40                            return;
 41                        } else {
 42                            busy = true;
 43                        }
 44       
 45                        jQuery_banner_item.eq(item).removeClass('selected');
 46                        jQuery_banner_item.eq(to).addClass('selected').css('opacity', 0).css('opacity', 1).blur();
 47       
 48                        jQuery_banner_each.eq(to).css('zIndex', 3).animate(
 49                            {
 50                                opacity: 1
 51                            },
 52                            animationTime,
 53                            function () {
 54                                jQuery_banner_each.eq(item).css(
 55                                    {
 56                                        opacity: 0,
 57                                        zIndex: 1
 58                                    }
 59                                );
 60       
 61                                jQuery_banner_each.eq(to).css('zIndex', 2);
 62       
 63                                item = to;
 64                                busy = false;
 65                            }
 66                        );
 67                    };
 68       
 69                    bannerNav.setInterval = function () {
 70                        jQuery_banner_play.removeClass('paused');
 71       
 72                        paused = false;
 73       
 74                        interval = setInterval(
 75                            function () {
 76                                bannerNav.toBanner(item + 1 > jQuery_banner_each.length - 1 ? 0 : item + 1, animationSpeed * 1000);
 77                            },
 78                            animationInterval * 1000
 79                        );
 80                    };
 81       
 82                    bannerNav.clearInterval = function () {
 83                        jQuery_banner_play.addClass('paused');
 84       
 85                        paused = true;
 86       
 87                        clearInterval(interval);
 88                    };
 89       
 90                    bannerNav.playpause = function () {
 91                        if (paused) {
 92                            setTimeout(
 93                                function () {
 94                                    bannerNav.next(animationSpeed * 1000);
 95                                },
 96                                250
 97                            );                   
 98                        } else {
 99                            bannerNav.clearInterval();
100                        }
101                    };
102       
103                    bannerNav.prev = function (animationTime) {
104                        bannerNav.clearInterval();
105                        bannerNav.toBanner(item - 1 < 0 ? jQuery_banner_each.length - 1 : item - 1, animationTime || 1);
106                        bannerNav.setInterval();
107                    };
108       
109                    bannerNav.next = function (animationTime) {
110                        bannerNav.clearInterval();
111                        bannerNav.toBanner(item + 1 > jQuery_banner_each.length - 1 ? 0 : item + 1, animationTime || 1);
112                        bannerNav.setInterval();
113                    };
114       
115                    jQuery_banner_item.eq(item).addClass('selected');
116       
117                    jQuery_banner_menu.css('opacity', menuOpacityOff);
118       
119                    jQuery_banner_img.onload = function () {
120                        jQuery_banner.bind(
121                            'mouseenter',
122                            function () {
123                                jQuery_banner_menu.animate(
124                                    {
125                                        opacity: menuOpacityOn
126                                    },
127                                    150
128                                )
129                            }
130                        ).bind(
131                            'mouseleave',
132                            function () {
133                                jQuery_banner_menu.animate(
134                                    {
135                                        opacity: menuOpacityOff
136                                    },
137                                    300
138                                );
139                            }
140                        );
141       
142                        jQuery_banner_each.eq(item).css(
143                            {
144                                opacity: 1,
145                                zIndex: 2
146                            }
147                        );
148       
149                        bannerNav.setInterval();
150                    };
151       
152                    if (item < 0) {
153                        item = 0;
154                    }
155       
156                    jQuery_banner_img.src = jQuery_banner_each.eq(item).css('background-image').replace(/^.*url\("{0,}|"{0,}\).*$/g, '');
157                }
158            );
159            }());
160            /* For HTML5 support in IE */
161            (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])}})();
162        }
163    });
164});


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

Julien
Virendra Patidar
RE: New website picture slider?
January 20, 2011 5:48 AM
Answer

Virendra Patidar

Rank: New Member

Posts: 13

Join Date: August 15, 2010

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..
Gaurav Jain
RE: New website picture slider?
February 3, 2011 9:56 PM
Answer

Gaurav Jain

Rank: Regular Member

Posts: 141

Join Date: January 31, 2011

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?
Ivano Carrara
RE: New website picture slider?
February 22, 2011 7:40 AM
Answer

Ivano Carrara

Rank: Regular Member

Posts: 228

Join Date: July 2, 2005

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
Jonathan Neal
RE: New website picture slider?
February 22, 2011 7:46 AM
Answer

Jonathan Neal

LIFERAY STAFF

Rank: Junior Member

Posts: 66

Join Date: August 29, 2007

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!
Ivano Carrara
RE: New website picture slider?
February 22, 2011 8:18 AM
Answer

Ivano Carrara

Rank: Regular Member

Posts: 228

Join Date: July 2, 2005

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
RE: New website picture slider?
March 15, 2011 7:35 AM
Answer

Yan Naing Oo

Rank: Regular Member

Posts: 180

Join Date: February 17, 2011

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
Yan Naing Oo
RE: New website picture slider?
March 31, 2011 9:39 PM
Answer

Yan Naing Oo

Rank: Regular Member

Posts: 180

Join Date: February 17, 2011

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
Attachment

Attachments: preview.JPG (5.9k)
Achmed Tyrannus Albab
RE: New website picture slider?
April 1, 2011 4:41 AM
Answer

Achmed Tyrannus Albab

Rank: Junior Member

Posts: 66

Join Date: March 5, 2010

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
RE: New website picture slider?
April 8, 2011 1:33 AM
Answer

Gavin Mills

Rank: New Member

Posts: 3

Join Date: April 7, 2011

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.
Bimal Jhaveri
RE: New website picture slider?
September 21, 2011 11:37 AM
Answer

Bimal Jhaveri

Rank: New Member

Posts: 1

Join Date: September 21, 2011

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,
Achmed Tyrannus Albab
RE: New website picture slider?
September 22, 2011 8:00 PM
Answer

Achmed Tyrannus Albab

Rank: Junior Member

Posts: 66

Join Date: March 5, 2010

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.
Andrea Caltroni
RE: New website picture slider?
October 11, 2011 9:03 AM
Answer

Andrea Caltroni

Rank: New Member

Posts: 17

Join Date: February 19, 2010

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!
Zeeshan Khan
RE: New website picture slider?
November 13, 2011 11:30 PM
Answer

Zeeshan Khan

Rank: Expert

Posts: 349

Join Date: July 20, 2011

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
RE: New website picture slider?
November 17, 2011 4:17 AM
Answer

sandeep tripathi

Rank: Regular Member

Posts: 100

Join Date: October 19, 2011

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
Zeeshan Khan
RE: New website picture slider?
November 17, 2011 4:59 AM
Answer

Zeeshan Khan

Rank: Expert

Posts: 349

Join Date: July 20, 2011

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 !!!
Achmed Tyrannus Albab
RE: New website picture slider?
November 17, 2011 6:48 PM
Answer

Achmed Tyrannus Albab

Rank: Junior Member

Posts: 66

Join Date: March 5, 2010

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:
 1
 2
 3<root>
 4  <dynamic-element name='duration' type='list' index-type='' repeatable='false'>
 5  <meta-data>
 6            <entry name="displayAsTooltip"><![CDATA[false]]></entry>
 7            <entry name="required"><![CDATA[false]]></entry>
 8            <entry name="instructions"><![CDATA[Select how long, in seconds, you would prefer to display an item before switching to the next slide]]></entry>
 9            <entry name="label"><![CDATA[Item Duration]]></entry>
10            <entry name="predefinedValue"><![CDATA[]]></entry>
11        </meta-data>
12
13    <dynamic-element name='1' type='1' index-type='' repeatable='false'>  </dynamic-element>
14    <dynamic-element name='2' type='2' index-type='' repeatable='false'>  </dynamic-element>
15    <dynamic-element name='3' type='3' index-type='' repeatable='false'>  </dynamic-element>
16    <dynamic-element name='4' type='4' index-type='' repeatable='false'>  </dynamic-element>
17    <dynamic-element name='5' type='5' index-type='' repeatable='false'>  </dynamic-element>
18    <dynamic-element name='6' type='6' index-type='' repeatable='false'>  </dynamic-element>
19    <dynamic-element name='7' type='7' index-type='' repeatable='false'>  </dynamic-element>
20    <dynamic-element name='8' type='8' index-type='' repeatable='false'>  </dynamic-element>
21    <dynamic-element name='9' type='9' index-type='' repeatable='false'>  </dynamic-element>
22    <dynamic-element name='10' type='10' index-type='' repeatable='false'></dynamic-element>
23  </dynamic-element>
24  <dynamic-element name='height' type='text' index-type='' repeatable='false'>
25  <meta-data>
26            <entry name="displayAsTooltip"><![CDATA[false]]></entry>
27            <entry name="required"><![CDATA[true]]></entry>
28            <entry name="instructions"><![CDATA[This defines the height of the carousel, in pixels(px). Do not add "px" at the end of the value]]></entry>
29            <entry name="label"><![CDATA[Height]]></entry>
30            <entry name="predefinedValue"><![CDATA[]]></entry>
31        </meta-data>
32</dynamic-element>
33  <dynamic-element name='width' type='text' index-type='' repeatable='false'>
34  <meta-data>
35            <entry name="displayAsTooltip"><![CDATA[false]]></entry>
36            <entry name="required"><![CDATA[true]]></entry>
37            <entry name="instructions"><![CDATA[This defines the width of the carousel, in pixels(px). Do not add "px" at the end of the value]]></entry>
38            <entry name="label"><![CDATA[Width]]></entry>
39            <entry name="predefinedValue"><![CDATA[]]></entry>
40        </meta-data>
41</dynamic-element>
42  <dynamic-element name='content' type='text_area' index-type='text' repeatable='true'>
43  <meta-data>
44            <entry name="displayAsTooltip"><![CDATA[false]]></entry>
45            <entry name="required"><![CDATA[true]]></entry>
46            <entry name="instructions"><![CDATA[This is the content of this slide. To create more slides, click on the " " button]]></entry>
47            <entry name="label"><![CDATA[content]]></entry>
48            <entry name="predefinedValue"><![CDATA[]]></entry>
49        </meta-data>
50</dynamic-element>
51</root>


Template:
 1
 2
 3#set ($contentId = $reserved-article-id.getData())
 4#set ($contentClass = "multiple-items-" + $contentId + "-carousel")
 5
 6<style type="text/css" media="screen">
 7    #$contentClass {
 8        height: $height.getData()px;
 9        position: relative;
10        width: $width.getData()px;
11    }
12
13    #$contentClass .carousel-item {
14        height: $height.getData()px;
15        overflow: hidden;
16        width: $width.getData()px;
17        position: absolute;
18        top: 0;
19    }
20</style>
21
22<div id="$contentClass">
23    #foreach ($item in $content.getSiblings())
24        <div class="carousel-item">
25            $item.getData()
26        </div>
27    #end
28</div>
29
30<script type="text/javascript">
31    AUI().ready(
32    'aui-carousel',
33    function(A) {
34        var component = new A.Carousel(
35            {
36                activeIndex: 'rand',
37                contentBox: '#$contentClass',
38                height: $height.getData(),
39                intervalTime: $duration.getData(),
40                width: $width.getData()
41            }
42        )
43        .render();
44    });
45</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
RE: New website picture slider?
November 17, 2011 9:32 PM
Answer

sandeep tripathi

Rank: Regular Member

Posts: 100

Join Date: October 19, 2011

Recent Posts

Hi Zeeshan,

u can use this link

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

Regards
Sandeep
Zeeshan Khan
RE: New website picture slider?
November 17, 2011 10:37 PM
Answer

Zeeshan Khan

Rank: Expert

Posts: 349

Join Date: July 20, 2011

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 !!
Achmed Tyrannus Albab
RE: New website picture slider?
November 17, 2011 11:10 PM
Answer

Achmed Tyrannus Albab

Rank: Junior Member

Posts: 66

Join Date: March 5, 2010

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.
Zeeshan Khan
RE: New website picture slider?
November 18, 2011 1:46 AM
Answer

Zeeshan Khan

Rank: Expert

Posts: 349

Join Date: July 20, 2011

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
Ashwin Khandelwal
RE: New website picture slider?
November 18, 2011 1:52 AM
Answer

Ashwin Khandelwal

Rank: Junior Member

Posts: 42

Join Date: October 14, 2011

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
Achmed Tyrannus Albab
RE: New website picture slider?
November 18, 2011 3:24 AM
Answer

Achmed Tyrannus Albab

Rank: Junior Member

Posts: 66

Join Date: March 5, 2010

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.
Zeeshan Khan
RE: New website picture slider?
November 21, 2011 2:12 AM
Answer

Zeeshan Khan

Rank: Expert

Posts: 349

Join Date: July 20, 2011

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
Zeeshan Khan
RE: New website picture slider?
November 21, 2011 11:03 PM
Answer

Zeeshan Khan

Rank: Expert

Posts: 349

Join Date: July 20, 2011

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 !!
Attachment

Attachments: lfr.png (219.8k)
Achmed Tyrannus Albab
RE: New website picture slider?
November 21, 2011 11:07 PM
Answer

Achmed Tyrannus Albab

Rank: Junior Member

Posts: 66

Join Date: March 5, 2010

Recent Posts

That i guess you have to develop it yourself or google around.
Good luck.
Zeeshan Khan
RE: New website picture slider?
November 23, 2011 12:56 AM
Answer

Zeeshan Khan

Rank: Expert

Posts: 349

Join Date: July 20, 2011

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
RE: New website picture slider?
December 20, 2011 12:42 AM
Answer

Cristian Serban

Rank: New Member

Posts: 14

Join Date: September 5, 2011

Recent Posts

Hi,

The component that you look for is called AUI Scroller

You can see it in action here
Zeeshan Khan
RE: New website picture slider?
December 20, 2011 1:11 AM
Answer

Zeeshan Khan

Rank: Expert

Posts: 349

Join Date: July 20, 2011

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
RE: New website picture slider?
December 21, 2011 12:04 AM
Answer

Cristian Serban

Rank: New Member

Posts: 14

Join Date: September 5, 2011

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

 1<div id="scroller-content">
 2                <div class="cisco">
 3                    <a href="#">
 4                        <img src="1.png" width="81" height="37" alt="Cisco"/>
 5                    </a>
 6                </div>
 7                <div class="sesame-street">
 8                    <a href="#">
 9                        <img src="2.png" width="81" height="37" alt="Sesame Street"/>
10                    </a>
11                </div>
12            </div>


you need to create the script for it:
 1
 2AUI().ready('aui-scroller', function (A) {
 3    var component = new A.Scroller({
 4            contentBox: '#scroller-content',
 5            height: 45,
 6            //width: 640,
 7            orientation: 'horizontal'
 8        }).render();
 9});


this should be all!
Zeeshan Khan
RE: New website picture slider?
December 21, 2011 1:24 AM
Answer

Zeeshan Khan

Rank: Expert

Posts: 349

Join Date: July 20, 2011

Recent Posts

thnx very much Cristian........ emoticonemoticon
sandeep tripathi
RE: New website picture slider?
December 21, 2011 2:41 AM
Answer

sandeep tripathi

Rank: Regular Member

Posts: 100

Join Date: October 19, 2011

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
RE: New website picture slider?
December 21, 2011 11:23 PM
Answer

Cristian Serban

Rank: New Member

Posts: 14

Join Date: September 5, 2011

Recent Posts

Hi,

What version of Alloy and Liferay are u using?
sandeep tripathi
RE: New website picture slider?
December 21, 2011 11:26 PM
Answer

sandeep tripathi

Rank: Regular Member

Posts: 100

Join Date: October 19, 2011

Recent Posts

Hi
liferay 6.0.5
Cristian Serban
RE: New website picture slider?
December 22, 2011 12:36 AM
Answer

Cristian Serban

Rank: New Member

Posts: 14

Join Date: September 5, 2011

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.
Giuseppe Cultrera
RE: New website picture slider?
March 8, 2012 1:25 AM
Answer

Giuseppe Cultrera

Rank: New Member

Posts: 4

Join Date: January 20, 2010

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
RE: New website picture slider?
March 12, 2012 2:46 AM
Answer

Giuseppe Cultrera

Rank: New Member

Posts: 4

Join Date: January 20, 2010

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

 1<div id="scroller-content">
 2                <div class="cisco">
 3                    <a href="#">
 4                        <img src="1.png" width="81" height="37" alt="Cisco"/>
 5                    </a>
 6                </div>
 7                <div class="sesame-street">
 8                    <a href="#">
 9                        <img src="2.png" width="81" height="37" alt="Sesame Street"/>
10                    </a>
11                </div>
12            </div>


you need to create the script for it:
 1
 2AUI().ready('aui-scroller', function (A) {
 3    var component = new A.Scroller({
 4            contentBox: '#scroller-content',
 5            height: 45,
 6            //width: 640,
 7            orientation: 'horizontal'
 8        }).render();
 9});


this should be all!
sandeep tripathi
RE: New website picture slider?
March 30, 2012 5:35 AM
Answer

sandeep tripathi

Rank: Regular Member

Posts: 100

Join Date: October 19, 2011

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
RE: New website picture slider?
April 9, 2012 11:32 PM
Answer

sandeep tripathi

Rank: Regular Member

Posts: 100

Join Date: October 19, 2011

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