7 218 Скрипты / Gallery

gpGallery - галерея

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

HTML

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

<div class="pictures">
    <img src="untitled-3-2.jpg" width="267" height="400"/>
    <img src="untitled-3-16.jpg" width="400" height="267"/>
    <img src="untitled-3-5.jpg" width="400" height="267"/>
    <img src="untitled-3-0.jpg" width="400" height="267"/>
    <img src="untitled-3-14.jpg" width="400" height="267"/>
    <img src="untitled-3-9.jpg" width="400" height="267"/>
    <img src="untitled-3-4.jpg" width="400" height="267"/>
    <img src="untitled-3-10.jpg" width="267" height="400"/>
    <img src="untitled-3-8.jpg" width="267" height="400"/>
    <img src="untitled-3-3.jpg" width="400" height="267"/>
    <img src="untitled-3-1.jpg" width="400" height="267"/>
    <img src="untitled-3-13.jpg" width="400" height="267"/>
    <img src="untitled-3-19.jpg" width="400" height="267"/>
    <img src="untitled-3-7.jpg" width="400" height="267"/>
    <img src="untitled-3-12.jpg" width="267" height="400"/>
    <img src="untitled-3-15.jpg" width="400" height="267"/>
    <img src="untitled-3-18.jpg" width="400" height="267"/>
    <img src="untitled-3-6.jpg" width="400" height="267"/>
    <img src="untitled-3-11.jpg" width="267" height="400"/>
    <img src="untitled-3-17.jpg" width="267" height="400"/>
    <div class="clear"></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>

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

Комментарии

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

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