大气的jQuery相册特效插件jQueryZOOM

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 and add the images (class gallery required, style as desired):

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

  <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>

  </body>
</html>