-Приложения

  • Перейти к приложению Открытки ОткрыткиПерерожденный каталог открыток на все случаи жизни
  • Перейти к приложению Онлайн-игра "Empire" Онлайн-игра "Empire"Преврати свой маленький замок в могущественную крепость и стань правителем величайшего королевства в игре Goodgame Empire. Строй свою собственную империю, расширяй ее и защищай от других игроков. Б
  • Перейти к приложению Онлайн-игра "Большая ферма" Онлайн-игра "Большая ферма"Дядя Джордж оставил тебе свою ферму, но, к сожалению, она не в очень хорошем состоянии. Но благодаря твоей деловой хватке и помощи соседей, друзей и родных ты в состоянии превратить захиревшее хозяйст
  • Перейти к приложению Всегда под рукой Всегда под рукойаналогов нет ^_^ Позволяет вставить в профиль панель с произвольным Html-кодом. Можно разместить там банеры, счетчики и прочее
  • Перейти к приложению Я - фотограф Я - фотографПлагин для публикации фотографий в дневнике пользователя. Минимальные системные требования: Internet Explorer 6, Fire Fox 1.5, Opera 9.5, Safari 3.1.1 со включенным JavaScript. Возможно это будет рабо

 -Всегда под рукой

 -Рубрики

 -Поиск по дневнику

Поиск сообщений в UniqueAlenka

 -Подписка по e-mail

 

 -Интересы

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 07.05.2011
Записей:
Комментариев:
Написано: 22814


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

Суббота, 05 Января 2013 г. 00:28 + в цитатник
Цитата сообщения Гаша-Макар Как сделать картинку, раскрывающуюся по клику на полный размер.

Под понятием превью (от англ. 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>


Получите:


 

Серия сообщений "Фото":
Часть 1 - Пишем красиво на изображении
Часть 2 - Наслаждаться красотой осени.
...
Часть 11 - Как защитить фото от копирования.
Часть 12 - Как сделать красивое фото своего блюда или не надо капать слюной на клавиатуру!
Часть 13 - Как сделать картинку, раскрывающуюся по клику на полный размер.
Часть 14 - Пакетная загрузка изображений.
Часть 15 - Яндекс-фотки. Вставляем фотографии в пост.
...
Часть 19 - Фотоальбомы, пошаговая инструкция
Часть 20 - Вставляем изображения в запись. Превью.
Часть 21 - Урок "Пакетная загрузка картинок на ЛиРу".

Серия сообщений "Уроки Лиру":
Часть 1 - Шпаргалка кодов
Часть 2 - Всё, что вы хотели знать о ЛиРу, но... (Самый полный FAQ по ЛиРу)
...
Часть 5 - "лайки" из почты не работают...
Часть 6 - Большой каталог полезных сайтов
Часть 7 - Как сделать картинку, раскрывающуюся по клику на полный размер
Часть 8 - 20/20 V.2.2 Программа для создания бесшовных фонов.
Часть 9 - Как создать граватар
...
Часть 19 - Используем TOR для любого браузера или программы
Часть 20 - Устанавливаем и используем TOR
Часть 21 - Как поставить печатные (угловые) кавычки

Рубрики:  оформление блога/Картинки
Метки:  
Понравилось: 1 пользователю

 

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

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

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

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