April 21, 2012

Project 2: pog.gs

When someone mentions "pogs", my eyes light up and a pleasant feeling emerges from deep within the recesses of my brain. I miss pogs and the simplicity of gradeschool. I was playing around with bootstrap and brushing up on jquery (I would be lying if I told you I didn't get inspiration / view source on Mig Reyes' footer image) so I whipped up this fun attempt to turn any image into a digital representation of a pog like object.

Enjoy.

Give it a try

Play with the standalone demo.
Fork out the repo.
Tweak the jsfiddle.

Relevant Code

CSS to transform an image to a pog:
.pog {
    /*make div, give it a border radius of half the height*/
    height: 200px;
    width: 200px;
    border-radius: 100px;
    border: 3px solid black;  
    float: left;
    margin: 10px;

    /*give it some shadow for fun*/
    -webkit-box-shadow: 2px -3px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 2px -3px 5px rgba(50, 50, 50, 0.75);
    box-shadow: 2px -3px 5px rgba(50, 50, 50, 0.75);
}

#pogFront {
/*give the div a background image, center, cover */
    background: url('http://octodex.github.com/images/octonaut.jpg') center center;
    background-size: cover;
}

More on background image properties from Chris Coyier.

Function to change the image:
$(document).ready(function(){
  //Wait for a click on the button
  $('#go').click(function() {
    //grab the string the user put in the input box
    var newImage = $('#newImage').val();
    //and make that string the new source for the background of the front of the pog
    $('#pogFront').css('background-image','url(' + newImage + ')');
  });
});

Reward Beer

Port Brewing Company: Hot Rocks Lager

Roadmap (if I had no job)

  • Allow for different options on the back
  • Create a bookmarklet
  • Allow for exporting
  • Pull image from URI (easier to share links)

If you think these changes would be worth the time, fork the project on github and let me know.

Credits

Top Image Credit: Pog! by freshfauxx, on Flickr
Pog Front Base Image: Octonaut by Cameron McEfee


MKSHT is the project log of Cris Noble. Follow him on twitter, github, Google+ or forrst. You should check out his homepage and if you are feeling freindly, you could do it the old fashion way and send him an email.


Creative Commons License