Ajax Image Rotation in Header Not Flash

Hi all
I have a site that i am trying to get an ’image rotator’ on (i.e. I want various images fade in/out as a header advert/banner for the sites services).

I have recently migrated from Joomla to Modx as it is nice clean code etc... (I don’t have to tell you guys... right?)

However, in joomla a common feature was to be able to use ’Ajax’ header modules that would do roatate any image from a specified images directory with controls for fading times etc
I can’t locate anything similar in modx apart from ’JWImageRotator ’ but this uses flash... which means i cant use because:

One: I hate flash
Two: I have lovely compliant CSS dropdown menus above the header which apparently will not work if they have to dropdown/appear over the flash object when moused.
Three: I want my pages to stay compliant
Four: I hate flash

Is there any module i can use or any ideas that anyone can suggest... or do i need to run off back to Joomla where its safe

Thanks

I’ve done this in the past by using http://script.aculo.us/

There is an old snippet SimpleSlideShow (or something like that) that will do this. However it uses some old JS and is a bit buggy. I would use a JS library (my favorite would be jQuery) to accomplish this.

Check out the Cycle plugin for jQuery: http://www.malsup.com/jquery/cycle/begin.html

Thanks dev_cv and grahoom for your links and suggestions... not sure which solution i prefer yet I will give them a go...

You could actually do that effect very easily with MaxiGallery. Just set it to slide show mode.

Quote from: ganeshXL at Sep 01, 2008, 09:09 AM

You can use any kind of JS/HTML/CSS with MODx. If you want to use http://demo.joomlaworks.gr/ go right ahead (assuming it’s some kind of open-source license).
Instructions for non-Joomla sites are here: http://forum.joomlaworks.gr/index.php?topic=1777.0

Thanks for the tip... I have been playing with the solution Dev_cw left (jquery) and it seems to be doing the trick so far although I am having a bit of difficulty making the call work... that’s probably just me putting it in the wrong place:
I have the UL (as sample below) but I am not sure where I put the jquery plugin script that is shown below... can snippets ’call’ java?

<ul id="ajax">
<li> <a href="http://www.mysite.com"><img src="Banners/banner 1.jpg" alt="Banner 1" /></a></li>
<li> <a href="http://www.mysite.com"><img src="Banners/banner 2.jpg" alt="banner 2" /></a></li>
<li> <a href="http://www.mysite.com"><img src="Banners/banner 3.jpg" alt="banner 3" /></a></li>
</ul>

I am not sure where this should go... in a snippet? >>>

$(’ul#ajax’).innerfade({
speed: 1000,
timeout: 5000,
type: ’sequence’,
containerheight: ’170px’
});

Thanks for any help.

You need to declare this in a jquery document declaration. I use jQuery in noConflict mode to avoid any conflicts with other libraries that use the $ variable.



You could also have this in a .js file and call it in the header after loading jquery and the plugins.

Quote from: dev_cw at Sep 01, 2008, 11:25 AM

You need to declare this in a jquery document declaration. I use jQuery in noConflict mode to avoid any conflicts with other libraries that use the $ variable.

<script type="text/javascript"> 
		     jQuery.noConflict();
		     	jQuery(document).ready(function($){ 
		        $('ul#ajax').innerfade({
		        speed: 1000,
		        timeout: 5000,
		        type: 'sequence',
		        containerheight: '170px'
		        });
		 });

Hi Dev
I put the script you gave me above in a java doc called ’javacustom.js’ and called it in my page template head as below:

<link href="styles/style.css" rel="stylesheet" type="text/css" />
<link href="styles/menu.css" rel="stylesheet" type="text/css" />
<link href="styles/form.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" media="print" href="styles/print.css" />
<script src="assets/js/content_tabs.js" language="javascript" type="text/javascript"></script>
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/jquery.innerfade.js"></script>
<script type="text/javascript" src="assets/js/javacustom.js"></script>

However when i paste the ajax UL (previous post) into the homepage header area (inside a Div as a template variable ) the ’li’ images just display as a list... no fade and on top of each other... i have obviousl;y missed something... any ideas?

sorry to be useless I am new to Modx and java

thanks

The call in the header seems OK, provided all the appropriate files are there.
The script posted by Shane has to be placed in the header after the
[tt]<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/jquery.innerfade.js"></script>[/tt]

but before [tt]</head>[/tt]

If you put the jquery stuff in a file, you have to remove
[tt]<script type="text/javascript"> [/tt] at the beginning and [tt]</script>[/tt] at the end

@Shane : One quick note about noConflict didn’t know you could use it that way... I always used it this way :
[tt]var $j = jQuery.noConflict();[/tt]
and then you use $j instead of $.

Hi David
I was wrting a ’success’ response just as you were posting... I have sorted it now thanks... just as you said.

I used the Jquery solution in the end as I was having too many configuration problems with MaxiGallery and it would not write to a directory (even though it was chmodded correctly etc) I am sure this is down to me... but as I now have the jquery working i just dont care!

;D
Thanks all those that helped... particularly dev_cw.