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.

We're retiring the forums!

The SilverStripe forums have passed their heyday. They'll stick around, but will be read only. We'd encourage you to get involved in the community via the following channels instead:

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

Avatar
OutrunTheWolf

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.

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.

Avatar
Willr

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 - http://malsup.com/jquery/cycle/

Avatar
OutrunTheWolf

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

P.S

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

Avatar
OutrunTheWolf

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.

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

Avatar
UncleCheese

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.

Avatar
OutrunTheWolf

Community Member, 34 Posts

31 July 2009 at 2:00am

Edited: 03/08/2009 5:20am


and any ideas on my Javascript anybody please???