ПРАВИЛА ФОРУМА | FAQ

Здравствуйте, гость ( Авторизация | Регистрация )


 
Reply to this topicStart new topic
> Инструкция как делать превью с увеличением по клику., Всем ненавистникам спойлеров посвящается.
Roo
сообщение 21st Feb 14 - 17:16
Сообщение #1


Nobody's home

Группа: Media Avril.Ru
Сообщений: 2676
Регистрация: 15-Mar 09
Сообщения понравились: 158 раз


Награды:
Самый Большой Фан Аврил 2011



Доброго времени суток форумчане!

Сегодня, я бы хотел поделится с вами тайнами вселенной информацией, как делать кликабельные превьюшки* с увеличением по клику, на примере таких хостингов как imgur.com и vk.com.

*под превьюшками понимается картинка, не превышающая 300 пикселей, с бОльшей стороны.

зы. хотелось бы отметить, что для ленивых лентяев на большинстве хостингов картинок есть функция - bbcode для форума превью увилечение по клику. Делает абсолютно тоже самое что мы будем делать вручную, только по клику у нас будет картинка, а не страница с рекламой.

Итак, начнем.
____________________________________________________
* imgur.com

По-моему, на сегодняшний день, это самый удобный сервис для хранения картинок. Если у вас нет аккаунта - не беда: вы можете заливать без пересжатий файлы, размером до 1 МБ. Для файлов больше 1 МБ файл будет пересохранен в JPEG с потерей качества. Бесплатный аккаунт позволяет заливать картинки до 5 МБ без пересжатия, а pro-аккаунт до 10 МБ.

1] Заливаем картинку просто перетаскивая её на сайт, и получаем ссылки. Нам нужна прямая (direct link), которая заканчивается на .jpg или другой формат, зависит от того что вы заливаете.



2] Дабы прикрепить её к своему сообщению на форуме вы тыкаете на иконку вследствие чего выйдет диалоговое окно куда вы должны вставить вашу ссылку и жмакаете окей.
Таким образом в вашем форумном сообщении появится выделенная ссылка, вот пока она выделена вы нажимаете на кнопку и снова вставляете туда свою ссылку.

Для чего это? Кнопка отвечает за то чтобы картинка была картинкой, а не ссылкой. Кнопка отвечает за то чтобы делать из всего что выделено - гиперссылку.

3] Ну и, собственно, последний шаг. У вас должен получится подобный код:
Код
[url="http://i.imgur.com/UxuyOlU.jpg"][img]http://i.imgur.com/UxuyOlU.jpg[/img][/url]


все что вам нужно - вставить ключ размера картинки. Самые ходовые, о которых вам нужно знать это t (маленькая) и m (средняя). Его нужно вставить туда где я поставил звездочку в коде.
Код
[url="http://i.imgur.com/UxuyOlU.jpg"][img]http://i.imgur.com/UxuyOlU*.jpg[/img][/url]


в итоге наша картинка с увеличением по клику.

с ключем t


с ключем m


____________________________________________________
* vk.com

Почему я выбрал vk для гайда? Потому что, не секрет что многие заливают туда свои личные фотографии, и мне известно насколько пользователям темы "фото пользователей форума" противны спойлеры pokerface.gif
Поэтому.

Принцип, абсолютно такой же, только теперь мы копируем 2 картинки, зато никакой головной боли с ключами для размера!

1] Заливаем картинку во вконтактик. Слева появится маленькая картинка, жмакаем по ней правой кнопкой, пункт "Копировать URL картинки"



открываем форум, в форме быстрого ответа жмакаем на и вставляем во всплывашку нашу ссылку.

2] Возвращемся к вкладке с вк и клацаем на саму картинку, чтобы она открылась во весь размер. После чего жмакаем по ней правой кнопкой и опять же выбираем пункт "Копировать URL картинки", все, больше нам от вк ничего не надо, переходим во вкладку с форумом "затемняем" нашу ссылку (которая в кавадратных , вставляем во всплывашку что мы скопировали с вк.

Собственно все.

В итоге должен получится код вида
Код
[url="http://cs608230.vk.me/v608230133/2c4e/T8g-MtlkA6o.jpg"][img]http://cs608230.vk.me/v608230133/2c4b/Zz6CNCl28ZA.jpg[/img][/url]


а на деле выглядит


Это сообщение понравилось:
Go to the top of the page
Вставить ник
+Quote Post

Reply to this topicStart new topic
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0

 



Текстовая версия Сейчас: 21st Jul 18 - 14:57

  Рейтинг@Mail.ru  

iMoan.ru - онлайн-магазин товаров для взрослых AirBee Magic Kegel Master Женские советы
© Avril Ru Team, 2002-2015. Для лиц старше 16 лет. Разработано: Web solution - создание сайтов и реклама в сети.