Плагин галереи на jquery с возможностью навигации по изображениям - jMorph.

Разметка HTML

        <div class="jmorph">
            <div class="imageContainer">
            <div class="image">
                <div class="currentImg" style>
                    <div class="nextImg"></div>
                </div>
            </div>
            </div>
            <div class="clearfix">
            <a href="#previous" class="previous">&lt;&nbsp;Назад</a>
            <div class="bandContainer">
            <ul class="band">
                <li><a href="1.jpg">Один</a></li>
                <li><a href="2.jpg">Два</a></li>
                <li><a href="3.jpg">Три</a></li>
                <li><a href="4.jpg">Четыре</a></li>
                <li><a href="5.jpg">Пять</a></li>
            </ul>
            </div>
            <a href="#next" class="next">Вперед&nbsp;&gt;</a>
            </div>
        </div>

CSS

  .clearfix:after 
  {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }

  .clearfix {display: inline-block;}  /* for IE/Mac */
    .jmorph
    {
            width:640px;
            margin:auto 0px;
    }

    .jmorph .imageContainer
    {
        display:table;
    }
 
  .jmorph .image
  {
    background:#ccc;
    padding:10px;
    display:table-cell;
  }
 
  .jmorph .image .currentImg,.jmorph .image .nextImg
  {
      background-repeat:no-repeat;
      background-position:center;
      position:relative;
  }
 
  .jmorph .image .nextImg
  {
      top:0;
      left:0;
      position:absolute;   
     
  }
 
  .jmorph div a.previous,.jmorph div a.next
  {
      padding:0.5em;
      margin:1em;
      float:left;
  }

  .jmorph .image a.previous,.jmorph .image a.next
  {
      font-size:1.5em;
  }
 
  .jmorph ul.band
  {
      padding:5px;   
      list-style:none;
      background:#ddd;
      width:5000px;
      margin-left:0px;
  }
 
  .bandContainer
  {
      width:300px;
      overflow:hidden;
      float:left;
      text-align:left;
  }
 
  .jmorph ul.band li
  {
      display:inline;
      margin:5px;
      padding:5px
  }
  .jmorph ul.band li.selected
  {
      background:#fff;
  }

javascript

подключаем jQuery библиотеку и плагин:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jmorph.js" type="text/javascript"></script>

и инициализируем плагин:

<script>
$(".jmorph").jmorphGallery();
</script>

СКАЧАТЬСкачек: 426
179,59 Kb
Кто скачал?

ДЕМОПосмотреть
пример