blog.pud9y.com

On a webpage you usually have thumbnail images which you may want the user to enlarge, to view clearer. You can either link it directly to the image, or even better use a popup window so users dont get directed away from the page they were viewing. Sometimes popups can be annoying though, and usually people have browser popup blockers enabled.

Recently I’ve been seeing the use of Javascript for image enlarging, when the user clicks on a thumbnail to enlarge it, the image appears simply ontop of the webpage as an overlay. I really like this method because it looks nicer and a little more professional.

For my portfolio website (which has been developing very very slowly) I’ve integrated this technique for not only images but video as well, so the page will initally display just thumbnails or screenshots of the video, then once clicked the enlarged version will open ontop of the page in the same window.

Looking through the web i didnt really find any clean (free) template code, so i decided to just make my own. It was simple enough using javascript, and as a bonus, I now can show off some javascript knowledge . My method just uses JS to create a new fullscreen semi transparent box (div) to dim the background, and then another box in the middle which displays the content (i.e. video or image) as a closeable “window”.

CSS formats the ‘olbg’ and ‘ol’ div’s, but the JS just spits out the html content based on the variables. ‘type’ determines which html code to display, e.g. type=video will spit out the youtube embeding code and insert the url of the video using ‘input1′. ‘a’ is simply the anchor point in which the page will jump to when the popup is closed.

Example of the code in the works can be seen on my animations page:
http://pud9y.com/animation.html