background
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

Миниатюра изображений, плагин Grid Navigation Effects

Миниатюра изображений плагин Grid Navigation Effects
Просмотров: 1047  Скачан: 186 раз  Комментариев в теме: 0

Оригинальная навигация для сайта в виде миниатюр изображений, если быть точнее, то это jQuery плагин Grid Navigation Effects который может похвастаться своими шикарными эффектами. Для просмотра, воспользуйтесь стрелками которые расположены справа, так же в плагине предусмотрена возможность листать колёсиком мыши. Имеется девять примеров красивых эффектов перехода данной навигации.

Шаг 1 - создание разметки

 

HTML

<div class="container">
    <div id="tj_container" class="tj_container">
        <div class="tj_nav">
            <span id="tj_prev" class="tj_prev">Previous</span>
            <span id="tj_next" class="tj_next">Next</span>
        </div>
        <div class="tj_wrapper">
            <ul class="tj_gallery">
                <li><a href="#"><img src="images/1.jpg" alt="image01" /></a></li>
                <li><a href="#"><img src="images/2.jpg" alt="image02" /></a></li>
                <li><a href="#"><img src="images/3.jpg" alt="image03" /></a></li>
                <li><a href="#"><img src="images/4.jpg" alt="image04" /></a></li>
                <li><a href="#"><img src="images/5.jpg" alt="image05" /></a></li>
                <li><a href="#"><img src="images/6.jpg" alt="image06" /></a></li>
                <li><a href="#"><img src="images/7.jpg" alt="image07" /></a></li>
                <li><a href="#"><img src="images/8.jpg" alt="image08" /></a></li>
                <li><a href="#"><img src="images/9.jpg" alt="image09" /></a></li>
                <li><a href="#"><img src="images/10.jpg" alt="image10" /></a></li>
                <li><a href="#"><img src="images/11.jpg" alt="image11" /></a></li>
                <li><a href="#"><img src="images/12.jpg" alt="image12" /></a></li>
                <li><a href="#"><img src="images/13.jpg" alt="image13" /></a></li>
                <li><a href="#"><img src="images/14.jpg" alt="image14" /></a></li>
                <li><a href="#"><img src="images/15.jpg" alt="image15" /></a></li>
                <li><a href="#"><img src="images/16.jpg" alt="image16" /></a></li>
                <li><a href="#"><img src="images/17.jpg" alt="image17" /></a></li>
                <li><a href="#"><img src="images/18.jpg" alt="image18" /></a></li>
                <li><a href="#"><img src="images/19.jpg" alt="image19" /></a></li>
                <li><a href="#"><img src="images/20.jpg" alt="image20" /></a></li>
            </ul>
        </div>
    </div>
</div>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" type="text/css" href="css/style.css" />

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.gridnav.js"></script>
<script type="text/javascript">
    $(function() {
        $('#tj_container').gridnav();
    });
</script>
Материалы по теме:

Широкоформатный слайдер (видео, изображение, текст)Широкоформатный слайдер (видео, изо...

Отличный слайдер с богатым набором функций, можно использовать (видео, изображение, текст)....

Миниатюра изображений плагин «Grid Navigation Effects»Миниатюра изображений плагин «Grid ...

Оригинальная навигация в виде миниатюр изображений, если быть точнее, то это jQuery плагин «Grid Navigation Effects» который может похвастаться своими...

Адаптивная карусель, плагин jQuery «Elastislide»Адаптивная карусель, плагин jQuery ...

Красивая адаптивная карусель для вашего сайта, а если быть точнее, то это плагин «Elastislide», особенности такого плагина, заключаются в умении адапт...

Аккордеон на css3 и jqueryАккордеон на css3 и jquery

Неплохой аккордеон для вашего сайта на css и jquery, в аккордеоне можно использовать текст, изображения, имеется два вида реализации аккордеона....

Аккордеон изображенийАккордеон изображений с помощью css...

Красивый горизонтальный аккордеон для вывода изображений на сайте....

Слайдер на jQuery для сайтаСлайдер на jQuery для сайта "Estro ...

Красивый слайдер на jQuery для прокрутки изображения (картинки) на вашем сайте....

Слайдер с элементом HTML5 СаnvasСлайдер с элементом HTML5 Саnvas

Слайдер построенный с применением элемента HTML5 Саnvas, этот элемент позволяет создавать и изменять некоторую графику, так же его можно......
Интересные публикации:

Room 09 v1.4.0Room 09 v1.4.0

Room 09 - это довольно популярная тема для создания интернет магазинов, которая пользуется большим спросом среди разработчиков на WordPress....

Круглая кнопка с анимационным фоном на css3Круглая кнопка с анимационным фоном на c...

Красивая кнопка на css3, анимация фона происходит при наведении курсора на кнопку....

Кнопка с подтекстом на css3Кнопка с подтекстом на css3

Тот же принцип действия что и в РАСКРЫВАЮЩИЕСЯ КНОПКЕ которую вы возможно уже видели, но с......

Функциональное вертикальное меню «Tab Menu»Функциональное вертикальное меню «Tab Me...

Отличное вертикальное меню, хорошо подойдёт к блогу или информационному сайту......

Слайдер (слайд-шоу) на css и jqueryСлайдер (слайд-шоу) на css и jquery

Довольно простой слайдер с предусмотренным слайд-шоу, если вам нужно, что-то простое, без каких либо наворотов (дополнительных панелей, кнопок и т.д)...

стильные кнопки css3Стильные кнопки css3

В данном примере представлены красивые кнопки для сайта реализованные на чистом css3....

Горизонтальное меню в виде куба «Boxes Menu»Горизонтальное меню в виде куба «Boxes M...

Меню в виде куба с красивым эффектом трансформации....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 1.0/5( Голосов 6 )

Комментариев в теме: (0)

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить