Веб дизайн : Красивый вывод картинок с помощью jQuery
Написал MACTEP в 16.07.2013 13:30:00 ( 6837 прочтений )

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

 

 

 

img-box

 

 

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

 

скачать


Теги: jQuery  
Предыдущая новость Следующая новость
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити

Кто активен

7 пользователь(ей) активно (1 пользователь(ей) просматривают Web)

Участников: 0
Гостей: 7

далее...

Рекомендуем