Меню Рубрики

Установка и настройка nivo slider

Веб-дизайн и поисковая оптимизация

Главная | Веб-дизайн и оптимизация сайтов | Фотолаборатория | Радиотехника | Полезные программы | Разработка сайтов Ваш браузер не поддерживает технологию iframes. Для навигации используйте верхнее меню

Вебдизайн с jQuery — это очень просто!

• Фотогалерея jQuery — просто и красиво!
• Фотогалерея jQuery со слайд-шоу
• Фотогалерея для интернет магазина
• Фотогалерея prettyPhoto
• Фотогалерея Fancybox
• Карусель изображений jQuery Waterwheel
• Простая карусель JCarouselLite
• Календарь в форме обратной связи
• Создание простого анимированного меню
• Создание слайд-шоу для сайта
Zoomy — лупа для просмотра изображений
• Увеличение изображений. Плагин Nivo Zoom
>> смотреть все статьи о jQuery

Nivo Slider — красивое слайд-шоу для сайта

Nivo Slider — популярный красивый слайдер, плагин бесплатной библиотеки скриптов jQuery. Он разработан компанией Dev7studios, создателем многих замечательных скриптов слайд-шоу, фотогалерей, зума и других эффектов для демонстрации изображений на сайте . О некоторых из них уже было рассказано ранее (см., например, статью Увеличение изображений. Плагин Nivo Zoom). Компания Dev7studios расположена в Шотландии, специализируется на веб-приложениях, её основатель и руководитель — Гилберт Пеллегром (Gilbert Pellegrom).

Количество предлагаемых переходов между слайдами в Nivo Slider одно из самых больших среди аналогичных скриптов, а их качество вполне удовлетворительное во всех браузерах, включая Internet Explorer. Пример реализации Nivo Slider (v2.4) со случайным выбором переходов показан ниже:

Подробное описание разных вариантов Nivo Slider можно посмотреть на официальном сайте Nivo Slider. Мы же ограничимся показанным слайдером, которого, впрочем, достаточно для большинства применений.

Установка слайдера Nivo Slider

Как всегда, начинаем с создания на сайте новой папки, назвав её, естественно, nivo_slider. Затем скачиваем архив и распаковываем его в эту папку. У нас получится в ней два js-файла, два CSS-файла и папка images с вспомогательными изображениями.

Далее необходимо добавить в заголовок страницы с будущим слайд-шоу внутрь тега . следующие строчки, указывающие пути к новым файлам, и небольшой JavaScript для инициализации Nivo Slider.

  • «stylesheet» href=»nivo_sl >/>
  • «stylesheet» href=»nivo_sl >/>

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

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

    Теперь размещаем на странице сайта необходимые изображения, поместив их в тег




    Как видим, для третьего рисунка добавлена надпись (атрибут title), которая выводится внизу слайдера. Конечно, никто не запрещает вам сделать изображения ссылками.

    На этом установка Nivo Slider закончена, и вы можете посмотреть созданное слайд-шоу, открыв страницу в браузере.

    Настройка параметров слайдера Nivo Slider

    Для настройки параметров Nivo Slider используются два файла:
    — файл стилей style.css, в котором задаются размеры кнопок и их вид,
    — файл jquery.nivo.slider.js для изменения глобальных настроек показа слайд-шоу.

    Внесение изменений в CSS не имеет каких-либо особенностей, а для работы со скриптом jquery.nivo.slider.js откроем его в редакторе или в Блокноте и в самом конце найдем следующие строчки с русскими комментариями:
    effect: ‘random’, //эффекты переходов между слайдами, см. перечень ниже
    slices: 15, //количество квадратов разбивки изображения в эффектах slices
    animSpeed: 500, //скорость смены слайдов
    pauseTime: 3000, //время отображения слайда
    startSl >//номер первого выводимого слайда
    directionNav: true, //вывод кнопок вперед/назад
    directionNavH >//вывод кнопок навигации вперед/назад только при наведении мыши
    controlNav: true, //вывод рамки с кнопками выбора слайда
    controlNavThumbs: false,
    controlNavThumbsFromRel: false,
    controlNavThumbsSearch: ‘.jpg’,
    controlNavThumbsReplace: ‘_thumb.jpg’,
    keyboardNav: true,
    pauseOnHover: true,
    manualAdvance: false, //отключение автоматической смены слайдов
    captionOpacity: 0.8, //прозрачность заголовка

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

    Вид переходов между кадрами слайд-шоу определяется первым в списке параметром effect и может принимать следующие значения:

    • sliceDown
    • sliceDownLeft
    • sliceUp
    • sliceUpLeft
    • sliceUpDown
    • sliceUpDownLeft
    • fold
    • fade
    • random — случайный выбор перехода
    • slideInRight
    • slideInLeft
    • boxRandom
    • boxRain
    • boxRainReverse
    • boxRainGrow
    • boxRainGrowReverse.
    Читайте также:  Установка кулера socket am2

    Выбор переходов в Nivo Slider также лучше всего определять при просмотре в браузере, установив нужное значение для effect (не забывайте перед просмотром сохранить изменения в файле jquery.nivo.slider.js).

    Разработчики слайдера Nivo Slider постоянно совершенствуют его. К настоящему времени предлагается версия V3.6, которую можно скачать на сайте Nivo Slider. В ней добавлены новые темы оформления слайд-шоу и др. элементы. Установка новых версий выполняется аналогично описанной и не вызывает трудностей.

    О других программах создания на сайте фотогалерей, каруселей изображений и слайд-шоу смотрите в статьях о jQuery и в разделе «Веб-дизайн и SEO».

    источник

    Изменяем дизайн слайдера (используется Nivo Slider)

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

    Всё можно менять и настраивать — если у вас есть свой PSD файл с дизайном, то вы сможете легко модифицировать плагин.

    Шаг 1. Загружаем Nivo Slider

    Переходим на сайт плагина Nivo Slider и загружаем самую свежую версию. В уроке используется версия 2.4, но вполне вероятно, что вы будете использовать уже другую версию, например 2.5 или 2.6.

    Очень важно понимать, что мы стараемся избежать повторного изобретения велосипеда . Нужно использовать файл “ demo.html ”, который идет в комплекте плагина, в качестве основы для своих действий. Мы не будем удаляться слишком далеко от оригинала.

    Для веб дизайнера важно научиться модифицировать чужой открытый код для выполнения своих задач. Конечно, хорошо, когда вы разбираетесь во всех тонкостях и нюансах языков программирования и поддерживаете свои знания в состоянии актуальности, потому что в этом случае ясно представляете, как работает чужой код. Однако, в большинстве случаев нужно лишь иметь базовые знания HTML и CSS и уметь читать документацию, чтобы успешно использовать уже готовое решение для своих проектов.

    Шаг 2. Базовые установки

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

    Если бегло взглянуть на код для слайдера (в файле demo.html ), то можно заметить, что для хранения стилей страницы используется файл “ style.css ”. А сам код HTML демонстрации весьма прост.

    Рассмотрим код раздела header подробнее. Мы не будем его менять, но он нужен везде, где планируется использовать слайдер:

    А следующие строки используются для генерирования слайдера:

    Мы не будем использовать заголовки, поэтому следующие строчки можно смело удалить:

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

    В итоге мы имеем пару вложенных элементов div с изображениями.

    Шаг 3. CSS для Nivo Slider

    В нашем уроке основные изменения надо будет сделать в коде CSS. В файле style.css интерес представляет следующая секция:

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

    Первым делом нужно найти и изменить изображения, которые используются в слайдере, на наш вариант. Если вы откроете папку “ /demo/images/ ”, то обнаружите несколько изображений, которые надо изменить:

    • arrows.png (стрелки влево/вправо)
    • bullets.png (точечный индикатор)
    • slider.png (фоновая рамка)
    • background.png (фон, по желанию)
    • loading.gif (индикатор загрузки, по желанию)

    Шаг 4. Изменяем изображения для плагина

    Если бы мы разрабатывали плагин с нуля, то пришлось бы кропотливо работать над изображениями в Фотошопе. Однако, так как мы модифицируем готовый плагин (то есть с уже готовыми изображениями для фона, индикаторов и стрелок), то имеет смысл модифицировать готовые материалы.

    Читайте также:  Установка двухфазного счетчика электроэнергии

    Изменяем индикаторы

    Начнем с файла “ bullets.png ”. Открываем его в Фотошопе:

    Обратите внимание на структуру файла. В нем имеется два изображения, расположенные одно над другим. Это спрайт, который будет позиционироваться в коде CSS в нужное положение.

    Создаем собственное изображение индикатора и сохраняем файл:

    Для индикаторов мы не меняли размер изображения.

    Изменяем стрелки

    Со стрелками будет немного труднее, так как наш вариант будет немного больше оригинала. Открываем “ arrows.png ” в Фотошопе:

    Оригинал стрелок представлен прозрачными изображениями. Это две стрелки, направленные в разные стороны, которые позиционируются в коде CSS.

    Размер изображения 60x30px. Но мы планируем использовать более крупное изображение для стрелок. Наши стрелки будут иметь размер 70x65px и легкую тень.

    Изменяем фоновую рамку

    Демонстрация Nivo Slider использует рамку с абстрактными кругами, но мы планируем ее изменить, чтобы она сочеталась с дизайном проекта.

    Размер оригинальной рамки 998x392px. Мы будем использовать рамку с размером 494x310px. Изображение вы можете взять из исходников.

    Шаг 5. Сохраняем наши слайды.

    Слайды в демонстрации NivoSlider имеют размер 618×246. Для нашего варианта будем использовать картинки 430x250px. Можно взять картинки из демонстрации плагина и обрезать их соответствующим образом.

    Если вы планируете использовать свои изображения, то они должны иметь уникальные имена, и нужно указать путь к ним в документе demo.html .

    Шаг 6. Изменяем CSS код для нашего варианта

    Данный шаг наверняка потребует множества проб и исправления ошибок. Целью является изменение оригинального файла style.css так, чтобы слайдер соответствовал новому дизайну. Основная проблема заключается в том, что оригинальная демонстрация слайдера имеет совершенно другие размеры почти для всех элементов. Поэтому потребуется тщательная подгонка с большим количеством проб.

    Пробы и коррекция ошибок в CSS может выполняться двумя различными способами. Первый, «трудный» способ — просто вносить изменения в код, сохранять его и смотреть изменения в браузере. Второй, «легкий» способ — использовать специальные плагины, например, Firebug для Firefox, для настройки свойств CSS непосредственно в браузере. Если у вас еще нет такого инструмента или вы не умеет им пользоваться, то вам следует как можно быстрее его освоить.

    Ниже приводится код CSS, в котором комментарием “/*= НОВОЕ =*/” отмечены измененные свойства:

    Если внимательно посмотреть на изменения кода, то можно заметить, что все они (с комментарием “/*= НОВОЕ =*/”) попадают в одну из базовых категорий:

    • Ширина
    • Высота
    • Позиционирование (влево, вправо, сверху, снизу)

    Есть только два исключения: мы добавили цвет фона и скругленные углы для элемента “ .nivo-controlNav ”, и изменили положение по умолчанию для элемента “ .nivo-directionNav a ” (данный элемент предварительно позиционируется в другой таблице стилей, а мы изменяем его положение).

    Также добавлено новое правило “ a.nivo-prevNav:hover ” для левой и правой кнопок. Его назначение — сделать небольшой сдвиг кнопки при наведении курсора мыши на нее.

    Если вы планируете использовать собственные размеры для слайдера, обратите внимание на два момента, где устанавливается общая высота и ширина слайдера. Это элементы “ #slider-wrapper ” и “ #slider ”, которые контролируют данные параметры — просто настройте их высоту и ширину в соответствии с размером своих слайдеров.

    источник

    jQuery Nivo Slider

    Nivo Slider обладает множеством настроек для создания эффектного рекламного ролика на сайте. Рассмотрим каждую из опций, указанных на официальном сайте, в конце всего рассмотрим пример встравивания слайдера в Joomla 1.7.

    Параметры для настройки Nivo Slider

    Для того, чтобы подключить Nivo Slider необходимы следующие файлы:

    Указанные файлы желательно подключить в теге head, как показано ниже.

    Для правильной работы слайдера необходим следующий HTML код, о дополнительных атрибутах и настройках я расскажу чуть позже.

    Параметр По умолчанию Описание
    effect ‘random’ эффект анимации, в качестве эффекта можно выбрать к примеру ‘fold,fade,sliceDown’. Полный перечень смотрите в таблице, указанной ниже.
    slices 15 атрибут используется для анимации с эффектом «slices»
    boxCols 8 количество столбцов
    boxRows 4 количество строк
    animSpeed 500 скорость смены слайдов
    pauseTime 3000 время отображения слайда
    startSlide индекс слайда, с которого происходит анимация
    directionNav true направление навигации
    directionNavHide true показ только при наведении
    controlNav true Навигация в виде ссылок 1,2,3. далее страницы
    controlNavThumbs false миниизображения, если используется параметр Control Nav
    controlNavThumbsFromRel false Атрибут rel может использоваться для отображения превью
    controlNavThumbsSearch ‘.jpg’ расширение по которому происходит поиск превью.
    controlNavThumbsReplace ‘_thumb.jpg’ . шаблон. используемый для замены минизображения
    keyboardNav true этот параметр используется для включения навигации с помощью кнопок клавиатуры (клавиш со стрелками)
    pauseOnHover true этот параметр позволяет прекратить анимацию, если на него был наведён курсор
    manualAdvance false Параметр, позволяющий отключить автоматическую смену слайдов
    captionOpacity 0.8 уровень прозрачности заголовка слайда (свойство opacity)
    prevText ‘Prev’ текст ссылки «next»
    nextText ‘Next’ текст ссылки «prev»
    randomStart false параметр позволяет начать анимацию с произвольного изображения
    beforeChange function()<> Функция, выполняемая до того как произойдёт анимация
    afterChange function()<> Функция, выполняемая после того как произойдёт анимация
    slideshowEnd function()<> Функция, выполняемая после того как все слайды были показаны
    lastSlide function()<> Функция, выполняемая во время отображения последнего слайда
    afterLoad function()<> Функция, выполняемая когда слайдер только что загрузился
    Читайте также:  Установка рамок со шторками

    Эффекты анимации, которые позволяют сделать салайдер красивее перечислены ниже, их нужно указывать в параметре «effect»:

    • sliceDown
    • sliceDownLeft
    • sliceUp
    • sliceUpLeft
    • sliceUpDown
    • sliceUpDownLeft
    • fold
    • fade
    • random
    • sl >Параметр по умолчанию устанавливается через jQuery:

    Либо через атрибут тега img «data-transition». Если Вы установили эффект анимации через атрибут «data-transition», то анимация, установленная по умолчанию, будет работать для остальных изображений, но не для того изображения, которому установлен атрибут «data-transition».

    Nivo Slider с превью

    Для включения превью необходимо установить параметр «controlNavThumbs» как true, например:

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

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

    только не забудьте включить ещё и параметр «controlNavThumbsFromRel»:

    Как вставит слайдер Nivo Slider в joomla 1.7

    В последнее время меня просят установить слайдер в оду из версий Joomla. Поэтому ниже я расскажу как это сделать в Joomla 1.7. Для начала вставьте в секцию head шаблона, используемого по умолчаниею, код, указанный ниже:

    Предыдущий пример рассчитан для шаблонов, в которых Вы вместе с слайдером подключаете jQuery с CDN Google. Поэтому будьте внимательны, если в Вашем шаблоне уже подключен jQuery, то Вам нужно заменить этот код на следующий:

    HTML код слайдера(вставьте в нужное место в шаблоне Joomla):

    Не забудьте загрузить изображения, в моём случае, — изображения загружены в директорию «images».

    Можно вставить не только HTML код, а модуль Joomla подназванием «Прозвольный HTML код», однако в этом случае нужно будет выполнить следующие действия:

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

    Если Вы всё сделали правильно, то в Joomla слайдер появится на том месте, где Вы его указали в шаблоне. Пример проверялся в шаблоне поставляемом вместе с дистрибутивом Joomla — «beez5», но иногда требуется вставить слайдер в любом месте, выравняв слайдер по середине, если Вам нужно выравнять слайдер, укажите для div с id «slider» стиль «margin: 0 auto» и ширину в зависимости от ширины изображений, например установим «width: 618px», потому что все изображения на данной странице имеют именно эту ширину.

    И ещё одно маленькое отступление

    HTML код слайдера, а именно элемент DIV с id «slider» имеет класс «theme-default», и это не просто так, а потому что слайдер может иметь несколько стилей, которые меняются в зависимость от класса элемента DIV с id «slider», всего можно использовать три класса «theme-default», «theme-orman», «theme-pascal». Не забудьте что если Вы меняете класс то и должны подключить соответствующий css, в статье я не подключал все стили, как сделано в стандартном демо с официального сайта. Успехов и до встреч!

    источник

  • Добавить комментарий

    Adblock
    detector