Підключення зовнішньої фотогалереї

Насправді подібних фотогалерей створено вже досить багато, так що Google вам в допомогу - шукайте і підбирайте саме те, що вам потрібно.

Для підключення та демонстрації роботи скрипта мені знадобиться вже заповнений розділ. Мною було створено розділ «Проста фотогалерея» та до нього підключено компонент «Фотогалерея». Компонент є спрощеною версією компонента "Мультимедіа та файли: Фотогалерея". Завантажити всі необхідні файли ви можете наприкінці цього уроку.

Перед використанням скриптів заглибимося трохи в теорію і розберемося з типами зберігання файлів у CMS NetCat. Існує 3 типи зберігання файлів:

Тип зберігання (він тип файлової системи) налаштовується в редагуванні поля. У нашому випадку це поле, яке відповідає за завантаження та зберігання фотографії. Давайте розглянемо дані цього поля:

фотогалереї

У нашому компоненті всього 3 поля: Повне зображення, Прев'ю та Опис. Наразі ми працюємо з полем «Повне зображення». На зображенні видно, що поле має такі параметри:

  1. Тип поля: Файл
  2. Формат: 2000000:image/* (Для завантаження дозволено тільки зображення об'ємом не більше 2000000 байт)
  3. Тип файлової системи: Захищена

Інші параметри для нас зараз не важливі. На даному етапі ми залишимо тип файлової системи в поточному стані і почнемо впровадження скрипта.

Чому я вибрав саме цю галерею: вона проста в установці, в налаштуванні і вона розуміє захищений тип файлів у CMS NetCat.

Зараз фотогалерея на сайті виглядає так:

підключення

і всі фотографії відкриваються на новій сторінці, що, ясна річ, нас не влаштовує.

Нам, зрештою, потрібно буде прийти до такого виду:

підключення

Приступимо до впровадження.

Для початку потрібноскопіювати всі потрібні файли на наш сайт. У числі файлів, що переміщуються повинні бути:

  • jquery-1.5.1.min.js
  • jquery.lightbox-0.5.js
  • jquery.lightbox-0.5.css
  • папка images з зображеннями

На першому етапі необхідно підключити необхідні файли:

  • Файл стилів :
  • Ядро jQuery : або
  • Плагін галереї :

  • js-скрипти перенести до папки «js»
  • файл стилів у папку «css»
  • картинки залишити в папці «images»

в результаті отримаємо:

При копіюванні рядків, не забувайте про екранування подвійних лапок і шляхи.

Тепер потрібно ініціалізувати плагін підключення галереї та прив'язати його до якогось об'єкта за допомогою селекторів. Ініціалізацію можна проводити в будь-якому місці сторінки (наприклад, тільки на сторінці галереї), або в окремому файлі з вашими js-скриптами.

Для підключення галереї потрібно прописати рядок: $('селектор').lightBox();

Як селектор можна вибрати такі варіанти:

  • $('#gallery a').lightBox(); - плагін галереї спрацює у тих посилань, які знаходяться всередині блоку з id='gallery'
  • $('.pict').lightBox(); - плагін галереї спрацює у об'єктів з class='pict'
  • і т.д..

Цей рядок прописуємо на сайті. Я не створюватиму зайвих файлів і пропишу рядок у блоці таким чином:

підключення

Тепер необхідно виконати деякі налаштування у компоненті фотогалереї. Переходимо в налаштування і знаходимо місце, в якому виводиться превью фотографії. На даний момент потрібний код знаходиться в полі «Об'єкт у списку»:

потрібно

Тут замінюємо рядок:

Як ви бачите, були замінені атрибут href, який тепер вказує наповну картинку, також до тегу "a" були додані title з описом і class='pict'.

Підключення класу потрібно для того, щоб плагін галереї «зрозумів» про те, при натисканні на якому об'єкті він повинен спрацювати. У нашому випадку це будь-яка картинка з нашої галереї. Висновок опису зображення в атрибуті title потрібно для того, щоб цей опис виводився у спливаючому вікні.

На цьому етапі скрипт вже працює, тобто спливаюче вікно зі збільшеним (вихідним) зображенням з'являється.

галереї

Інші плагіни фотогалереї підключаються аналогічно.