Здрастуйте, шановні читачі блогу . Сьогодні хочу поговорити на тему створення слайдерів для свого сайту. За допомогою них можна не тільки вставляти ілюстрації до статті (слайд-шоу), але і використовувати їх для наочного і зручного надання інформації про своєму сайті. Так багато комерційні проекти (наприклад, онлайн сервіси) використовують слайдери на головній сторінці для того, щоб відвідувачі могли швидко зрозуміти, куди вони потрапили і що можуть тут отримати.
Так вже ми влаштовані, що графічну інформацію сприймаємо краще, ніж текстову, а зміна інформаційних блоків в слайдері дозволяє залучити до нього додаткову увагу користувачів. Можна сказати, що Slider став необхідним атрибутом у дизайні сучасних сайтів, особливо якщо вам потрібно в стислому вигляді розповісти про себе до того моменту, як користувачу захочеться закрити сторінку.
Зазвичай слайдер складається з декількох графічних зображень, які в свою чергу можуть бути або фотографіями, або, що буває частіше, містять ще і текстові складові, а також кнопки, що дозволяють вручну переходити між кадрами (іноді ще й маркери бувають щоб розуміти який зараз демонструється слайд). Ну, чого я вам розповідаю, ви й самі все це бачили і продовжуєте спостерігати в рунеті.
В буржунете ж тяжіння до використання способу подання інформації у вигляді Slider почалося набагато раніше, але і до нас ця хвиля докотилася через роки, бо ми досить пристойно відстаємо від заходу. Великі картинки на головній сторінці з великими і зрозумілими заголовками, а також невеликими текстами стали для нас звичними. Залишається тільки зрозуміти, як все це пишність реалізувати у себе на сайті.
Переваги створення слайдера саме в WOW Slider
Насправді нічого вигадувати вам і не доведеться. Ні, звичайно ж, можна спробувати сконструлить подібну конструкцію і самому, але навіщо винаходити велосипед, коли все вже зробили за нас. Залишається тільки спробувати все це на практиці і вирішити, що саме вам підійде найбільше.
В силу кінцевого обсягу публікації я не зможу освітити весь спектр наявних рішень, але думаю, що і цього буде достатньо для реалізації більшості завдань. Якщо ви самі відкрили для себе щось вартісне в області безкоштовних слайдерів для сайту, то я і інші читачі будемо вам вдячні, якщо поділіться ссилочку або хоча б назвою.
Існує кілька варіантів використання слайдерів. Це можуть бути плагіни для движка сайту, який ви використовуєте (наприклад, для Вордпресс або Joomla). Є рішення для ручної установки, коли вам самим доведеться трохи полазити в коді, ну і ще є універсальні варіанти, які все це в собі поєднують.
Почати опис я якраз і хочу з такого універсального рішення, яке називається WOW Slider. Рішення, яке запропонували розробники цієї програми (так, так, це дійсно десктопна софтина, а не онлайн сервіс або серверний скрипт), відрізняється оригінальністю, так і універсальністю.
Тепер про сумне. WOW Slider коштує грошей і досить багато, на мій погляд. Правда, є безкоштовна і практично повнофункціональна версія програми (немає можливості додавати водяні знаки в слайд шоу). Але тут нас знову ж чекає печаль — безкоштовна версія додає на кадри формованого слайдшоу водяний знак WOWSlider, а також відкриту посилання веде на сайт розробників.
Якщо з першою неприємністю можна було б змиритися, бо водяний знак зовсім маленький, то з відкритою посиланням хтось може і не погодитися. Залишається тільки оплатити програму, якщо вам страшенно сподобалися створювані її слайд шоу, ну або ввести в пошуковий рядок Яндекса або Гугла відповідний запит і подивитися наявні рішення озвученої проблеми. Однак, я вам нічого такого не говорив.
Отже, для того, щоб скачати безкоштовну версію WOW Slider, вам потрібно буде наведеної на сторінці вказати своє ім’я та e-mail, на який, власне, і прийде посилання для скачування цієї програми. Установка звичайна. Після запуску можна перемкнути інтерфейс на російську мову (в Options) і, власне, моя допомогою вам більше не потрібна, бо все дуже просто і наочно.
Створення слайд-шоу в WOW Slider і його вставка на сайт
Можна сказати, що весь процес створення слайдера для сайту складається з трьох кроків:
Коли всі кадри для майбутнього слайдера додасте, обзовете і обссылите (додасте посилання на зображення і виберіть спосіб їх відкривання), виберіть шаблон і ефект переходу, то можете сміливо тиснути на кнопку з гайковим ключем у верхній панелі інструментів.
На вкладці «Основні» перегляньте всі можливі параметри та розставте галочки в залежності від ваших уподобань. Потім переходите на вкладку «Дизайн» де можна погратися з шаблонами і ефектами майбутнього слайд-шоу.
Не забудьте вибрати розмір для слайдера, щоб він ідеально підходив до ширини ваших сторінок. До речі, програма WOWSlider обріже всі вихідні фотки до необхідного розміру, що є великим плюсом, бо будуть завантажуватися набагато більш легкі графічні файлики, ніж оригінали. Все більш ніж зрозуміло і прозоро.
Якщо лінь розбиратися, то подивіться «швидкий старт» від розробників:
«alt=»»>
На вибір вам пропонується досить багато варіантів публікації даного слайдшоу. Основними з них, на мій погляд, є збереження в папку, а також створення плагіна слайдера для Вордпресс і модуля для Joomla.
Плагін та модуль будуть дуже зручні тим, хто ще не освоївся з сайтом і побоюється щось копіювати на сервер і влазити в файли. Але все ж таки перший варіант найбільш універсальний. Давайте поговоримо про публікації трохи докладніше.
Вставка слайд-шоу на сайт за допомогою плагіна для ВордПресс
В силу обмеженого розміру цій публікації я розберу лише створення плагіна для Вордпресс і додавання слайдера на сторінки свого сайту за допомогою фреймів. До речі, про роботу з плагіном на сайті розробників є досить-таки докладний ролик (решта десятки відеороликів по роботі з WOW Slider ви знайдете за наведеною посиланням):
«alt=»»>
Якщо говорити коротко, то потрібно зробити наступне:
Короткий код буде виглядати приблизно так:
[[wowslider id=»3″]]
Постає питання, а як додати в WordPress ще кілька слайдерів? Знову створювати та встановлювати плагін? І так, і ні. Плагін в програмі WOWSlider створюєте точно так само, але от в адмінці Вордпресс заходьте на другу вкладку плагіна «Add New». Натискаєте на кнопку «Виберіть файл» та знаходьте тільки що створений у програмі плагін на своєму комп’ютері, після чого тиснете на кнопку «Add Now».
Все, на вкладці плагіна «All Sliders» з’явиться ще один рядок і ще один короткий код для вставки нового слайдшоу.
Вставка слайдера на будь-який сайт без плагіна
Однак, будь-плагін це не є добре і краще намагатися обходитися без них, тим більше, що зробити це зовсім не складно стосовно WOW Slider. Для цього досить вибрати варіант публікації «В папку» і перекинути її потім по ФТП на свій сервер (хостинг). Чому ж тоді відразу не вибрати варіант «Опублікувати на FTP сервер»? А тому, що боязно. Зараз поясню.
Приблизно рік тому у мене почалася епопея з зараженням всіх моїх сайтів вірусами і пошуком коріння цього зла. Виявилося, що просто-напросто були витягнені всі паролі з використовуваного мною ФТП менеджера FileZilla. Це зараз я його посилив з допомогою менеджера паролів KeePass і шляхом невеликих доробок описаних у цій же статті, а тоді він був беззахисний перед зломом, бо зберігав паролі незашифрованими.
Ось і ФТП менеджеру, вбудованому в WOWSlider, я не схильний довіряти. Тому зберігаємо створений слайдер для сайту в папку на комп’ютері, підключаємося по ФТП з допомогою зв’язки Файлзилы і Кипаса (див. наведені статті і не манкируйте безпекою), ну і кидаємо папку зі слайд-шоу в будь-яке зручне для вас місце. Я вибрав, наприклад, таке:
wp-content/uploads/
Ось, власне, і все. Залишилося тільки зрозуміти, а як же вставляти дане слайд-шоу на сторінки нашого сайту або блогу. Тут нам стане в нагоді чудова технологія Html фреймів, а саме Iframe (її сучасна інкарнація). Якщо самі тег Frame використовувати не рекомендується, то Iframe дуже навіть рекомендується. Наприклад, вставка відео з Ютуба відбувається саме з його допомогою.
До речі, необхідний код ви можете взяти в одному з файлів, який мешкає в збереженою з WOW Slider папці. Він називається iframe_index.html і живе в її корені. Правда там треба буде змінити шлях до файлу index.html з відносного на абсолютний, щоб вийшло приблизно так:
Якщо я вставлю даний код прямо в текст цієї публікації (причому не важливо, чи буде у вас включений візуальних редактор, чи ні, бо це чисто Html код, який не буде вирізатися ні в якому разі) трохи нижче, то отримаю відображення слайдера на сайті, що живе в надрах скопійованої з ФТП папці:
«alt=»»>
І ніякого плагіна встановлювати при цьому не треба. Більш того, ви можете скопіювати цей код з Iframe до себе на сайт і слайдшоу у вас буде чудово працювати. Чудовий, на мій погляд, спосіб, істотно перевершує той, що вимагає використання плагіна.
Можливо, що я вибрав не оптимальний шаблон і спосіб переходу в налаштуваннях WOW Slider (просто випадкові взяв), але це не суть. Внизу відображаються ті самі маркери, які дозволяють зрозуміти, який саме кадр слайд-шоу зараз відображається, і навіть дозволяють подивитися на мініатюри інших слайдів. Є кнопки для гортання, але і відкрита посилання на сайт розробників теж має місце бути, що не є гуд, але цілком терпимо, тим більше що…
Плагіни для WordPress для виведення слайдшоу на своєму блозі
Варіантів слайдерів для WordPress реалізованих у вигляді плагінів досить багато і всі їх згадати не вийде, тому спробую пробігтись галопом по Європах і коротенечко їх охарактеризувати:
Meta Slider — досить цікавий плагін, який об’єднує в собі функціонал аж чотирьох популярних розширень цього формату, а саме: Nivo Slider, Flex Slider, Coin і Чуйний. Кожен із згаданих слайдерів хороший по своєму, і завдяки Meta ви зможете спробувати всі чотири разом, встановивши лише один плагін. Є досить-таки докладний ролик по роботі з ним:
«alt=»»>
Інтерфейс не має російській інтерпретації, але браузер Хром з його вбудованим переведенням вам допоможе. Загалом-то все просто. У лівій частині ви зможете завантажити і сортувати зображення, додати до них Тайтли і навіть посилання на кожен слайд.
Ну, а праворуч ви зможете вибрати один з чотирьох варіантів сценарію (Nivo, Flex, Coin та Responsive), задати розмір області зі слайд-шоу, вибрати шаблони і ефекти.
Загалом-то виходить все те ж саме, що і в програмі WOWSlider, але тільки в інтерфейсі адмінки Вордпресс. Що примітно, на сторінки блогу слайдер вставляється знову ж таки з допомогою коротких кодів, які можна скопіювати в самому низу лівої колонки з налаштуваннями.
Має місце бути платна версія Meta Slider, де буде доступний досить прикольний ефект появи окремих зображень або текстів на одному слайді і можливість вставляти відео кадри, ну і слайдер постів вашого блогу буде зробити можна, що може стати в нагоді.
«alt=»»>
«alt=»»>
Даний плагін насамперед підкуповує простотою і елегантністю вставки і установки слайдера (якщо вибрати варіант з маркерами) або слайд-шоу (якщо вибрати варіант з мініатюрами). Є докладна документація по різним додатковим атрибутам, які відкриють перед вами воістину безмежні можливості.
«alt=»»>
Сподіваюся, що ви теж поділіться зі мною і читачами плагінами, які використовуєте або могли б порадити використовувати для реалізації різного роду слайдшоу на сайті. Буду радий додати їх у список. Спасибі.
Де взяти Slideshow для Joomla і будь-якого іншого двигуна
Якщо говорити про розширення для Joomla, які допомагають додати слайдер або слайдшоу на свій сайт, то тут вибирати, на мій погляд, набагато простіше, бо їх скарбничка розширення досить-таки функціональна і практично скрізь має місце бути посилання на демо сторінку.
Власне, jQuery Slideshow можна оцінити за наведеним посиланням. Наприклад, сторінка вже згаданого раніше Nivo Slider дозволяє отримати професійне розширення, виконане на базі цього скрипта, правда поширюється воно за гроші.
Якщо судити по демо, то виглядає все дуже навіть презентабельно:
Думаю, що ви самі в змозі пройтися за списком Joomla-слайдерів і вирішити, який з них використовувати. Напевно, варто почати розгляд з безкоштовних, а вже при відсутності гідних для вирішення ваших завдань варіантів звертатися до платних рішень.
Однак, продовжимо. Отже, ми з вами розглянули два типи конструкторів — у вигляді десктопної програми і у вигляді розширення для движка сайту. Їх основна перевага — адмінка, де можна поставити галочки в потрібних місцях або вибрати потрібний з випадаючого списку. З цим може впоратися будь-який, навіть зовсім не підготовлений користувач.
Але в мережі можна зустріти і універсальні скрипти слайдерів, які можна прикрутити до свого сайту і змусити робити те, що ви від них хочете, але для цього доведеться лізти в код, підключатися з сайту по ФТП, копатися в документації до скрипту (якщо така має) — в загальному доведеться ворушити мізками, а часто і танцювати з бубном.
Колись мені таке заняття подобалося, але зараз не так багато вільного часу, щоб витрачати його на створення велосипеда, коли можна прикрутити плагін і зайнятися чимось важливішим. Однак, цей спосіб реалізації слайд-шоу має і свої переваги, бо не потрібно ускладнювати життя хостингу зайвими плагінами і можна відчути себе реально розумним, впоравшись зі всієї цієї машинерией.
Всі наведені далі скрипти працюють завдяки бібліотеці jQuery, тому потрібно подбати про її підвантаження. Також потрібно буде довантажувати з хедера і сам скрипт, і його CSS стилі.
В потрібне місце тексту статті або на шаблон сайту потрібно додати Html список зі слайдами (картинками), який з допомогою джаваскрипта буде трансформуватися в слайдер. Все це не так вже і просто для новачка і одночасно очевидно для просунутого користувача.
Списки різних скриптів слайдерів можна знайти на різних ресурсах. Особисто мені повторюватися не хочеться і лише наведу деякі з них, а решту ви зможете знайти і самі:
Після оплати скрипта вам буде доступна вся необхідна документація по установці і настройці слайдера.
Особисто мені найбільше імпонує показаний вище варіант вставки слайдшоу з допомогою тега iframe. У цьому випадку ви налаштовуєте скрипт під свої потрібні на комп’ютері, створюєте потрібний Html файлик (його можна буде відкрити в браузері для перевірки працездатності), додаєте потрібні фотки у відповідні папки і закиньте все це добро на сервер свого хостингу в будь-яке зручне місце.
Ну, а потім подгружаете цю створену Html-сторінку за допомогою iframe в будь-яке потрібне місце. В цьому випадку вам не потрібно буде підключати jQuery, скрипт слайдера і його CSS файли до всіх сторінок свого сайту, що може знизити швидкість його роботи. Всі ці речі ви підключите виключно на створеній Html-сторінці, яку будете виводити в кадрі.
FlexSlider — приклад вставки на сайт слайдера на jQuery
Давайте для прикладу візьмемо відомий скрипт слайдера FlexSlider, який скачати можна за наведеною посиланням. Після розпакування архіву, в папці flexslider ви виявите файлик index.html (це та сама Html-сторінка), в якому вже підключені бібліотека jQuery, файлик зі стилями і файлик, власне, з самим скриптом:
Трохи нижче ще йде код ініціалізації:
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function(){
$(‘.flexslider’).flexslider({
animation: «slide»,
start: function(slider){
$(‘body’).removeClass(‘loading’);
}
});
});
А ще нижче якраз і формується той самий Html список, якому судилося перерости в слайд-шоу:
Вам тільки залишиться завантажити свої картинки в папку img і прописати їх назви в згаданому списку файлу index.html. Розміри слайдера, як я зрозумів, можна поміняти в CSS файлику, а от інші налаштування живуть вже в джаваскрипт файлику jquery.flexslider.js (в його кінці) з папки js.
//FlexSlider: Default Settings
$.flexslider.defaults = {
namespace: «flex», //{NEW} String): string Prefix attached to the class of every element generated by the plugin
selector: «.slides > li», //{NEW} Selector: Must match a simple pattern. ‘{container} > {slide}’ — Ignore pattern at your own peril
animation: «fade», //String: Select your animation type, «fade» or «slide»
easing: «swing», //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
direction: «horizontal», //String: Select the sliding direction, «horizontal» or «vertical»
reverse: false, //{NEW} Boolean: Reverse the animation direction
animationLoop: true, //Boolean: Should the animation loop? If false, directionNav will received «disable» classes at either end
smoothHeight: false, //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode
startAt: 0, //Integer: The slide that the slider should start on. Array notation (0 = first slide)
slideshow: true, //Boolean: Animate slider automatically
slideshowSpeed: 7000, //Integer: Set the speed of the slideshow cycling, in milliseconds
animationSpeed: 600, //Integer: Set the speed of animations, in milliseconds
По англійськи розумієте? Тоді проблем з налаштуванням не виникне. Ну, і останнім кроком буде вставлення в текст статті такого кадру:
Як бачите, тут все значно складніше, ніж при використанні плагіна або програми WOW Slider, але зате цікавіше. Правда ж?
Удачі вам! До зустрічей на сторінках блогу