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, biapar, Willr, Ingo, swaiba, simon_w

Ideas for making my Homepage more exciting


Reply

6 Posts   1562 Views

Avatar
OutrunTheWolf

30 July 2009 at 1:46am Community Member, 34 Posts

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

30 July 2009 at 9:21am Forum Moderator, 5511 Posts

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

Avatar
OutrunTheWolf

30 July 2009 at 11:33pm Community Member, 34 Posts

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

31 July 2009 at 12:46am Community Member, 34 Posts

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

31 July 2009 at 1:13am 4085 Posts

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

31 July 2009 at 2:00am (Last edited: 3 August 2009 5:20am), Community Member, 34 Posts

and any ideas on my Javascript anybody please???