Lightbox 2 - галерея картинок

Багато власників самописних сайтів на HTML або HTML + PHP замислювалися про те, як вставити красиво картинки на сайт або зробити красиву фотогалерею. Я не відкриваю зараз "америку", в мережі є багато інструкція і ось що виходить коли збираєш їх все в один докладний мануал.

  • Увімкніть Lightbox CSS файл (або доповніть ваш css)

  • Поміняйте шляху до картинок loading.gif і closelabel.gif в файлах lightbox-web.js, lightbox.js і lightbox.css на свої
    1. Додайте rel = "lightbox» атрибут до будь-якої посиланням на картинку, щоб вона виглядала приблизно так:

  • Картинки можна групувати в галереї ось таким способом:

    Тобто в квадратних [] дужках вказуємо групу, в яку входять зображення

  • І нижче вставляємо:

    Використовувати Lightbox:
    Тема Lightbox:

    Зберігаємо, закриваємо.
  • Відкриваємо файл /fckeditor/editor/dialog/fck_image/fck_image.js
    Знаходимо там:

    SetAttribute (oLink, 'rel', GetE ( 'cmbLightboxValue'). Value); SetAttribute (oLink, 'title', GetE ( 'txtLightboxCaption'). Value);

    Зберігаємо файл і пробуємо протестувати все це господарство

  • Ще додам, знайшов недавно LightBox2 Plus, працює ще краще чим вище описане.
    Опишу основні можливості скрипта:

    1. Підганяє розмір зображення під ваш монітор, так щоб воно не вилазило за рамки і повністю було видно
    2. Змінювати масштаб можна Мишко
    3. Мишкою можна тягати збільшене зображення

    Доброго дня, Сергію! Сподіваюся дана тема ще не застаріла!

    При установці лайтбоксу зіткнувся з такою проблемою:
    У 3 пункті, в файлі lightbox.css немає картинок loading.gif і closelabel.gif.

    Сторінки сайту завантажуються через. ніяк не виходить встановити галерею ((Виконав все по вашій інструкції, підкажіть, будь ласка, в чому проблема ?!

    виконав:
    - У файлі lightbox-web.js вказав повні шляхи до картинок.
    - Пункт 1 і 2 вмонтував в старніцах довантажувати через. всі шляхи відповідають.

    А сам скрипт працює? Картинка відкривається? Може все таки з шляхами що щось не те. Ще можливі конфлікти з іншими красивостями, але мало ймовірно, у мене на сайті багато чого вартий і працює. Покажіть як виглядає шлях до ваших файлів

    Скрипт явно не працює, пробував Тест, створив html сторінку з 2 картинками, скрипт не починається ось приклад тестової сторінці «medaluxe.ru/lightbox.htm»

    Теж саме і з останньою версією lightbox2.51

    Шлях до файлів наступний:

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

    Може бути треба завантажити в корінь сайту, якісь файли бібліотеки jquery?

    у вас не правильно написані шляху до файлів, лається, що не вдається знайти файли. Пропишіть шляху так / lightbox / js /, / lightbox / css /, (саме символ «/» на початку, що означає від кореня).

    Якщо чесно, то я не використовую LightBox2 тому його прекрасно замінює LightBox Plus.
    Хоча коли пробував ставити LightBox2, то таких глюків як у вас помічено не було. Ймовірно є якісь конфлікти з іншими скриптами на сайті або CSS (може десь однаково називаються класи).
    З приводу масштабу, то перед заливкою зображень на сервер рекомендую приводити розмір зображення наприклад до 1024х768. Це можна робити вручну, або скриптом на сервері.

    ВСІМ, ХТО НЕ МОЖЕ ПІДКЛЮЧИТИ КАРТИНКИ К скрипт.
    У мене таке теж було, хоча шляху були вірними. Виявилося, Сергій забув написати, що змінювати шляху потрібно ще і в файлі lightbox.js. Прописала, і все працює!

    Але у мене тепер питання до Сергія. У мене є багато-багато великих картинок, при натисканні на які, вони відкриваються (як належить за скрипту) і займають 2,5 екрану. Як і де прописати картинкам умовний блок if, який зменшує картинки, якщо вони більше заданого розміру?

    Дякую за уточнення до статті, виправив.
    Якщо я правильно вас зрозумів, то вам всього лише потрібно використовувати скрипт LightBox2 Plus, про який написано в кінці статті. Він якраз сам підганяє розмір зображення під розмір екрану користувача

    А ви не могли б пожсказать, як і куди вставити умовний блок? Справа в тому, що мені не потрібен Plus, а потрібна саме та версія, яку я поставила.
    Допоможете мені?)

    А чим вас не влаштовує Plus? Адже це теж саме, але з тією самою можливістю яка вам потрібна! На жаль я не дуже сильний в яваскрипт. У файлі lightbox_plus.js найперша функція WindowSize і після неї відповідає за розмір вікна

    Сергій, ок, спробую Plus.
    І ще питання: чому у вашій версії установки скрипта потрібно підключити 3 js-файлу, а на оф. сайті - тільки 2?

    ймовірно на оф сайті версія вже давно оновилася і розробники умістили все в два файли. Коли я писав статтю, інформацію брав з оф сайту.

    Сам скрипт вивів, заробив, але перестав працювати слайдер з банерами.

    Добридень! Сподіваюся я не спізнився ще зі своєю проблемою)) Справа в то що скрипт працює чудово, от тільки коли я починаю розсовувати вьюпорте браузера по горизонталі стає видно фон html-ля, хоча чорний фон відкритої картинки повинен перекривати весь вьюпорте хоч скільки його збільшуй.

    Добрий день. Спробуйте завантажити з сайту останньою версію скрипта

    В описі більш менш зрозуміло куди що прописувати. А саму папку з лайтбоксів в яку директорію то копіювати.

    Можете в кореневу покласти, головне що б потім шлях до скриптів правильний був

    у верхній частині сторінки є карусель, сенс проблеми в тому, що для тих 6 фоток, які відразу були завантажені в карусель Lightbox Plus працює, але от якщо трохи прокрутити карусель і клікнути мишкою на фотку, яка тільки що виїхала з «тіні» Lightbox Plus не працює ... підкажіть будь ласка як це виправити ...

    Схожі статті