Сделать картинку превью

Вторник, 12 Июня 2012 г. 14:53 + в цитатник

Как сделать превью картинки в html: превью - увеличение по клику

Как сделать превью по клику в html - вставляем картинку, прописываем путь, задаем размер, код:

где 606 и 288 ширина и соответственно высота картинки и получиться

примерно так:

при нажатии на картинку она откроется сначала в другом окне, если нажать еще раз, откроется в полный размер.

Итак, превью. Что это такое и как это сделать.
Превью - это небольшая картинка, нажав на которую открывается картинка oригинального размера.

Превью нужно, если:
- размер картинки больше 600-700 пикселей в ширину (размеры могут несколько варьироваться, это для примера)
- вес картинки больше 200кб
- публикуется несколько картинок

Сделать превью можно следующими способами:
1) Использовать сайт http://www.radikal.ru/.
Загружаем картинку и из списка появившихся кодов выбираем: "7. HTML: превью - увеличение по клику", и вставляем этот код в сообщение.

2) Другой способ, с использованием родного ЛиРу
Нажимаем "Добавить фото".
На открывшейся странице, вверху есть строчка Я хочу закачать больше чем одну, но не более 5 (10,20 - на выбор) фотографий. Жмем ОК.
Добавляем фотографии,
Рядом с кнопкой Опубликовать, есть строчка Опубликовать превью фотографий в дневнике - ставим галочку. Жмем Опубликовать. Все, превью уже появились отдельным постом в сообществе.

ТЕГ ПРЕВЬЮ ИМЕЕТ ТАКУЮ СТРУКТУРУ:

<a href="адрес большого фото"><img srс="адрес маленькой картинки-превью" border="0"></a>

Например, тег этого изображения имеет следующий вид:

<a hrеf="http://foto.mail.ru/mail/deep_yellow/1090/i-1095.jpg"><img srс="http://content.foto.mail.ru/mail/deep_yellow/1090/p-1095.jpg" border="0"></a>

СИСТЕМА АДРЕСОВ В ФОТОАЛЬБОМАХ:

если страница, где находится фото, имеет адрес
http://foto.mail.ru/mail/deep_yellow/219/1941.html,
то адрес фото будет http://content.foto.mail.ru/mail/deep_yellow/219/i-1941.jpg,,
адрес превью — http://content.foto.mail.ru/mail/deep_yellow/219/p-1941.jpg,,
если была загружена большая фотография с сохранением исходного размера,
то её адрес будет http://content.foto.mail.ru/mail/deep_yellow/219/s-1941.jpg,.

Чтобы поставить несколько превью в ряд, нужно между тегами <a hrеf="http://content.foto.mail.ru/mail/deep_yellow/219/i-1685.jpg"><img srс="http://content.foto.mail.ru/mail/deep_yellow/219/p-1685.jpg" border="0"></a> поставить неразрывные пробелы.

Образец вставки превью в ряд через 2 неразрывных пробела: