Ещё одно руководство по разработке Ajax-приложений.
На этот раз мы будем делать простенькую галерею изображений.
Всё очень просто — изображение, список ссылок с номерами на другие изображения, при нажатии на которые, новое изображение эффектно появляется без перезагрузки страницы. Для самых нетерпеливых срузу даю ссылку на демо.
А для любопытных расскажу, как я всё это сделал.
Реквизит
Инструментарий всё тот же:
Детали
Всего ничего — один XHTML-файл, один PHP-файл, директория с изображениями.
Методы
Для нашей галереи используются всего два метода:
startGallery(dir)— регистрирует Ajax запросы и элементы для перезаписи (подробнее о работе с Ajax см. во второй части пособия по эфектам script.aculo.us), а так же выводит на экран первое изображение и строку ссылок на другие изображения. В качестве аргумента принимает имя директории с изображениями.show(dir, id)— выводит на экран изображение с номеромidиз директорииdir.
PHP-скрипт, к которому выполняются Ajax-запросы, читает содержимое директории, отбрасывая всё, что не является изображениями, формирует массив изображений и формирует XML-отклик.
Отдельно хочется сказать о строке ссылок на изображения. Она тоже формируется в результате Ajax-запроса, хотя можно было бы, сформировав её один раз, “подсвечивать” текущую ссылку на стороне клиента. Просто в этом примере я хотел показать XML-отклик с несколькими контейнерами response.
Интересно… Сейчас на досуге изучаю твои материалы. Мне вообще интересен ajax не как что-то програмисткое, а больше как явление
Возможно удасться реализовать некоторые мои идеи
А ты их озвучивай, а я буду стараться их реализовывать, или по крайней мере писать разные интересные пособия
Ааа тогда это будет уже не совсем моё “ноу-хау” : ))) Да и интересно просто возиться с этим
Excellent slideshow, just what I needed. thanks!
Привет! У меня назрел вопрос, можно изменить эффект появления фотки?? т.е. не Fade
Привет, Hitman!
В принципе, я думаю можно, но надо разбираться и тестировать. Я вообще собираюсь переписать Ajax Image Gallery без использования Rico, а так же добавить некоторые новые методы…
ОК! Буду ждать )
А как сделать preloader в виде гифки? есть такая фича?
Да, будет в новой версии. Сейчас пока собираю feedback & feature requests
ну а самому как сворганить, я написал в функции
function show(dir, id, img_title) {
new Effect.Fade(’preview’);
setTimeout(”ajaxEngine.sendRequest(’gallery’, ‘dir=” dir “‘, ‘id=” id “‘)”, 1000);
setTimeout(”new Effect.Appear(’preview’)”, 1500);
// типа прелоадер
while (Effect.Appear(’preview’))
{
document.write(’Loading…’);
}
// EoP типа прелоадер
}
типа как работает, ну как-то гламурно ))) Лоол.. подскажи а )
the images in the dir appear in no particular order. how can i make them appear in alphabetical order for example?
2krko
Sort it by name, in PHP file, before sending to AJAX
Thanks Hitman,
Any chance you or someone else can tell me how to do it? I’m not a php coder, all I know is how to follow instructions :).
Thank you in advance,
krko
krko,
add the following line to the gallery.php just before
$d->close();$images =sort($images);Hello Peter (I hope I got the name right, my Russian is not so good :),
I tried that, but it doesn’t work. It just displays number 1 at the bottom (out of 8 images) and no image appears.
Maybe I should do something else?
Thank you,
krko
did anyone see any problems with safari?? getting an undefinedundefinedundefined every time!!
big up
works fine for me on safari 2.0.4, os x 10.4.9.
krko
Hello,
I don’t mean to bug anyone, but I’d really appreciate any help on this issue. If this is not the right place to discuss it I’d be happy if you could contact me at gljubuncic [ at ] yahoo . com. Anyway, I still can’t get the sort thing to work.
Thank you,
krko
Hello all,
Could anyone help me with the “sort images” issue?
Adding $images = sort($images); to the gallery.php just before $d->close(); apparently doesn’t work.
Does anyone have any ideas? I’d really like to have the option to sort the images.
Thanks,
krko
krko, sorry for the delay, I was a bit busy.
I made a mistake whith the code for sorting images, sorry about it.
The correct line is:
sort($images);Thanks!
Works like charm!
krko
Ajax - это тема! Жаль вот только, что я не могу встроить ajax-xomments в wordpress. Ну не хочет работать и всё
Здравствуй, Пётр.
А можно ли сделать так, чтобы открывалось сразу несколько картинок, вместо одной?
Петр, а можно было бы перевести твою галлерею на более свежие версии библеотек? Я щас конечно попытаюсь разобраться почему твой скрипт нехочит у меня работать на свежих библеотеках ( неработает переключение между картинками) , но я только начал изучать джаваскрипты и все что с ними связано.К слову. очень хорошая галлерея. Без лишних наворотов.
Разобрался. Вообщем в новых библиотеках есть встроенная функция show() вот…. И все что нужно было зделать это сменить название функции show(dir,id) в скриптах автора. Кстате довольнотаки легко перепесать данный скрипты так чтобы они неиспользовали ajax.js ( даже с моим уровнем знания джава и пхп). Вот =)