Как построить картинную галерею без единого гвоздя?

Опубликовано Cyrill 15.01.2008

Допустим, вы - крутой фотограф. Или крутой художник. Или, в конце-концов, купили по дешевке хорошую зеркальную камеру с большим объективом ™ и хотите выложить свои фотографии в интернет на обозрение публики. Тут два варианта: либо у вас уже есть правильный хостинг, либо его у вас еще нет =) Если нет - ваш путь лежит на всякие разные фотосайты, fotki, flickr и прочие picasa. если говорить про чужой хостинг, мне лично нравится fishup, правда там есть ряд ограничений в бесплатном аккаунте.

Если у вас есть хостинг, можно попробовать разместить собственную галерею: тут от выбора начинают разбегаться глаза, поскольку вариантов технической реализации -уйма. Тут и масса phpMy*-style галерей, надстроек к различным форумным движкам, наконец - галерей, построенных при помощи Flash. PHP, как средство построения, хорош всем, за исключением необходимости поддержки его на хостинге (что, правда, уже весьма распространено) и, галереи, построенные на PHP как правило требуют наличия базы MySQL, что немного сложнее. С другой стороны, flash-галереи можно кидать где угодно, но требуется знание ActionScript. Кроме того, не всегда возможно отредактировать исходник - например, если автор не распространяет *.fla файл в составе галереи.

Выход из ситуации - CSS/DHTML/Javascript - эта связка не требует серверной поддержки, и, на мой взгляд, значительно более изящна чем все вышеперечисленные. Огромный плюс всех перечисленных решений - они все значительно красивее галерей, которые предлагает, например, narod.ru. Поэтому, имея фотографии на народ.ру, достаточно использовать любой из перечисленных ниже скриптов, чтобы заиметь действительно красивую фотогалерею. Проблема у такого подхода всего одна: совсем старые браузеры могут некорректно отображать или вовсе не отображать вашу галерею. Но таких браузеров, к счастью, уже не так много =

Впрочем, к делу: вашему вниманию обзор ряда фотогалерей и сопутствующих решений, построенных на CSS/DHTML/Javascript. Да, чуть не забыл: превьюшки для галерей, скорее всего, придется генерить самостоятельно :-)

1. Lightbox 2
Ненавязчивый скриптик, позволяющий отображать картинки поверх открытой страницы. Поддерживает серии изображений и крайне прост в использовании. Простота, помимо всего, открывает широкие горизонты для доработчиков напильником, позволяя интегрировать скрипт в более сложные проекты.
Lightbox 2

2. Imago
Скрипт галереи, построенный на mootools. Умеет показывать картинки как из папки на сервере, так и с Flickr. Как утверждает автор, его миссия - сделать простую в использовании, но достаточно хорошо настраиваемую галерею.
Imago

3. Adobe Spry Photo Gallery
С удивлением для себя обнаружил очередной AJAX-фреймворк - Adobe Spry. Подозреваю, что он - тема для отдельного обзора, но сейчас имею предложить вниманию читателя фотогалерею, построенную с помощью этого фреймворка. Судя по всему, это не самый простой путь, но возможности открывает достаточно широкие. Взгляните сами:
Spry photo gallery

Под катом - еще пять вариантов фотогалереи без применения PHP или любого другого серверного языка =)

Читать полностью »

Красивые таблицы с применением DHTML/Javascript/AJAX

Опубликовано Cyrill 14.01.2008

Таблицы — пример отличной информационной структуры, представляющей данные в наглядном виде. При использовании по назначению — для организации данных, а не для верстки, таблицы — наиболее компактный и в то же время удобный инструмент, что, в принципе, и требуется. =)

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

1. Tablesorter
Плагин для JQuery, позволяющий легко добавить сортировку (по нескольким столбцам!) к таблицам. Достаточно легкий, поддерживает пакеты стилей (скины), имеет интерфейс для написания и подключения виджетов, одним из которых является поставляемая в комплекте зебра. Имеется автоматическое определение типа данных в столбце - впрочем, не всегда корректно работающее — мне пришлось писать собственный сортировщик для дат в формате дд-мм-гггг, что, впрочем, нисколько не умаляет достоинств этого скриптика.
A favorite of mine =)
Tablesorter screenshot example

2. ExtJs Grid
Поддержка схлопывающихся строк, вписывания в площадь, выбора строк стандартными чекбоксами и горизонтальной прокрутки. Можно навешивать свои панели инструментов.
ExtJs Grid

3. dhtmlxGrid
Постраничное разбиение больших таблиц, отбор данных, итоговые поля, поддержка drag’n'drop, сериализация и импорт данных в/из xml и csv, поддержка скинов либо пользовательских css.
dhtmlxGrid screenshot

4. Phatfusion sortable
Сортировка таблиц с возможностью отбора данных. Требует наличия mootools > 1.11
Phatfusion sortable
Под катом — еще деcять разновидностей воплощения динамической таблицы с применением DHTML/Javascript/AJAX. А местами —даже Ruby On Rails Читать полностью »


Copyright © 2007 Cyrill. All rights reserved.