ZOOM - jQuery Photo Gallery Plugin

Features:

easy to install and use
slim design
animated transition when changing between images
keyboard shortcuts: arrows for previous/next image and escape for close
images resize to fit the screen
compatible with mobile devices

How to use

Include the stylesheet and javascript into the header:

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
  <head>
    
    <link rel="stylesheet" href="css/zoom.css" media="all" />
    <script src="js/jquery-1.8.2.min.js"></script>
    <script src="js/zoom.js"></script>
    
  </head>
  <body>

Add the images (class gallery required, style as desired):

<ul class="gallery">
  <li><a href="path/to/large1.jpg"><img src="path/to/thumbnail1.jpg" /></a></li>
  <li><a href="path/to/large2.jpg"><img src="path/to/thumbnail2.jpg" /></a></li>
  <li><a href="path/to/large3.jpg"><img src="path/to/thumbnail3.jpg" /></a></li>
  <li><a href="path/to/large4.jpg"><img src="path/to/thumbnail4.jpg" /></a></li>
</ul>

Initialize the gallery:

<script>
$(function() {
  $.zoom();
});
</script>

  </body>
</html>