K_E_V_in » javascript http://webkev.com Создание сайтов, продвижение, СЕО, раскрутка. ДАО Интернета Tue, 22 May 2012 20:30:38 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 Проверяем данные формы “на лету” http://webkev.com/2012/04/05/proveryaem-dannye-formy-na-letu/ http://webkev.com/2012/04/05/proveryaem-dannye-formy-na-letu/#comments Thu, 05 Apr 2012 07:09:52 +0000 K_E_V_in http://webkev.com/?p=1476 Итак, сегодня у нас проверка формы “на лету”. Для этого нам понадобится , плагинчик к нему и немного свободного времени.

Подключение и проверку будем проводить по шагам. Поехали!

Шаг 1. Подключаем все необходимые файлы

1
2
3
4
5
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js" type="text/
javascript"></script>
<script src="js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>

Шаг 2. Вставляем форму на страницу и прописываем в неё поля для проверки

1
<form id="myForm" action="" method="post">

Здесь следует обратить внимание на ID формы (в данном случае – formular). Именно на основе имени ID и осуществляется взаимодействие со скриптом проверки данных.

Собственно, проверяемые поля могут выглядеть, например, так:

1
2
3
<input value="http://" class="validate[required,custom[url]] text-input" type="text" name="url" id="url" data-prompt-position="topLeft" />
<input value="" class="validate[required] text-input" type="text" name="req" id="req" data-prompt-position="bottomLeft" />
<input value="too many spaces obviously" class="validate[required,custom[onlyLetterNumber]]" type="text" name="special" id="special" data-prompt-position="bottomRight" />

Шаг 3. Подключаем для проверки данных формы на лету

1
2
3
4
5
<script>
$(document).ready(function(){
    $("#myForm").validationEngine();
   });
</script>

теория оптимальных валютных зон

Доступные параметры проверки данных формы на лету:

  • required: Проверка поля на введение символов (введено / не введено)
  • length[0,100] : Длина ограничивается от 0 до 100 символов
  • minCheckbox[7] : Максимально можно использовать 7 чекбоксов
  • confirm[fieldID] : Совпадают ли введенные данные с иным полем ( пригодится для подтверждения пароля)
  • telephone : Проверка телефонного номера
  • email : Проверка корректности адреса электронной почты
  • onlyNumber : В данном поле должны вводиться только цифры
  • noSpecialCaracters : В этом поле не должно быть спецсимволов
  • onlyLetter : В поле должны присутствовать только буквы.

Можно посмотреть демку работы плагина. Больше информации о плагине можно найти здесь. ]]> http://webkev.com/2012/04/05/proveryaem-dannye-formy-na-letu/feed/ 0 Nivo Slider – ещё один Jquery слайдер, который я постоянно использую http://webkev.com/2012/03/18/nivo-slider-eshhyo-odin-jquery-slajder-kotoryj-ya-postoyanno-ispolzuyu/ http://webkev.com/2012/03/18/nivo-slider-eshhyo-odin-jquery-slajder-kotoryj-ya-postoyanno-ispolzuyu/#comments Sun, 18 Mar 2012 06:16:07 +0000 K_E_V_in http://webkev.com/?p=1443 Итак, продолжаю обзоры плагинов, которые я часто использую в работе. Сегодня на очереди Nivo Slider – отличный, а главное, простой картинок на . В чем же он хорош?

Nivo Slider - ещё один Jquery слайдер, который я постоянно использую

  • Он нетребователен к ресурсам, мало весит и легко инсталлируется. Для него даже не нужен php хостинг. Если статичный, то вполне хватит хостинга без поддержки .
  • Он очень легко подключается на страницу (см. ниже)
  • При всем этом у него большое количество настроек, которые могут изменить вывод картинок до неузнаваемости!

Теперь самое время рассказать о подключении плагинчика Nivo Slider на страницу. Итак, последовательность действий проста до безобразия:

  1. Качаем .
  2. Подключаем сам плагин и необходимые стили оформления.
    1
    2
    3
    <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
  3. Делаем структуру для вывода плагина на страницу.
    1
    2
    3
    4
    5
    6
    <div id="slider">
        <img src="images/slide1.jpg" alt="" />
        <a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" /></a>
        <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
        <img src="images/slide4.jpg" alt="" />
    </div>
  4. Вызываем плагин.
    1
    2
    3
    4
    5
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
  5. Указываем параметры по необходимости.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    $(window).load(function() {
        $('#slider').nivoSlider({
            effect:'random', //Может принимать значения: 'fold,fade,sliceDown'
            slices:15, //Количество слайдов
            animSpeed:500, //Скорость смены кадров
            pauseTime:3000, //Время отображения одного слайда
            startSlide:0, //С какого слайда начинать показ (0 по умолчанию)
            directionNav:true, //Показывать картинки Вперед Назад или нет
            directionNavHide:true, //Показывать только при наведении
            controlNav:true, //1,2,3...
            controlNavThumbs:false, //Использовать превьюшки в навигации
            controlNavThumbsFromRel:false, //Использовать атрибут rel для превьюшек
            controlNavThumbsSearch: '.jpg', //Измените это...
            controlNavThumbsReplace: '_thumb.jpg', //...для превьюшек
            keyboardNav:true, //Использовать левые-правые стрелки на клавиатуре для навигации
            pauseOnHover:true, //Останавливать навигацию при наведении мыши
            manualAdvance:false, //Использовать ручной режим
            captionOpacity:0.8, //Степень прозрачности
            beforeChange: function(){},
            afterChange: function(){},
            slideshowEnd: function(){} //Что показывать, когда показаны все слайды
        });
    });

Вот, в принципе, и всё. Пользуйтесь на здоровье, а я в скором времени буду ещё делать обзоры тех “фишек”, которые использую в своей работе.

]]> http://webkev.com/2012/03/18/nivo-slider-eshhyo-odin-jquery-slajder-kotoryj-ya-postoyanno-ispolzuyu/feed/ 0 Проверка форм Jquery нам в помощь http://webkev.com/2012/03/01/proverka-form-jquery-nam-v-pomoshh/ http://webkev.com/2012/03/01/proverka-form-jquery-nam-v-pomoshh/#comments Thu, 01 Mar 2012 19:39:49 +0000 K_E_V_in http://webkev.com/?p=1433 Сегодня нам нужно проверить введенные данные в форму на лету. Помогать нам будет любимый фреймворк. Проверка данных формы очень проста. Для этого уже есть специальный плагин (в архиве есть также много примеров использования), который умеет решать поставленную задачу. Без таких проверок зачастую очень сложно работать, а создание сайтов под ключ и вовсе невозможно, т.к. неправильная обработка данных – существенный баг, и более-менее серьезный с такой ошибкой не может быть принят.

Использование плагина простейшее:

1. Для начала подключаем яваскрипт на страницу

2. Затем вешаем обработчик на нужную форму

Всё! Теперь все инпуты, входящие в нашу форму будут проходить валидацию. А вот какой она будет – зависит только от вас.

В запросе будут переданы name и value, а также дополнительный атрибут класса на всякий случай, вдруг понадобиться как-то необычно вызвать сообщение об ошибке.

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

]]> http://webkev.com/2012/03/01/proverka-form-jquery-nam-v-pomoshh/feed/ 0 Sweet menu – классное выезжающее меню на Jquery http://webkev.com/2012/02/19/sweet-menu-klassnoe-vyezzhayushhee-menyu-na-jquery/ http://webkev.com/2012/02/19/sweet-menu-klassnoe-vyezzhayushhee-menyu-na-jquery/#comments Sun, 19 Feb 2012 10:16:29 +0000 K_E_V_in http://webkev.com/?p=1412 Сегодня рассмотрим очень интересное , которое сэкономит место на странице и будет выглядеть очень эффектно. Традиционно, будем использовать .

Результатом будет такое чудо:

тв тумбы

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

Для начала традиционно подключаем необходимые библиотеки в разделе head:

1
2
3
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="jquery.easing.js"></script>
        <script type="text/javascript" src="jquery.sweet-menu-1.0.js"></script>

Затем делаем разметку на основе списков для использования в качестве меню:

1
2
3
4
5
6
7
8
9
10
<ul id="mySweetMenu">
    <li>
        <a href="#link1">
            Link 1
        </a></li>
    <li>
        <a href="#link2">
            Link 2
        </a></li>
</ul>

и инициализируем меню:

1
$(selector).sweetMenu();

Кратко следует остановиться на основных параметрах, которыми можно инициализировать меню

top Целочисленный параметр, который указывает на расстояние от верха страницы до меню. По умолчанию – 80
position  Парметр, отвечающий на тип меню (фиксированный или плавающий). Если указано ‘fixed’, то меню будет прокручиваться вместе со страницей, если же указано ‘absolute’, то при прокрутке страницы меню будет оставаться на месте
iconSize  Указывается размер для квадратной иконки (когда длина и ширина равны) в пикселях
iconSizeWidth  Указывает длину иконки в пикселях
iconSizeHeight  Указывает ширину иконки в пикселях
padding  Указывает отступы между текстом и иконкой, а также между текстом и границей блока меню
verticalSpacing  Расстояние в пикселях между элементами меню
duration  Указывает на время анимации при сворачивании/разворачивании элементов меню
easing  Лубые расширения функций JQuery должны быть указаны в этом параметре
anchorClass  В случае необходимости переопределения классов, имена нужно указывать в этом параметре (на практике нужно крайне редко)
icons  Тут указываются файлы с иконками

В качестве примера можно привести инициализацию из демо, где использованы многие параметры:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<script type="text/javascript">
            $(document).ready(function(){
               
                $('#backMenu').sweetMenu({
                    top: 40,
                    padding: 8,
                    iconSize: 48,
                    easing: 'easeOutBounce',
                    duration: 500,
                    icons: [
                        'images/back.png'
                    ]
                });
               
                $('#exampleMenu').sweetMenu({
                    top: 200,
                    padding: 8,
                    iconSize: 48,
                    easing: 'easeOutBounce',
                    duration: 500,
                    icons: [
                        'images/home.png',
                        'images/comments.png',
                        'images/red_heart.png',
                        'images/male_user.png',
                        'images/yellow_mail.png',
                        'images/computer.png'
                    ]
                });
            });
        </script>
       
        <style type="text/css">
            body
            {
                background: #000000 url('images/bg.jpg') top center no-repeat;
            }
       
            .sweetMenuAnchor{
                border-top: 1px solid #ffffff;
                border-right: 1px solid #ffffff;
                border-bottom: 1px solid #ffffff;
                border-top-right-radius: 4px;
                -moz-border-radius-topright: 4px;
                border-bottom-right-radius: 4px;
                -moz-border-radius-bottomright: 4px;
                color: #0071bb;
                font-size: 24px;
                font-weight: bold;
                text-align: right;
                text-transform: uppercase;
                font-family: arial;
                text-decoration: none;
                background-color: #888888;
                opacity: 0.6;
            }
           
            .sweetMenuAnchor span{
                display: block;
                padding-top: 10px;
            }
           
            h1
            {
                display: block;
                text-align: center;
                font-size: 48px;
                color: #ffffff;
                text-shadow: 0px 0px 12px #000000;
                font-family: "Trebuchet MS";
            }
        </style>

Вот, в принципе, и всё. Пользуйтесь на здоровье! К примеру, таким меню можно оформить Все новые видеокарты 2012!
Автор плагина – Adam Becker, перевод и комментарии –

]]> http://webkev.com/2012/02/19/sweet-menu-klassnoe-vyezzhayushhee-menyu-na-jquery/feed/ 0 Всплывающая подсказка на JQuery http://webkev.com/2012/01/20/vsplyvayushhaya-podskazka-na-jquery/ http://webkev.com/2012/01/20/vsplyvayushhaya-podskazka-na-jquery/#comments Fri, 20 Jan 2012 10:50:25 +0000 K_E_V_in http://webkev.com/?p=1385 Создаем всплывающую подсказку на базе плагина к Coda Bubbles. Внешний вид подсказки целиком зависит от вашей фантазии и умений. В нее можно вставить как таблицу, так и или информер. Вы сами определяете, при наведении на что должна выходить подсказка и что будет в ней.

Для начала займемся подключением скрипта. Так Coda Popup Bubbles – это для jQuery, нужно будет подключить и его. Скачать Coda Popup Bubbles можно здесь. Откройте ссылку и сохраните на компьютере. Затем залейте к себе на . Подключить скрипт можно следующим кодом (код ставим в раздел HEAD страницы):

1
2
<script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript"></script>
<script src="js/jquery.coda-bubble.sp.js" type="text/javascript"></script>

Все, скрипт подключен. Теперь подготовим таблицу стилей для правильного отображения подсказок Coda Popup Bubbles. Стили можно прописать как в файле , так и в теге STYLE, который нужно разместить в разделе HEAD. Представленный код предназначен для размещения его в теле HEAD:

1
2
3
4
<style type="text/css">
  .bubbleInfo{position: relative;}
  .popup{position: absolute; display: none; z-index: 50; background: #fff; border: 2px solid #f00;}
</style>

Теперь займемся блоками. Блок с подсказкой должен отвечать определенным правилам и выглядит так:

1
2
3
4
<div class="bubbleInfo">
  <div class="trigger">тут текст или картинка, при наведении на которую появится подсказка</div>
  <div class="popup">Тут сама подсказка</div>
</div>

Этот блок можно ставить в любое место страницы в пределах тега BODY. Основное правило: структуру блока и классы менять нельзя.

Блок с классом trigger – это блок триггер. При наведении курсора на этот блок будет всплывать подсказка, которая оформлена в блоке с классом popup. Внутри блок popup можно оформить так, как вы желаете. В примере сверху использована таблица с рисунком в качестве фона. Вы можете сделать что нибудь свое.

На этом установка всплывающей подсказки на основе Coda Popup Bubbles закончена. Пользуйтесь и удачи в свершениях!

Взято тут

Читайте про конкурс SEOCAFEинфошность и принимайте активное участие!

]]> http://webkev.com/2012/01/20/vsplyvayushhaya-podskazka-na-jquery/feed/ 0 Горизонтальное выпадающее меню jQuery http://webkev.com/2012/01/18/gorizontalnoe-vypadayushhee-menyu-jquery/ http://webkev.com/2012/01/18/gorizontalnoe-vypadayushhee-menyu-jquery/#comments Wed, 18 Jan 2012 20:29:47 +0000 K_E_V_in http://webkev.com/?p=1369 Сегодня рассмотрим простое решения для реализации горизонтального выпадающего .

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

Не редко, при навидении курсора на любое меню, можно заметить плавное, медленное его появление. В основном такие и подобные реализуются с помощью jQuery. Вот пример подобного горизонтального выпадающего меню.

Теперь о том как установить такое меню к себе на . HTML разметка ничем не отличается от обычной, для данного вида горизонтального многоуровневого меню:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div id="myslidemenu" class="jqueryslidemenu">
   <ul>
     <li><a href="#">Справка</a></li>
     <li><a href="#">О программе</a>
       <ul>
         <li><a href="#">Интерфейс </a></li>
         <li><a href="#">Возможности</a></li>
         <li><a href="#">Быстрые клавиши</a></li>
       </ul>
     </li>
     <li><a href="#">Обучение</a>
       <ul>
         <li><a href="#">Уроки</a></li>
         <li><a href="#">Видеоуроки</a>
           <ul>
             <li><a href="#">Работа с HTML</a></li>
             <li><a href="#">Работа с CSS </a></li>
             <li><a href="#">Работа с PHP</a></li>
           </ul>
         </li>
       </ul>
     </li>
     <li><a href="#">Автоматизация</a></li>
     <li><a href="#">Секреты</a></li>
   </ul>
<br style="clear: left" />
</div>

Как видите, мы в контейнере div создали, своего рода, каркас меню, и заранее определили сколько уровней оно будет иметь. Далее необходимо придать, нужный облик, в котором хотелось бы видеть горизонтальное выпадающее меню. То есть внешний вид, цвет, размер и т.д. Это делается при помощи таблиц стилей .

Чтобы меню заработало как надо и посетители Вашего сайта смогли увидеть тот появления подменю, показанный в демо версии, нужно добавить jQuery библиотеку и активации меню. Но давайте всё разложим по порядку.

1. Скачайте файл с горизонтальным выпадающим меню.

2. Вставте, представленную выше, HTML разметку в любом месте страницы Вашего сайта, там где бы Вы хотели видеть меню.

3. Укажите путь к стилям CSS, которые находятся в скачанном Вами файле и называется jqueryslidemenu.css. Адрес прописывается между тегами <head>…</head> следующим образом:

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

4. Подключаем последнюю версию библиотеки jQuery с серверов гугла и скрипт активации меню jqueryslidemenu. , находящийся в скачанном Вами файле. Прописываем между тегами <head>…</head> строки:

1
2
3
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/
   libs/jquery/1/jquery.min.js'></script>
<script type="text/javascript" src="/jqueryslidemenu.js"></script>

Кому лень разбираться, можете скачать меню

как покрасить литые диски фото

]]> http://webkev.com/2012/01/18/gorizontalnoe-vypadayushhee-menyu-jquery/feed/ 0 Jcarousel: ошибка No width/height set for items в опере и хроме http://webkev.com/2011/11/23/jcarousel-oshibka-no-widthheight-set-for-items-v-opere-i-xrome/ http://webkev.com/2011/11/23/jcarousel-oshibka-no-widthheight-set-for-items-v-opere-i-xrome/#comments Wed, 23 Nov 2011 13:41:04 +0000 K_E_V_in http://webkev.com/?p=1310 Встретил такую досадную ошибку на одном проекте, где используется – JCarousel. Причем вылазила только в Опере и Хроме. Выглядит сее недорузамение так:

Jcarousel: ошибка No width/height set for items в опере и хроме

Мозилла отлично кушала плагин и говорила спасибо. Стало интересно, из-за чего происходит эта дрянь, и удалось-таки докопаться и найти решение. Да, решение нельзя назвать супер-пупер оптимальным, но для конкретного проекта оно будет работать только в путь! А главное, решается ошибка Jcarousel: No width/height set for items. А это нам и нужно. Не забывайте, что вся последующая раскрутка сайта может сойти на “нет” из-за таких ошибок, ведь могут подумать даже то, что это вредоносный код и применить санкции к вашему сайту.

Вот простая инструкция по решению проблемы с этой ошибкой. Итак, открываем jcarousel. и ищем там алерт с этой ошибкой.

1
alert('jCarousel: No width/height set for items. This will cause an infinite loop. Aborting...');

Первым желанием будет закомментировать эту строку. Попробуйте! После этого плагин просто перестанет работать. Круто, да? Поэтому давайте посмотрим на условие, после которого возникает эта самая ошибка. Если переменная d равна нулю:

1
if (d == 0)

Отлично! Чуть выше идет инициализация этой переменной:

1
var d =this.dimension(e);

То есть опера и хром не кушают эту строку, что ж, сделаем дубово и присвоим жесткое значение, которое выцепим через алерт и загрузку через мозиллу (ведь она эту строку кушает и отлично обрабатывает весь дальнейший код). Вставим такое:

1
var d = this.dimension(e); alert (d);

Теперь мы получим числовое значение этой переменной. У меня получилось 126. Теперь жестко присваиваем переменной её значение и комментим всё остальное. Получится примерно так:

1
2
var d = 126;//this.dimension(e);
//alert (d);

После чего ошибка Jcarousel: No width/height set for items в опере и хроме пропадает, а плагин начинает полноценно работать сразу с загрузкой страницы. Пользуйтесь!

]]> http://webkev.com/2011/11/23/jcarousel-oshibka-no-widthheight-set-for-items-v-opere-i-xrome/feed/ 0 Красивая галерея изображений для товаров в интернет-магазине http://webkev.com/2011/09/19/krasivaya-galereya-izobrazhenij-dlya-tovarov-v-internet-magazine/ http://webkev.com/2011/09/19/krasivaya-galereya-izobrazhenij-dlya-tovarov-v-internet-magazine/#comments Mon, 19 Sep 2011 16:20:03 +0000 K_E_V_in http://webkev.com/?p=1216 Есть много способов представления изображений в -магазине: удачных и не очень. Сегодня рассмотрим модное “западное” представление товара. А именно, когда у товара не одна , и они плавно изменяются. Выглядит это дело примерно так:

Красивая галерея изображений для товаров в интернет-магазине

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

Для этого нам понадобится и плагинчик SlideJS к этому фреймворку. Скачать пример можно по ссылке. Там всё понятно, что к чему. Пользуйтесь!

Мы занимаемся оптимизацией, продвижением сайтов, оптимизацией и продвижение сайтов в Киеве и по всей Украине

]]> http://webkev.com/2011/09/19/krasivaya-galereya-izobrazhenij-dlya-tovarov-v-internet-magazine/feed/ 1 Интересная навигация со скольжением http://webkev.com/2011/09/19/interesnaya-navigaciya-so-skolzheniem/ http://webkev.com/2011/09/19/interesnaya-navigaciya-so-skolzheniem/#comments Mon, 19 Sep 2011 10:38:52 +0000 K_E_V_in http://webkev.com/?p=1212 Сделаем интересную навигационную панель, которая будет при клике на ссылку выводить категории в очень необычном формате. Выглядит это чудо на примере примерно так:

Навигация со скольжениемКак работает вживую можно глянуть тут. Пример использует библиотеку .

Правда, красиво? Сейчас попытаемся это реализовать, чтобы вы могли вставить в проекте, который описывает, например, автомобили Ауди со всем разнообразием модельного ряда.

Всё это делается в несколько простых шагов: создается разметка , описываются стили , и вносится яваскрипт код. Рассмотрим всё последовательно.

HTML-размметка

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<div class="container">
    <div id="container_wide">
        <div class="product_container" id="product_browser">
            <a href="#"><img src="img/browser/Chrome.png"/></a>
            <a href="#"><img src="img/browser/Safari.png"/></a>
            <a href="#"><img src="img/browser/Firefox.png"/></a>
            <a href="#"><img src="img/browser/IE.png"/></a>
            <a href="#"><img src="img/browser/Maxthon.png"/></a>
            <a href="#"><img src="img/browser/Opera.png"/></a>
        </div>
        <div class="product_container" id="product_apple">
            <a href="#"><img src="img/apple/iMac.png"/></a>
            <a href="#"><img src="img/apple/MacBook.png"/></a>
            <a href="#"><img src="img/apple/MacMini.png"/></a>
            <a href="#"><img src="img/apple/iPhone.png"/></a>
            <a href="#"><img src="img/apple/Macpro.png"/></a>
        </div>
        <div class="product_container" id="product_construction">
            <a href="#"><img src="img/construction/01.png"/></a>
            <a href="#"><img src="img/construction/02.png"/></a>
            <a href="#"><img src="img/construction/03.png"/></a>
            <a href="#"><img src="img/construction/04.png"/></a>
        </div>
         <div class="product_container" id="product_cake">
            <a href="#"><img src="img/cake/01.png"/></a>
            <a href="#"><img src="img/cake/02.png"/></a>
            <a href="#"><img src="img/cake/03.png"/></a>
            <a href="#"><img src="img/cake/04.png"/></a>
            <a href="#"><img src="img/cake/05.png"/></a>
            <a href="#"><img src="img/cake/06.png"/></a>
        </div>
        <div style="clear:both"></div>
    </div>
</div>
<div class="nav">
    <a href="#" class="product_nav" id="nav_browser">Браузер</a>
    <a href="#" class="product_nav" id="nav_apple">Apple</a>
    <a href="#" class="product_nav" id="nav_construction">Стройка</a>
    <a href="#" class="product_nav" id="nav_cake">Пироги</a>
</div>

CSS-стили

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
* {
    font-family: Arial, "Free Sans";
}
.container {
    border: 5px solid #0099cc;
    width: 700px;
    overflow: hidden;
    margin: 0 auto;
    margin-top: 50px;
    padding: 10px 0;
    -webkit-border-radius: .3em .3em 0 0;
    -moz-border-radius: .3em .3em 0 0;
    border-radius: .3em .3em 0 0;
}
#container_wide {
    width: 2800px;position: relative;
}
.product_container {
    text-align: center;
    width: 700px;
    float: left;
    position: relative;
}
.product_container a {
    margin: 0 12px;
    position: relative;
}
.nav {
    width: 700px;
    background: #0099cc;
    margin: 0 auto;
    text-align: center;
    border: 5px solid #0099cc;
    border-bottom-width: 10px;
    -webkit-border-radius: 0 0 .3em .3em;
    -moz-border-radius: 0 0 .3em .3em;
    border-radius: 0 0 .3em .3em;
}
.nav a {
    color: #fff;
    font-size: 12px;
    letter-spacing: 1px;
    margin-right: 10px;
    font-weight: bold;
    text-decoration: none;
}
.nav a:hover {
    color: #e3e3e3;
}

- код

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
$(document).ready(function() {
    var displayed = "product_browser";
    var cindex = 0; // Текущий индекс (выводимый раздел)

    function loopMoveLeft(el, move) {
        if (el.length == 1) {
            setTimeout(function() {
                el.animate({ left: move }, {
                    duration: 'slow',
                    easing: 'easeOutBounce'
                });
                loopMoveLeft(el.next(), move);
            }, 100);
        }
    }

    function loopMoveRight(el, move) {
        if (el.length == 1) {
            setTimeout(function() {
                el.animate({ left: move }, {
                    duration: 'slow',
                    easing: 'easeOutBounce'
                });
                loopMoveRight(el.prev(), move);
            }, 100);
        }
    }

    function slideItem(obj_el) {
        var product = $(obj_el).attr("id").replace("nav_", "");
        var contid = 'product_' + product;

        // Текущий отображаемый элемент
        var elFirst = $("#"+displayed+" a:first-child");
        var elLast = $("#"+displayed+" a:last-child");
        var total_el = $("#"+displayed).children().length;

        var index = $(obj_el).index();

        // Новый элемент для вывода
        var el_f = $("#"+contid+" a:first-child");
        var el_l = $("#"+contid+" a:last-child");
        var total_new = $("#"+contid).children().length;

        var movement = -700 * index;

        if (cindex > index) {
            loopMoveRight(elLast, movement);
            setTimeout(function() {
                loopMoveRight(el_l, movement)
            }, (total_el + 1) * 100);
        } else if (cindex < index) {
            loopMoveLeft(elFirst, movement);
            setTimeout(function() {
                loopMoveLeft(el_f, movement)
            }, (total_el + 1) * 100);
        }

        cindex = index;
        displayed = contid;

        return (total_el + 5 + total_new) * 100;
    }

    var timeout;

    $(".product_nav").click(function() {
        $(".product_nav").unbind('click');
        timeout = slideItem(this);

        // Защита от дурака
        setTimeout(function() {
            $(".product_nav").bind('click', function() {
                timeout = slideItem(this);
            });
        }, timeout);
    });
});

Вот, в принципе, и всё. Удачного применения! Если не сложно, укажите в комментах, на каких сайтах использовали эту прикольную штуку. Заранее спасибо!

Знаете ли вы, что покупка подержаных авто в сургуте с целью последующего доведения до ума и продажи является очень выгодным бизнесом?

]]> http://webkev.com/2011/09/19/interesnaya-navigaciya-so-skolzheniem/feed/ 0 Полноэкранная галерея на Jquery http://webkev.com/2011/08/25/polnoekrannaya-galereya-na-jquery/ http://webkev.com/2011/08/25/polnoekrannaya-galereya-na-jquery/#comments Thu, 25 Aug 2011 13:05:46 +0000 K_E_V_in http://webkev.com/?p=1147 Для сайтов художников, фотографов и прочих художественных людей часто используются красивые показывалки картинок. Сегодня представим одну из таких, а именно полноэкранную галерею, реализованную с помощью . Она может быть легко встроена на любой , а при наличии ровных рук из неё можно сделать модуль или для любой системы управления контентом.

Выглядит эта красота примерно так, тут демо:

Полноэкранная галерея на Jquery

Скачать можно с моего сайта последнюю на сегодня версию. Тыцк!

В архиве есть вся необходимая информация по установке и настройке плагина jquery, не будем повторяться. Просто качайте и пользуйтесь на здоровье!

Спонсор поста: ADVANCE Рекламное агентство – радио реклама, телевидение, пресса, сувенирная продукция, дизайн, полиграфия, аудио-видео, реклама на транспорте, веб-сайты

]]> http://webkev.com/2011/08/25/polnoekrannaya-galereya-na-jquery/feed/ 1