вСкрипты

Красивый вывод картинок с помощью jQuery

Красивый вывод картинок с помощью jQuery

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

 

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

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

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

 

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

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

 

 

 

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

 

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

 

 

Для вставки кода не обязательно знаний 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.

 

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

 

 

 

 

http://www.BFoto.ru
http://www.BFoto.ru

 

 

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

 

[wpfilebase tag=’attachments’]

Пожалуйста, оцените материал

Внимание! Если Вы обнаружили ошибки или нерабочие ссылки в тексте, пожалуйста, сообщите мне.

Похожие посты

Автор:

Веб-разработчик. Работа с проектами простой и средней сложности. Верстка, программирование. Simpla, Drupal, Wordpress.

Оставить комментарий

Ваш e-mail не будет опубликован.