Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

All other Modules /

Discuss all other Modules here.

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

Ideas for making my Homepage more exciting

Go to End

6 Posts   1952 Views


Community Member, 34 Posts

30 July 2009 at 1:46am

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.

(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:


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

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

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



Forum Moderator, 5523 Posts

30 July 2009 at 9:21am

If you want to rotate imagery / text have alook at the awesome jquery cycle plugin -


Community Member, 34 Posts

30 July 2009 at 11:33pm

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


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


Community Member, 34 Posts

31 July 2009 at 12:46am

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.

I've included this code in my files:

Homepage.php - Javascript requirements

	function init() { 
[ - The Script for the slideshow, and the slideshow HTML

	<script type="text/javascript">
		$(document).ready(function() {
				timeout: 2000,
				type: 'random',
				pauselink: 'pause1',
				pausecallback: function(self){
				playcallback: function(self){
				timeout: 2000,
				type: 'sequence',
				pauselink: 'pause2'


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


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?



Forum Moderator, 4102 Posts

31 July 2009 at 1:13am

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.


Community Member, 34 Posts

31 July 2009 at 2:00am

Edited: 03/08/2009 5:20am

and any ideas on my Javascript anybody please???