Spice up your Project Team presentation with Retina effect

Filed under jQuery

“Talent wins games, but teamwork and intelligence win championships”. We can trust Micheal Jordan on this one. Although teamwork can surely become a complex, if not uncontrollable process, when things start going pear-shaped, it is more than often as challenging as rewarding in the end when people’s opinions, expertise, quality and characters are all put together.

 

And when a project formally ends, websites or webpages are built, press releases are sent out to annonce the launching of the long-awaited products, but managers and sponsors tend to forget all about their team work only to focus on the new gadget/product at hand.

This (slowly but surely) brings me to today’s subject, as I urge all project managers out there to start spending a few minutes and a single web page on their thankful acknowledgments to their dedicated project team members. And a picture being worth a thousand words, what better way to show your gratefulness and highlight your team members with a web page displaying a cool team photo.

 

Let’s go a bit further and apply an Apple-like Retina effect to the photo, and give this ‘team members’ page the modern and energetic look it deserves. Enough with words, make way for the coding…

Javascript

Nothing fancy but the latest jQuery pack and our retina.js script which you will find on a number of websites (just google it), but which I grabbed on the resourceful, and famous Tutorialzine.com website (as usual, I remind you all that I’m not a programmer and merely use other talented people’s work to satisfy my ideas).

 

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript" src="retina.js"></script>

HTML

Wrap the picture in a div of id “webpage”. You can change this of course, but you will need to apply the id change to the retina.js script if you decide to go this way.

 

<div id="webpage">
       <img src="team.png" width="499" height="283" />
      <div id="retina"></div>
</div>

CSS

I let you check all the position settings yourselves in the package to be download below. What is important here, is of course the display: none setting on the #retina div, and the webkit/moz box-shadow and border which will give your cursor a real cool look on the Safari/Firfeox/Chrome browsers.

 

#webpage        {
                                        width:499px;
                                        height:283px;
                                        position:absolute;
                                        top:50%;
                                        left:50%;
                                        margin:-141px 0 0 -249px;
                                }
#retina         {
                                        background:url('retina/team.png') no-repeat center center white;
                                        border:2px solid white;
                                        position:absolute;
                                        height:180px;
                                        width:180px;
                                        display:none;
                                        cursor:url('retina/blank.cur'),default;
                                        -moz-box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
                                        -webkit-box-shadow:0 0 5px #777;
                                        box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
                                        -moz-border-radius:90px;
                                        -webkit-border-radius:90px;
                                        border-radius:90px;
                                }
#retina.chrome  {
                                        cursor:url('retina/blank_google_chrome.cur'),default;
                                }

 

Don’t forget to check out the demo and download the zip package if you want to adapt the following example to one of your team photos. For my demo, I went with a picture of John Resig and his development squad, who are making jQuery the best JavaScript tool possible. Big hand to you guys and girls…