1 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Делаем хороший слайдер на jQuery своими руками

Делаем хороший слайдер на jQuery своими руками. Как сделать слайдер на jQuery.

Сегодня мы рассмотрим как можно сделать слайдер на jQuery своими руками.

Слайдер (или как некоторые его называют Ротатор) — это блок на сайте, который состоит из набора картинок со ссылками (и возможно текстом), которые время от времени меняют друг друга.

Итак. Для начала нам нужно сделать блок, который будет содержать все картинки (назовём его viewport, так сказать «область видимости слайдера»).
В него положим ненумерованный список (ul) для того, чтобы можно было удобно хранить все слайды в одном месте (в принципе можно использовать любой блочный контейнер с поддержкой внутренних элементов).
Ну и соответсвенно сами слайды, которые будут находится в слайдер на jQuery.

HTML. Слайдер на jQuery

Вот такой вот HTML должен получится:

CSS. Слайдер на jQuery

Сразу пропишем CSS, чтобы свёрстанный HTML правильно работал.
Итак:
1) нам нужно сделать так, чтобы viewport показывал только нужный в данный момент контент, а остальные слайды были скрыты
2) чтобы контейнер для слайдов (ul, который лежит внутри viewport) мог спокойно двигаться влево и вправо
3) чтобы слайды (которые у нас сделаны в виде элементов списка располагались друг за другом слева направо).

Вот CSS, с ним всё просто: overflow:hidden для vieport, position: absolute для ul и float: left для li.

Для примера выбарны размеры viewport и слайдов 300х100 пикселей (но они обязательно должны совпадать у vieport и слайда). Классы first, second и third — используются только для того, чтобы задать цвета слайдов для наглядности, в вашей реализации этих классов может и не быть.

JS. Слайдер на jQuery

Теперь перейдём к jQuery коду, который сам по себе также не представляет из себя ничего сверх-сложного.
Нам нужно сделать так, чтобы слайды пролистывались с определённым периодом времени (javascript setInterval), и чтобы при наведении на слайд, движение приостанавливалось (чтобы человек мог прочитать содержимое слайда).

Вот и получаем такой вот jQuery код:

По порядку:
1) объявляем переменную = длинне слайда
2) объявляем переменную-хендлер таймера (который будет отсчитывать период смены слайдов)
3) когда страница загрузится запускаем таймер и привязываем действия на наведение мышки на слайд (чтобы приостановить движение слайдов под мышкой)
4) ставим длинну ul-контейнера = длинне слайда*на количесвто слайдов (чтобы слайды не перекидывались на 2-рую строку).
5) пишем функцию, которая и делает смену слайдов (проверяем где сейчас находимся — на каком слайде, при помощи аттрибута data-current ul-контейнера; увеличиваем текущую позицию; проверяем, чтобы не вылезала за рамки всех слайдов; смещаем слайдер-контейнер влево на нужное количество пикселей).

Мы разработали рабочий вариант слайдер на jQuery, который работает, и можно легко применить в работе над сайтом.
На последок код выложен на jsfiddle.net, где можно поклацать и поиграться.
http://jsfiddle.net/FUxWc/

Читать еще:  Как сделать деревянные санки своими руками

Если будут вопросы — комменты открыты, ответим, поможем, подскажем.

Создаём JL-Slider на HTML

1. Для начала нам необходимо создать на рабочем столе папку с названием JL-Slider, внутри которой будет ещё одна папка images. Теперь, используя программу NotePad++, создадим дополнительно 3 файла — index.html, jl-slider.js, style.css. Откройте их в Notepad++ и пока не закрывайте.

Всё должно получиться так, как у меня на этой картинке:

2. Стили писал таким образом, чтобы широкоформатная картинка выравнивалась сверху по центру и подстраивалась по ширине слайдера. Поэтому находим в любом удобном для вас месте четыре изображения и бросаем их в папку images. Я взял 4 jpg с разрешением 1920x1200px. Но нечего страшного, если высота и ширина будут немного отличаться. На самом деле, таблицу стилей можно легко перестроить под свои нужды, а пока смотрим на мой пример:

Не забываем менять название на такое же, как на картинке.

3. В открытый файл index.html вставляем этот код и сохраняем:

4. Теперь в style.css вставляем это:

5. И последнее, в jl-slider.js необходимо написать действия слайдера:

Параметры, которые можно изменить подписал.

Когда все выше действия будут выполнены, откройте index.html через свой браузер. Посмотреть ДЕМО.

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

Часть 1. Создание слайдера в админке.

Файл «oi-slider.php»(корень плагина).

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

После подключения скриптов и стилей, нам необходимо добавить в администраторскую панель раздел «Слайдер» для создания слайдов. Реализуем мы данный пункт с использованием «Произвольного типа записи» по стандартной методологии WordPress.

Создаем тип поста «Слайдер»

Результатом данного кода будет появившийся новый раздел, в котором мы можем создавать записи с типом «Слайдер». Обратите внимание, что в ключе «supports» — не указано отображение поля для контента, так как все слайды мы будем хранить именно в контенте — строкой JSON и нам не нужно, чтобы пользователь видел, что там лежит. Почему именно в post_content? Это позволит избежать лишнего запроса в базу данных в случае, если мы будет подгружать мета поля. На данном этапе возникает вопрос: каким образом слайдер заполнять, собственно, слайдами? Для этого мы опять же обратимся к стандартной технике WordPress — мета боксы, которые будут служить для добавления и отображения слайдов в администраторской панели в рамках выбранного слайдера. Это будет выглядеть следующим образом:

Добавляем метабоксы

Как Вы можете заметить, в метабоксах мы будем хранить путь к картинке, заголовок и подпись. Все это при отправлении будет попадать в единый массив slider с соответствующим для каждого из этих параметров ключом: ‘slide’, ‘title’, ‘caption’. Далее следует JavaScript, который будет обрабатывать действия пользователей на фронтенде: кнопка «Добавить слайд», которая будет «подтягивать» все необходимые для заполнения поля, кнопка «Удалить слайд», которая, соответственно, будет удалять слайд в случае необходимости.
После занесения этих данных в метабоксы пользователем нам, конечно же, нужно их сохранить.

Реализуем это следующим образом:

Сохраняем в post_content

В приведенном коде хочу обратить Ваше внимание на пару основных моментов:
1. Так как мы будем «налету» перезаписывать post_content, нам потребуется удалить хук сохранения, чтобы избежать бесконечного цикла -> remove_action(‘save_post‘, ‘save_slides‘);
2. Хотелось бы осветить парсинг HTML-кода встроенными средствами PHP. Когда мы загружаем слайд из WP-аплодера, то в поле «Изображение» он попадает примерно в таком виде:

Читать еще:  Установка для производства биогаза (дешевый газ своими руками)

Нам в таком варианте хранить его неинтересно, ведь нас интересует только src. Для этого мы создаем новый DOMDocument-объект и пользуемся встроенными в него методами loadHTML(подгружаем html код), getElementsByTagName(получаем нужный тег), getAttribute(забираем нужный атрибут)

Часть 2. Шорткод и вывод слайдера.

Файл «inc/shortcodes.php».

Итак, функционал слайдера мы реализовали полностью осталось только создать удобный шорткод для вывода слайдера в произвольной части сайта. Для вывода мы возьмем стандартный вариант отображения слайдера из документации bootstrap:

. Если поле оставить пустым, то заголовок показан не будет.

Сделать заголовок ссылкой? — это радио кнопка с параметрами ДА/НЕТ. ДА — сформирует ссылку на основании вставленного URL. НЕТ — покажет обычный заголовок. По умолчанию установлено НЕТ.

Вставить ссылку — можно добавить ссылку вида http:// или https://, в противном случае принимать не будет (подробнее о том, как работает ЗАГОЛОВОК, КНОПКА и ССЫЛКА в 4 пункте).

Добавить описание — многострочное текстовое поле. Описание будет показано сразу после заголовка. Важно уточнить, область чёрного цвета под текстом, автоматически подстраивается в зависимости от количества слов.

Вы можете заполнить настройки перед последним пунктом.

4. Устанавливаем слайдер на сайте

Устанавливать слайдер мы будет в файл index.php шаблона protostar . Он находится …/templates/protostar/index.php. А место выберем подходящее, в верхней части страницы, сразу после класса body. Но для начала подробно рассмотрим код, каждую его часть по отдельности, а после выложу весь для вставки.

Сформировываем 4 ссылки для 4 изображений, присваиваем каждой переменную $, а при помощи полученных переменных выводим на странице.

Дальше создаём заголовок.

В первых двух условиях мы присваиваем: переменную $SliderTitle для заголовка, $SliderTitleLink для ссылки. А вывод делаем через третье условие: если радио кнопка JL-Slider-Title-YESNO имеет значение ДА , то показать ссылку, сформированную из $SliderTitle и $SliderTitleLink. Если кнопка имеет значение НЕТ , то выводить только $SliderTitle (т.е. текст заголовка). Логически всё правильно, человеку не придёт в голову устанавливать значение ДА в опциях, если не собирается вставлять URL страницы. Но если он не станет писать заголовок, вставит ссылку и выберет значение ДА , то ссылка всё же появится на странице. Однако так как она не имеет текста, никто её не увидит.

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

Лично я поступил следующим образом. Не стал подключать скрипты между тегами head, как это принято, а вставил между двумя строчками выше. Теперь, если в опциях отключить слайдер, то он исчезнет со страницы, а вместе с ним и подключённые скрипты. Это значит, что они не будут загружаться и тормозить наш сайт без надобности.

Настало время собрать весь код воедино и вставить его в файл index.php. Как и говорил раньше, сделаем это сразу после класса body:

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

Читать еще:  Сухопарник для самогонного аппарата своими руками

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

Или это для шаблона Joomla:

Главное не забудьте написать ещё один параметр в templateDetails.xml для загрузки изображения в случае с Joomla, а так же создайте дополнительную переменную в index.php. Добавите ли вы новые слайды или предпочтёте их удалить, работать слайдер от этого не перестанет.

Делаем хороший слайдер на jQuery своими руками. Как сделать слайдер на jQuery.

Сегодня мы рассмотрим как можно сделать слайдер на jQuery своими руками.

Слайдер (или как некоторые его называют Ротатор) — это блок на сайте, который состоит из набора картинок со ссылками (и возможно текстом), которые время от времени меняют друг друга.

Итак. Для начала нам нужно сделать блок, который будет содержать все картинки (назовём его viewport, так сказать «область видимости слайдера»).
В него положим ненумерованный список (ul) для того, чтобы можно было удобно хранить все слайды в одном месте (в принципе можно использовать любой блочный контейнер с поддержкой внутренних элементов).
Ну и соответсвенно сами слайды, которые будут находится в слайдер на jQuery.

HTML. Слайдер на jQuery

Вот такой вот HTML должен получится:

CSS. Слайдер на jQuery

Сразу пропишем CSS, чтобы свёрстанный HTML правильно работал.
Итак:
1) нам нужно сделать так, чтобы viewport показывал только нужный в данный момент контент, а остальные слайды были скрыты
2) чтобы контейнер для слайдов (ul, который лежит внутри viewport) мог спокойно двигаться влево и вправо
3) чтобы слайды (которые у нас сделаны в виде элементов списка располагались друг за другом слева направо).

Вот CSS, с ним всё просто: overflow:hidden для vieport, position: absolute для ul и float: left для li.

Для примера выбарны размеры viewport и слайдов 300х100 пикселей (но они обязательно должны совпадать у vieport и слайда). Классы first, second и third — используются только для того, чтобы задать цвета слайдов для наглядности, в вашей реализации этих классов может и не быть.

JS. Слайдер на jQuery

Теперь перейдём к jQuery коду, который сам по себе также не представляет из себя ничего сверх-сложного.
Нам нужно сделать так, чтобы слайды пролистывались с определённым периодом времени (javascript setInterval), и чтобы при наведении на слайд, движение приостанавливалось (чтобы человек мог прочитать содержимое слайда).

Вот и получаем такой вот jQuery код:

По порядку:
1) объявляем переменную = длинне слайда
2) объявляем переменную-хендлер таймера (который будет отсчитывать период смены слайдов)
3) когда страница загрузится запускаем таймер и привязываем действия на наведение мышки на слайд (чтобы приостановить движение слайдов под мышкой)
4) ставим длинну ul-контейнера = длинне слайда*на количесвто слайдов (чтобы слайды не перекидывались на 2-рую строку).
5) пишем функцию, которая и делает смену слайдов (проверяем где сейчас находимся — на каком слайде, при помощи аттрибута data-current ul-контейнера; увеличиваем текущую позицию; проверяем, чтобы не вылезала за рамки всех слайдов; смещаем слайдер-контейнер влево на нужное количество пикселей).

Мы разработали рабочий вариант слайдер на jQuery, который работает, и можно легко применить в работе над сайтом.
На последок код выложен на jsfiddle.net, где можно поклацать и поиграться.
http://jsfiddle.net/FUxWc/

Если будут вопросы — комменты открыты, ответим, поможем, подскажем.

Ссылка на основную публикацию
Статьи c упоминанием слов:
Adblock
detector