вторник, 9 февраля 2016 г.

HTML. Как сделать превью картинок

В статье приведены кусочки кода. Полную версию можно взять тут — https://bitbucket.org/okiseleva/html-and-css-learn/src. Папки:
  • add_image_in_html
  • images
  • html_for_images
Сегодня наша задача — научиться делать так, чтобы на основной странице сайта была маленькая картиночка, превью. Так страница грузится быстрее. А когда ты кликаешь на картинку — она открывается в полном размере в новом окне.

На основной странице картинка маленькая...

Но щелкнешь на маленькую и увидишь... большую!

Для этого нужно:
  1. В папку с картинками положить оригинальный размер и маленькую копию.
  2. Создать отдельный HTML с большой картинкой.
  3. На основной странице в <img>  вставляем маленькую картинку.
  4. Делаем эту картинку гиперссылкой на большой вариант.
А теперь подробнее.

1. Создать два варианта картинки

Одна — большая, вторая — маленькая. Не стоит складировать все в одном месте, иначе потом не найдете. Мое разделение по папкам:

  • images — картинки с сайта
  • small — уменьшенный вариант

2. Создать отдельный HTML с большой картинкой.

В коде он лежит в отдельной папке html_for_images. Фактически мы создаем пустой html-файл, где указываем title, а в тело добавляем большую картинку

<img src="../images/000000.png" alt="big size">

См также:
Как добавить картинку — подробнее о том, что написано выше


3. В основной код вставить ссылку на мелкую картинку

В коде картинка лежит в отдельной папке images/small. 


<img src="../images/small/000000.png">

4. Сделать мелкую картинку гиперссылкой на большую

Чтобы создать изображение-ссылку, нужно поместить элемент <img> внутрь элемента <a>, в котором даем ссылку на html с большой картинкой.

Чтобы ссылка открывалась в новой вкладке, добавляем атрибут target="_blank"

<a href="../html_for_images/000000.html" target="_blank">
     <img src="../images/small/000000.png">
</a>

PS — подробнее можно почитать на странице 225 в книге «Изучаем HTML, XHTML и CSS» Эрика и Элизабет Фримен.

PPS — добавила статью в полный список моих конспектов лекций по HTML & CSS

Комментариев нет:

Отправить комментарий