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   1604 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, 5513 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, 4096 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???