jQuery Peepshow

Automatic Thumbnail Gallery Plugin   ( 1.2.0 )

hover
View in touch/mobile mode

Options

auto center
auto margins
play/pause button
round image corners
image rotation speed
auto margins ratio
image crop width
image crop height
items per row
max expansion width
max expansion height
min expansion width
min expansion height

Usage

head

                        
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.peepshow.min.js" type="text/javascript"></script>
<link href="style/jquery.peepshow.min.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="style/jquery.peepshow.ie7.min.css" />
<![endif]-->
<script type="text/javascript">
    $(document).ready(function() {
        $("#mygallery").peepshow();
    });
</script>

markup

                        
<div id="mygallery">
  <ul>
    <li>
      <a href="http://www.foobar.com">
        <img src="path/to/image1.jpg" caption="my awesome caption"/>
        <img src="path/to/image2.png" caption="your stupid caption"/>
        <img src="path/to/image3.gif" caption="our awepid caption"/>
      </a>
      <p class="summary">3 images & captions, 1 link</p>
    </li>
    <li>
      <a href="http://www.foobaz.com">
        <img src="path/to/image4.jpg"/>
      </a>
      <a href="http://www.barbaz.com">
        <img src="path/to/image5.jpg"/>
      </a>
      <a href="http://www.foobaz.com">
        <img src="path/to/image6.jpg"/>
      </a>
      <a href="http://www.bazfoo.com">
        <img src="path/to/image7.jpg" />
      </a>
      <p class="summary">4 images, separate links</p>
    </li>
    ...
  </ul>
</div>

hiya pal.