PP Gallery – універсальна фотогалерея з мініатюрами

Головна Веб-дизайн та оптимізація сайтів Фотолабораторія Радіотехніка Корисні програми Розробка сайтів

Веб-дизайн з jQuery - це дуже просто!

PP Gallery – універсальна фотогалерея з мініатюрами. Встановлення та налаштування

Встановлення фотогалереї PP Gallery

Як завжди, починаємо зі створення на сайті нової папки, назвавши її, наприклад,ppgallery. Потім завантажуємо архів і розпаковуємо його у створену папку. У нас вийде одна папкаjs зі скриптами та інша з CSS-файлами.

  • "ppgallery/css/ppgallery.css" rel="stylesheet" type="text/css" />
  • "ppgallery/css/dark-hive/jquery-ui-1.8.6.custom.css" rel="stylesheet" type="text/css" />
  • Важливо: якщо на вашому сайті використовується кілька плагінівjQuery, то зручніше перенести файл jquery.js (бажано останньої версії) до кореневої папки, щоб не завантажувати його кілька разів. У цьому випадку рядок звернення до нього виглядатиме однаково для всіх плагінів. Зокрема, для нашого прикладу виходить так: Не рекомендується використовувати на одній сторінці кілька різних версійjQuery, щоб вони не конфліктували одна з одною. При цьому обов'язково перевіряйте роботу плагінів із встановленою версієюjQuery, оскільки не всі версії взаємозамінні.

    Для розміщення зображень (великих - big.jpg та мініатюр - small.jpg) використовується невпорядкований список зі звичайних гіперпосилань з ідентифікатором:

    Якщо потрібно виводити написи під зображеннями, їх слід вказувати в гіперпосилань.

    Налаштування параметрів фотогалереї PP Gallery

    Оскільки у вікні фотогалереїPP Gallery виводятьсямініатюри всіх зображень, то, в принципі, їхнє дублювання на сторінці сайту стає необов'язковим. Виняток становить лише випадок, якщо ви хочете яскраво оформити фотогалерею з будь-якими наворотами та прибамбасами. Але навіщо це робити, якщо кліком по будь-якій картинці відвідувач все одно йде у вікноPP Gallery і ваші праці залишаться непоміченими?

    Отже, на сторінці сайту можна приховати всі зображення галереї, залишивши лише кнопку запуску програмиPP Gallery. Для цього треба ввести значення#view у рядку ініціалізації showHiddenGalleryButton: '#view', //#view - приховати мініатюри на сторінці з галереєю і додати кнопку запуску фотогалереї за допомогою тега

    Оформлення кнопки може бути будь-яким: у вигляді простого напису, кнопки, картинки тощо. Наприклад, таку кнопку можна зробити, використовуючи мініатюру папки з картинками, як показано праворуч. Приклад, знову ж таки, робітник, можна клікнути!

    Підведемо підсумки.PP Gallery - універсальна фотогалерея, що легко і швидко встановлюється на сайт. Вона має привабливий зовнішній вигляд та розширені можливості навігації з використанням мініатюр-прев'юшок, що дозволяє у багатьох випадках відмовитися від розміщення зображень на основній сторінці фотогалереї.