ImageFlow — красивая фотогалерея на JavaScript и PHP

Фотогалерея ImageFlow на JavaScript и PHP

Cимпатичная галерея изображений ImageFlow, которая почему-то не попала в список «32 Flash и Javascript галереи» от dejurka.ru

Не буду долго томить, демоверсию смотрите здесь. Скачать рабочую версию можно отсюда (22 KB).

По заверению разработчика, галерея ImageFlow совместима с IE6+, Opera 6.0+, Firefox 2.0.0.9+, Safari 1.3.2+, Konqueror 3.5.7.

Для работы скрипта необходима поддержка на сервере PHP не ниже версии 4.3.2. Для тестирования и настройки на локальном компьютере понадобится Денвер. Иначе не будет работать эффект отражения, который реализован через PHP-скрипт.

В принципе, вся документация про инсталляцию, настройку и использование ImageFlow понятно расписана на двух языках (немецком и английском), поэтому нет смысла переписывать её еще раз. Советую почитать FAQ, там есть полезные советы, например, как изменить цвет фона в скрипте или установить начальную фотографию.

Достоинства

Красивый внешний вид и дополнительная динамика на сайте. Легкая настройка. Поддерживается управление сменой фотографий не только перетаскиванием слайдера мышью, но и колесом прокрутки и кнопками «влево-вправо» на клавиатуре.

Недостатки

Как всегда самый главный минус — не будет работать при отключенных JavaScript и изображениях в браузере пользователя. Нет поддержки слайдшоу.

Где можно использовать

Отлично подойдет не только для фотогалерей, но и как каталог работ в портфолио со ссылками на отдельные примеры. Также можно использовать в качестве эффектного меню на сайте (только понадобится настройка ручками каждого пункта, и добавить текстовые ссылки).

Для себя решил, обязательно прикрутить ImageFlow к какому-нибудь своему новому проекту :)

* * *

UPD

Обновленный адрес демо — http://imageflow.finnrudolph.de/

Документация

Скачать можно тут — http://finnrudolph.de/ImageFlow/Download

* * *

Сканер блогов:

Как эффективно работать дома? FeedBurner: проверьте свои фиды, чтобы не терять «вес». Юзабилити и безопасность.

* * *

Понравилась статья?

Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:

* * *

Статьи по теме:

Комментариев: 29

  1. none, 24.07.2008 в 19:08

    > Для тестирования и настройки на локальном компьютере понадобится Денвер.

    жаль нету денвера под линуксом :(

    А серьезно — прикольные эффекты, мне всегда нравились... правда опопсели уже порядком, как на мой взгляд.

    Ответить

  2. rotor, 24.07.2008 в 20:27

    Ну не знаю, как насчет попсовости, а чаще всего вижу просто описание подобного в статьях-сборках типа «10 лучших прикольных штук на JS» или в обзорах на блогах.

    На сайтах, наоборот, редко встречаются (в смысле используются), хотя определенная тенденция к росту есть. Чаще можно увидеть на личных проектах, потому, что, обычно, клиенты жалеют денег на такие разработки или внедрение.

    Ответить

  3. max, 09.08.2008 в 8:43

    >>>жаль нету денвера под линуксом :(

    Ну а зачем он там нужен?

    Там же все гораздо проще!

    www.instanceof.ru/linux/lamp

    А за галлерею огромное спасибо.

    Ответить

  4. Х-ПРО » Blog Archive » ImageFlow — красивая фотогалерея на JavaScript и PHP, 25.08.2008 в 0:15

    [...] rotor wrote an interesting post today onHere’s a quick excerpt [...]

    Ответить

  5. Ultimatum, 02.09.2008 в 20:30

    Вам бы с вашим талантом журналистом работать :)

    Ответить

  6. эд, 29.09.2008 в 7:00

    Re: жаль нету денвера под линуксом :(

    ))) приколист) а просто апач с мусклей и пхп связать в нем думаешь незя?))

    Ответить

  7. Сергей, 08.11.2008 в 15:03

    Галлерея красивая. Жаль что объем библиотеки очень большой. Вот еще описание простенькой библиотеки фотогалереи. Может пригодиться кому.

    http://www.homepictures.ru/halyava/hpgallery.html

    Ответить

  8. gps, 08.08.2009 в 18:26

    Спасибо огромное отличная галерея...

    Ответить

  9. alexandr, 01.10.2009 в 16:51

    Демонстрация не работает((

    Ответить

  10. rotor, 01.10.2009 в 21:05

    Не только не работает демо, но похоже, что и весь сайт лежит.

    Демку можно глянуть тут (сверху страницы):

    nogoto4ki.ru/gallery/

    Исходники выкладывать в открытый доступ не буду, авторские права все-таки и все такое… Если понадобятся — пишите на почту.

    Ответить

    • @ Алексей, 05.12.2009 в 13:17

      Здравствуй! Я на счёт исходников для ImageFlow! Где можно достать? Оч надо!

      Ответить

      • rotor, 05.12.2009 в 19:58

        Обновленный адрес демо — imageflow.finnrudolph.de

        Скачать можно тут — finnrudolph.de/ImageFlow/Download

        Ответить

        • @ Алексей, 06.12.2009 в 0:50

          Я там уже качал!!! Но у меня не отображаются картинки,вместо них просто белые рамки. Не могу понять! Может подскажешь?

          Ответить

          • rotor, 06.12.2009 в 3:26

            Подсказать не проблема, если знать, что и в каком порядке ты делаешь.

            Скрипт работает только на сервере, нужна поддержка PHP. Я скачал, залил на сервер, поместил в папку img свои фотки под теми же названиями и всё заработало.

            На каком этапе проблема?

            Ответить

            • @ Алексей, 06.12.2009 в 22:26

              Вроде как я сделал тоже самое....... но у меня не работает. Отображаются только белые рамки.А когда кликаешь по рамке открывается фотка.

              Ответить

              • rotor, 07.12.2009 в 1:17

                Проверь через <?php phpinfo(); ?> совместимость со скриптом версии PHP и GD Library на твоем сервере. Возможно, причина в этом.

                Ответить

                • @ Алексей, 09.12.2009 в 23:40

                  Я в этом не очень разбираюсь... Вот нужная инфа по моему серверу,может глянешь? tesla.timeweb.ru/phpinfo.php

                  Ответить

                  • rotor, 10.12.2009 в 0:44

                    C версиями всё в порядке. Теперь нужно еще раз проверить подключение скрипта: пути к фото, скриптам, стилям, классы и идентификаторы div. Не спеша, по инструкции finnrudolph.de/ImageFlow/Installation

                    Еще попробуй выставить на папку с фотками права 777. Предыдущая версия скрипта использовала кэш, и версии фото с отражениями.

                    Ответить

                    • @ Алексей, 10.12.2009 в 23:08

                      Пытаюсь разобраться в инструкции... не понимаю несколько моментов:

                      а именно,что здесь (id="unique_name" ) нужно указывать?

                      и тут

                      domReady (function ()

                      {

                      var instanceOne = new ImageFlow ();

                      instanceOne.init ({ ImageFlowID: 'myImageFlow' });

                      });

                      а конкретнее ({ ImageFlowID: 'myImageFlow' });

                    • rotor, 10.12.2009 в 23:43

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

                      По причине, описанной выше, первый вопрос я не понял (в следующий раз пиши из какого файла какая строка), вторую функцию править не надо.

                      Подключи к странице вместо imageflow.packed.js скрипт imageflow.js из архива. Сверху в нём есть все настройки с пояснениями. Больше нигде и ничего не нужно менять, тем более в функциях.

                    • @ Алексей, 13.12.2009 в 12:49

                      Спасибо за помощь!

    • @ denser, 28.04.2014 в 5:45

      Здравствуй, можешь кинуть исходники галереи? Юзаться будут в локалке

      Ответить

  11. Bersi, 16.11.2009 в 18:13

    У галереи есть один большой недостаток: она грузит сразу большие картинки. Подозреваю, чо из-за этого, когда в галерее 10-20 изображений, все начинает тормозить безбожно, особенно на слабых машинах.

    Может кто знает, как поправить это?

    Ответить

  12. Владимирыч, 16.01.2012 в 15:47

    Как раз то что долго искал, с внедрением в пхп страницу небыло, однако захотелось кастомизировать её, почитал на офф сайте доки- но непонял в какой из файлов прописывать настройки?

    Ответить

    • rotor, 16.01.2012 в 17:46

      В файле imageflow.js (или imageflow.packed.js — смотря что подключаете), внизу:

      domReady(function()
      {
      	var instanceOne = new ImageFlow();
      	instanceOne.init({ ImageFlowID: 'myImageFlow',
      	... 
      	});
      });

      Вместо «...» пишите свои параметры. Это хорошо видно на примерах.

      Ответить

  13. Сергей, 06.04.2012 в 0:21

    Спасибо, хорошая галерея, и на счет не достатка Bersi верно подметил точто она будет долго грузиться если в ней будет фоток 20

    Ответить

  14. @ Роман, 10.07.2012 в 19:50

    люди а как эту радость прикрутить к джумле? А?

    Ответить

Есть что сказать?