7 684 Скрипты / Gallery

gpGallery - галерея

Очень простая галерея использующая jQuery. При наведении на миниатюру изображение увеличивается до исходного размера.

HTML

Перечень изображений заключенных в DIV и один пустой DIV в конце:

CSS

Стили галереи:

.gp-gallery-picture-zoom {
    border: 1px solid #bbb;
    margin: -6px 0 0 -6px;
    position: absolute;
    z-index: 100;
    padding: 5px;
    background: white;
    box-shadow: 0 0 10px #999;
}
.gp-gallery-picture-hover {
    box-shadow: 1px 1px 5px #333;
}

Cтили демки (двух DIV блоков):

       .pictures {
            margin: 100px auto;
            width: 980px;
        }
        .clear {
            clear: both;
        }

jаvascript

Подключаем jQuery, скрипт галереи и указываем к каким элементам её применять:

     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="src/jquery-gp-gallery.js"></script>
    <script>
        $(function() {
            $('.pictures').gpGallery('img');
        })
    </script>

Скачать 3390Загрузок 1,21 Mb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи