Wednesday, May 25, 2011

My Portfolio (and helpful code within it)

I figure I may as well plug my online media portfolio.
http://www.mmohler.com
It is fairly graphic heavy which some may like and others may not.  It is important to note that there is some good and helpful code I have tucked in there.  No, I did not write any of the javascript/jquery.  But good news for you, I can share where I got it from.

Lightbox:
I used a very nice and flexible lightbox from No-margin-for-errors.com
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
This lightbox can do just about anything you want.  images, flash, iframes, youtube.  As far as lighboxes go it is actually quite easy to plug it into your website and there is a good amount of nice clear documentation on the website to help you out.  It also comes with 6ish different styles!  I highly recommend this lighbox.

Scroll down:
Here I found a very sweet and simple bit of code.  Click a link and it will give you a nice smooth scroll down to the content on your page.
http://djpate.com/2009/10/07/animated-scroll-to-anchorid-function-with-jquery/

Image Preview:
This one is slightly imperfect, but I suppose I was pushing my luck getting it to work.  You will notice on my portfolio that when you hover over some items a preview image pops up.  It is a really nice feature.  Sadly, it wont work on all my items.  A few of my portfolio links open up an iFrame or Flash movie.  Image preview cannot give a preview of these items.  I could work around this by rearranging my lightbox items, but I chose not to bother.  I think I had a little more trouble getting this one working.  Unlike the other scripts which are located in within the <head> this script only worked for me if i put it just above my </body> tag.  Probably has something to do with it just being javascript and not jquery.  I am not good at that stuff, so I just have to guess.
Anywho, great little feature.  Here is the link
http://james.padolsey.com/javascript/new-jquery-plugin-imgpreview/

No comments:

Post a Comment