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

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

ОБСУЖДЕНИЕ

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

Миниатюра изображений плагин Grid Navigation Effects
Просмотров: 1074  Скачан: 192 раз  Комментариев в теме: 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 «Grid accordion»Инфо-сетка на css и jquery «Grid ac...

Стильный аккордеон в сетку хорошо подойдёт для интернет магазина....

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

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

Функциональный слайдер «bxSlider»Функциональный слайдер «bxSlider»

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

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

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

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

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

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

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

Мульти слайдер с подпунктами «Multi-Item Slider»Мульти слайдер с подпунктами «Multi...

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

FlavorFlavor

Flavor - это мощная тема для wordpress которая укомплектована огромным функционалом и включает в себя все возможности для организации полноценного ин...

Вертикальное разноцветное меню на css3Вертикальное разноцветное меню на css3

Вертикальное меню в разноцветном стиле, полностью на css3, имеет два стиля (плавное раскрытие и с эффектом подёргивания)....

Фиксированная форма обратной связи на PHP и jQueryФиксированная форма обратной связи на PH...

Довольно простая форма обратной связи без капчи, проверки полей, сообщений об ошибке и всего прочего......

Фиксированная панель с навигацией на css3Фиксированная панель с навигацией на css...

Панель фиксируется внизу страницы и имеет не большую навигацию, что очень удобно если вам нужно вывести какие то важные ссылки или информацию....

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

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

Games ThemeGames Theme

GamesTheme - мощная игровая тема для WordPress, в тёмном оформлении, тема полностью кроссбраузерная, seo оптимизированная......

Набор элементов дизайна «CSS3 Responsive Forms Pack»Набор элементов дизайна «CSS3 Responsive...

Это профессиональный набор элементов дизайна ( кнопки, формы, Checkbox и многое другое)....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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