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

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

ОБСУЖДЕНИЕ

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

Миниатюра изображений плагин Grid Navigation Effects
Просмотров: 1264  Скачан: 212 раз  Комментариев в теме: 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>
Материалы по теме:

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

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

Слайдер на jQuery «Featured Content Slider»Слайдер на jQuery «Featured Content...

Лёгкий слайдер с авто-листанием на jquery, в слайдере вы множите полноценно использовать текст, изображения....

Navigation SlaiderNavigation Slaider

Простой слайдер на jquery, имеет меню расположенное с левой стороны, также вы можете задать текст, который будет......

Компактный новостной Rotator на jqueryКомпактный новостной Rotator на jqu...

Если вам нужно вывести новости на вашем сайте, и вы хотите что бы это было привлекательно и в тоже время компактно......

Прокручивающиеся картинкиПрокручивающиеся картинки

Если вы ищите способ как плавно прокрутить картинку, или что-то в этом роде, воспользуйтесь представленным способом....

Новостной слайдер «Lof JSliderNews 2.0»Новостной слайдер «Lof JSliderNews ...

Неплохой новостной слайдер, отлично подойдёт для вывода последних новостей на сайте, в слайдере есть дополнительная панель с миниатюрами......

JQuery слайдер - JliderJQuery слайдер - Jlider

Jlider - это компактный слайдер на JQuery с весьма богатым набором настроек....
Интересные публикации:

Прокручивающиеся картинкиПрокручивающиеся картинки

Если вы ищите способ как плавно прокрутить картинку, или что-то в этом роде, воспользуйтесь представленным способом....

Горизонтальное выпадающее меню на cssГоризонтальное выпадающее меню на css

Выпадающее меню в темном стиле, реализованное полностью на css...

Design StudioDesign Studio

Современный html шаблон с готовым набором страниц, на главной странице расположен стильный слайдер с комментариями к изображению......

Горизонтальное мега меню на css3Горизонтальное мега меню на css3

Отличное горизонтальное меню с большое количество пунктов....

The RockThe Rock

Превосходный html шаблон рок сайта, можно также использовать его как сайт распространяющий билеты на рок концерты, на главной странице расположен слай...

PHP скрипт комментариевСкрипт комментариев

Commentics v2.4 - это превосходный скрипт комментариев написанный на языке PHP в связке с базой данных MYSQL....

Сборка кнопок #3 на css3Сборка кнопок #3 на css3

Отличная сборка кнопок №3 на css3, в сборку вошли (раскрывающиеся кнопки, градиентные кнопки, круглые кнопки, анимационные)....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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