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

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

ОБСУЖДЕНИЕ

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

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

Отличный слайдер картинок для вашего сайта с поддержкой слайд-шоу, также в слайдере имеются две кнопки......

Rotator на css и jQueryRotator на css и jQuery

Стильный Rotator для вашего сайта, ротатор довольно информативный, имеются миниатюры, слайд-шоу, при клике по......

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

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

Круговой слайдерКруговой слайдер css3

Если вы хотите эффектно представить какой либо продукт на своём сайте, но не знаете как это можно сделать. В таком случае представляю красивый слайдер...

Скроллер картинокСкроллер картинок

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

Стильный слайдер на jQuery «Mobilyslider»Стильный слайдер на jQuery «Mobilys...

Стильный слайдер на jquery, а если быть точнее, то это плагин «MobilySlider» имеющий размер всего в 5kb, слайдер довольно привлекательный с виду, име...

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

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

Кнопка вкл/выкл (checkbox) на CSS3Кнопка вкл/выкл (checkbox) на CSS3

Привлекательная кнопка с ряда (checkbox), как все вы наверное уже догадались, кнопка имитирует реалистично кнопку включения....

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

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

Галерея на PHP и JqueryГалерея на PHP и Jquery

Галерея на php и jquery. PHP даёт некие привилегии перед обычным html кодом, например вам как правило приходиться...

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

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

Фиксированое меню (вертикальное и горизонтальное)Фиксированое меню (вертикальное и горизо...

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

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

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

Portfolio SitePortfolio Site

Оригинальный одностраничный html шаблон для сайта портфолио, шаблон создан на фоне красивых морских глубин....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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