Hi All,

I have created a site that uses the Event Calendar. Each event has a thumbnail image associated with it, and this thumbnail image is then enlarged and displayed on the homepage as up-coming events.

http://www.srmpromotions.com/

(excuse the untidy look at the moment)

What I would like to do is make these Event images on the Homepage a little more dynamic, more exciting and rotate between all the up-coming events, either with simple code, or some kind of flash integration.

Does anyone have any ideas on what I could do, and how I could do it.

This is my code setup at the moment:

Homepage.php

function HomeEvent() 
{ 
return DataObject::get_one("CalendarEvent"); 
}

Homepage.ss

<div id="HomeTopState">
 <% control HomeEvent.Image %>
            <li><img src="$URL" alt=""/></li>
 <% end_control %>
</div>

Anything at all, I'm in need of inspiration.

Thanks.

If you want to rotate imagery / text have alook at the awesome jquery cycle plugin - http://malsup.com/jquery/cycle/

Thanks, Looks great!
I'm gonna try implement it today. So no doubt i'll have further questions

P.S

I accidently created two of the same post.... Can some one delete my other one pls?

I opted to use the jQuery Slideshow Plugin, just because I thought it might be the easiest to get working. I have incorporated the test files into my Homepage to see if it worked.

I can't seem to get it working though, the images are not rotating, merely tiling over one another.

http://www.srmpromotions.com/

I've included this code in my files:

Homepage.php - Javascript requirements

	function init() { 
	parent::init(); 
	Requirements::javascript("mysite/javascript/slideshow.js");
	Requirements::javascript("mysite/javascript/jquery.js");
	}
[

Homepage.ss - The Script for the slideshow, and the slideshow HTML

	<script type="text/javascript">
		$(document).ready(function() {
			$('#slideshow').slideshow({
				timeout: 2000,
				type: 'random',
				pauselink: 'pause1',
				pausecallback: function(self){
					self.html('Play')
				},
				playcallback: function(self){
					self.html('Pause');
				}
			});
			$('#slideshow2').slideshow({
				timeout: 2000,
				type: 'sequence',
				pauselink: 'pause2'
			});
	        });
	</script>

.......

<div id="slideshow">
				 	
	<a href="1"><img src="/../../../assets/darksideofthemoon.jpg" alt="" /></a>
	<a href="2"><img src="/../../../assets/absolution.jpg" alt="" /></a>
	<a href="3"><img src="/../../../assets/acertaintrigger.jpg" alt="" /></a>
	<a href="4"><img src="/../../../assets/liberationtransmission.jpg" alt="" /></a>
	<a href="5"><img src="/../../../assets/americanidiot.jpg" alt="" /></a>

</div>

I'm still a little clueless when it come to using Javascript with Silverstripe. Am I doing this right? If not, can anyone show me the exact way to implement this?

Thanks

The biggest thing challenging your website right now as I see it is not a lack of sizzle, but an effective color scheme. There's way too much contrast. It looks like your background color is #000 which is as black as black gets. I would knock it back to something in the charcoal or matte grey range. Remember the difference between projected and reflected light. If you were to take a photograph of a black piece of paper and eyedrop it in Photoshop, you'd probably get a color close to #858585 or so. Nowhere near #000, and that's because black as reflected light is much easier on the eyes than black as projected light on your computer screen. Black on a computer screen is the blackest of black and rarely works well unless a lot of care is put into reducing the contrast. Your fonts are way into the #fff range, too, so it's just painful on the eyes.

and any ideas on my Javascript anybody please???