Галерея для сайта - скрипт

Галерея для сайта – скрипт, который позволяет вставить на страницу несколько галерей без доработки яваскриптов, давно такой искал!

В сегодняшнем уроке мы рассмотрим очень интересную и функциональную галерею с возможностью изменения эффектов появления фотографий.

Как обычно, в самом верху документа размещает все скрипты и таблицы стилей для корректной работы галереи:

 <link rel="stylesheet" type="text/css" href="jquery.ad-gallery.css">
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript" src="jquery.ad-gallery.js?rand=995"></script>
  <script type="text/javascript">
      $(function() {
      var galleries = $('.ad-gallery').adGallery();
      });
  </script>
  <style type="text/css">
      * {
      font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
      color: #333;
      line-height: 140%;
      }
      body {
      padding: 30px;
      font-size: 70%;
      width: 800px;
      }
      #gallery {
      padding: 30px;
      background: #e1eef5;
      }
  </style>

$(function() {

var galleries = $('.ad-gallery').adGallery();

});

</script>

* {

font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;

color: #333;

line-height: 140%;

}

body {

padding: 30px;

font-size: 70%;

width: 800px;

}

#gallery {

padding: 30px;

background: #e1eef5;

}

</style>

Далее для создания галереи в теле документа необходимо начать с нескольких дивов вначале и все фото оформить в виде неупорядоченного списка. Внутри тега с изображением можно указать заголовок и описание. Также обратите внимание на пути к изображению и его миниатюре.

<div id="gallery" class="ad-gallery">
      <div class="ad-image-wrapper">
      </div>
      <div class="ad-controls">
      </div>
      <div class="ad-nav">
        <div class="ad-thumbs">
          <ul>
...
...
...
            <li>
              <a href="images/1.jpg">
                <img src="images/thumbs/t1.jpg" title="Заголовок для 1.jpg" longdesc="Длинное и подробное описание для 1.jpg" class="image0">
              </a>
            </li>
...
...
...
           
          </ul>
        </div>
      </div>
    </div>

</div>

</div>

<ul>

...

<li>

</a>

</li>

...

</ul>

</div>

Вместо … по аналогии можно добавить неограниченное число изображений. Таким образом можно создавать внушительные фотогалереи.

Изменение размера изображений

Возможно Вам захочется отображать более мелкие\крупные изображения. В таком случае Вам необходимо изменить под свои нужды несколько стилей:

.ad-gallery {
  width: НЕОБХОДИМАЯ ШИРИНАpx;
}
.ad-gallery .ad-image-wrapper {
  height: НЕОБХОДИМАЯ ВЫСОТАpx;
}

.ad-gallery {

width: НЕОБХОДИМАЯ ШИРИНАpx;

}

.ad-gallery .ad-image-wrapper {

height: НЕОБХОДИМАЯ ВЫСОТАpx;

}

Изменение эффекта смены изображений

Тут также нет ничего сложного. В файле jquery.ad-gallery.js Вам необходимо найти параметр effect и подставить одно из 5-и возможных значение (‘slide-vert’, ‘slide-hori”, fade’, или ‘resize’, ‘none’).

Все готово. Пользуйтесь!

Источник: ruseller.com

Добавить комментарий Отменить ответ