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

Посмотреть демо скачать
|