-Рубрики


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

Пятница, 04 Января 2013 г. 14:19 + в цитатник

Под понятием превью (от англ. preview — предварительный просмотр, также thumbnail — англ.ноготок) чаще всего понимается уменьшенная копия изображения с прикреплённой к ней ссылкой, ведущей на страницу с изображением оригинального размера. Так же этот термин может употребляться и по отношению к другим материалам (видео, 3D-арт, звуковые файлы). 

 

Источник

 

Это несложно!
 
1. Загружаем фотографию на Яндекс.Фотки.
 
2. Переходим на страницу фотографии, справа от фото в меню "В другом размере" выбираем размер превью. Для Я.ру важно: размер превью по горизонтали должен быть менее 600px (иначе картинка полностью не уместится на страничке).
 
3. После загрузки фото в выбранном размере кликаем по строке "Код для вставки на сайт или в блог" и копируем куда-нибудь ссылку из нижнего окошка. Это будет первая ссылка.
 
4. Вновь переходим на страницу фотографии, в меню "В другом размере" выбираем "Оригинал". Фото в полном размере откроется в новом окне, ссылку на эту картинку копируем из адресной строки браузера. Это вторая ссылка.
 
5. На своей странице создаём новый пост и в HTML-режиме пишем следующий код: 
<a href="вторая ссылка"><img   src="первая ссылка"></a>
 
Теперь при клике по маленькой картинке в вашем посте в этом же окне будет загружаться большая картинка.
 
Чтобы большая картинка загружалась в новом окне, код должен быть таким:
<a href="вторая ссылка" target="_blank"><img   src="первая ссылка"></a>
 

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

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

Сделать превью можно следующими способами:

1)  Использовать сайт http://www.radikal.ru/

Загружаем картинку и из списка появившихся кодов выбираем: "7. HTML: превью - увеличение по клику", и вставляем этот код в сообщение.
 
Но фотки, загруженные на Радикал, часто пропадают... (((

2) Другой способ, с использованием родного ЛиРу

Нажимаем "Добавить фото".

На открывшейся странице, вверху есть строчка Я хочу закачать больше чем одну, но не более 5 (10,20 - на выбор)  фотографий. Жмем ОК.

Добавляем фотографии.

Рядом с кнопкой Опубликовать, есть строчка Опубликовать превью фотографий в дневнике - ставим галочкуЖмем Опубликовать. 
 
Все, превью уже появились отдельным постом в сообществе.
 

 

 

Как сделать превью.

Многие жалуются на непостоянство функционирования лжплюса, в основном, из-за недоступности картинок. А некоторые просто не знают, как сделать превью. Вот подробное описание того, как это делаю я:

Независимо от того, где Вы будете размещать картинки, Вы можете сделать превью следующим образом:


1) создать маленькую копию картинки, которую размещаете, у себя на компьтере, в фотошопе, или другой программе, которую используете, можно также выбрать фрагмент из картинки, а не всю ужимать. Итак, превьюшка готова.


2) загружаете обе картинки на портал (в жж, или любом другом), выясняете полный адрес картинок. Например, адрес картинки: http://pics.livejournal.com/copa_de_cafe/pic/00006h8e/s640x480
адрес превью: http://www.livejournal.com/userpic/56047839/11741506


3) В посте делаете ссылку вручную следующим образом:
<a href="адрес картинки"><img src="адрес превью"></a>


Пример:


<a href="http://pics.livejournal.com/copa_de_cafe/pic/00006h8e/s640x480"><img src="http://www.livejournal.com/userpic/56047839/11741506"></a>


Получите:


 

Рубрики:  § Всё для блога/ЛиРу
§ Фото
Метки:  

Процитировано 29 раз
Понравилось: 7 пользователям

UniqueAlenka   обратиться по имени Суббота, 05 Января 2013 г. 00:28 (ссылка)
Возьму, потом как-нибудь попробую...
Ответить С цитатой В цитатник
Перейти к дневнику

Суббота, 05 Января 2013 г. 00:34ссылка
Ага... Мне понравилось...
Maksimych   обратиться по имени Воскресенье, 26 Марта 2017 г. 08:12 (ссылка)
Благодарю!
Ответить С цитатой В цитатник
tane4ka777   обратиться по имени Воскресенье, 26 Марта 2017 г. 21:19 (ссылка)
Спасибо!
Ответить С цитатой В цитатник
Комментировать К дневнику Страницы: [1] [Новые]
 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку