6 549 Скрипты / Gallery

3D галерея

3D галерея

Галерея изображений с эффектом 3D. При движении курсора миниатюры фотографий (которые имеют тень), также двигаются.
Позволил от себя добавить иконку "Лупа" - увеличения фотографии, за место текста.

В шапке подключаем необходимые библиотеки:

<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/jаvascript" src="inc/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/jаvascript" src="inc/treddi.js"></script>

HTML

Простая разметка:

<div id="ddd">
    <div class="box box_principale">
        <img src="immagini/1.jpg" alt="Alizee"/>
    </div>
    <div class="box">
        <img src="immagini/2.jpg" alt="Alizee"/>
    </div>
    ...
</div>

CSS

JS

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

$(document).ready(function(){
    $('#ddd').dddgallery({
        shadow : true, // тень         
        resize : true, // изменение размера        
        //размер box_principale
        p_width: 700,
        p_height: 500,
        //настройки по умолчанию mini-box
        min_width: 150,
        max_width: 300,
        min_height: 90,
        max_height: 180,
        porp_height: 0,
        min_opacity: 0.2,
        livel_range: 20
    });
});
Скачать 1265Загрузок 621,94 Kb
Демо

Комментарии

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

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