Задался вопросом улучшить дизайн выводимых картинок. Чтобы и рамка, и тени были, и описание картинки.. Ну, современные браузеры без проблем выводят тени, рамки и древние выводят.  И вставка картинки должна быть простой, без всяких DIV-ов... Но с описанием посложнее..

Для описания прийдется вставлять DIV, в котором внутри будет Параграф.

Первое затруднение - очень тяжело вывести блок по центру, не зная размера  блока. Ответ был найден - поместить в таблицу. Таблица по умолчанию принимает минимальный размер, и с изображением внутри оказывается равной изображению. Но таблицы - прошлый век, используем display:table.

Вот и второе затруднение - Всеми "любимый" IE 6-7 версии не понимают display:table. C восьмым вообще непонятка, вроде понимать должен, но если созданный файл открыть на компьютере, все отлично, а если на сервере, игнорирует display:table.

Ну и для описания требуется заворачивать в DIV. внутри которого будет картинка и описание картинки.

 Прийдется писать примерно вот такую конструкцию:

<div class="img-box center">
	<img src="3.jpg" title="image center" >
	<p>image center</p>
</div>

А если наполнением сайта занимается человек, не сведущий  в HTML?

Картинку будем вставлять просто:

<img  class="img-box left" title="image left" src="1.jpg" >

Для вставки кода не обязательно знаний HTML, в редакторе TinyMCE (и подобных) при вставке картинки, есть поле Заголовок (title), заполняем, переключаемся на вкладку  "Положение" (Appearance), Выбираем из списка "значение", вписываем нужный класс, следующий раз класс будет доступен в списке.

Остановимся подробнее на классах.

Для вывода изображения в рамке, с тенями и описанием, используется класс img-box, для уточнения вывода дописываем left, right или center

img-box left - картинка выводится слева

img-box right - картинка выводится справа

img-box center - картинка выводится по центру

img-box  - картинка выводится как обычная картинка, но со стилями.

нет стиля - ничего не меняется

Напишем скрипт, который нам поможет вставлять DIVи описание. (img-box.js)

Скрипт находит класс img-box, проверяет,  какой браузер, для IE заворачиваем в таблицу, для остальных заворачиваем в DIV, выдираем класс с картинки и вставляем в DIV (таблицу). в картинке класс удаляем. создаем параграф с описанием, взятым с title.

И  у нас получится такой вот текст:

<div class="img-box center">
	<img src="3.jpg" title="image center" class="">
	<p>image center</p>
</div>

Посмотреть демо

скачать