Jordan Buermann
Drupal,PHP,MYSQL,jQuery,Ajax,HTML,CSS
Click Me

This simple script uses Jquery to listen for a click, then display the larger image in a css styled container. The container is given rounded corners and a drop shadow effect with css3. At this time IE8 and older do not support this feature, though there are javascript solutions for this. IE9 however, supports this just fine. Sadly IE9 can not be installed on XP or older, so depending on your needs you may still have to use the work arounds.

This is pretty basic, but add in some php and it can be expanded to be pretty nice.

Jquery:

$(document).ready(function(){
$("#photo").click(
   function () {
      $(".bigView").not(this).fadeOut();
      if( $('.bigView', this).is(":visible") ) {
          $('.bigView', this).fadeOut();
      }else {
          $('.bigView', this).fadeIn();
      }
   }
).mouseout(
   function(){
      $('.bigView', this).fadeOut()
   }
);
});

Drop Shadow/Curved Borders CSS3:

  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;	
  box-shadow: 5px 5px 5px #888;
  

HTML:

  <div id="photo">
    <img src="Thumnail PATH" /> <small> Click Me </small>
    <div class="bigView"><img src="Large Image PATH" /></div>
  </div>