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

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

ОБСУЖДЕНИЕ

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

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

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

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

Cлайдер КарусельCлайдер Карусель

Слайдер картинок, с бесконечной прокруткой, в слайдере имеется красивый эффект......

3D плакат с анимацией на чистом css33D плакат с анимацией на чистом css...

3D анимация на чистом css3, добиться такого эффекта удаётся с помощью свойства -webkit-perspective....

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

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

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

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

Kenburner слайдерKenburner слайдер

Сочетание в слайдере красивого дизайна, анимации текста и различных эффектов, приятно выделяет его среди подобных плагинов....

Слайдер в стиле AppleСлайдер в стиле Apple

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

Креативное анимированое меню с помощью css3Креативное анимированое меню с помощью c...

Вертикальное меню на css3 с применением иконических шрифтов......

JQuery ползунокJQuery ползунок

Красивый горизонтальный JQuery ползунок (Slider) для сайта, реализованный с помощью JQuery....

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

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

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

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

Sell v1.4.1Sell v1.4.1

Sell - это ещё одна довольно гибкая универсальная тема для создания интернет магазина на WordPress с использованием WooCommerce....

ClockerClocker

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

Слайд меню с помощью css3 и JQueryСлайд меню с помощью css3 и JQuery

Креативное вертикальное меню на css3 и JQuery
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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