Урок №14. Галереи изображений.

Конечно, зачем нагромождать сайт плагинами и всякими JS?

Если вы хорошо разбираетесь в CSS то в принципе это для вас не проблема.

Но! Если вы такой же пользователь как  я..... то нам с вами по-пути!

Я потратила около недели, чтобы понять что я хочу получить и что мне для этого надо сделать.

Итак: 

Для начала разберемся что нам нужно знать о картинках:

1. Положение картинки:

align="ПАРАМЕТР"- определяет выравнивание рисунка по левому краю. Это значение так же влияет на то, как текст будет обтекать рисунок. 

ПАРАМЕТР:

• left - выравнивание по левому краю
• middle - выравнивание середины изображения по базовой линии текущей строки
• bottom - выравнивание нижней границы изображения по окружающему тексту
• top - верхняя граница изображения выравнивается по самому высокому элементу текущей строки
• right - выравнивание по правому краю

ПРИМЕР: выравнивание изображения по левому краю

<img align="left" src="http://img.jpg"> 

2.Описание картинки:

 alt="Описание картинки" - подсказка или просто название картинки. 

Этот атрибут выполняет сразу две важные функции:

выдает подсказку при наведении и если в браузере отключены изображения, то выводится этот текст. Он очень важен при ранжировании изображений в Яндекс Картинках и Google Картинках. Его следует прописывать к каждому изображению, поскольку это является одним из факторов ранжирования в поисковых системах.

title="Описание картинки" - назначение его такое же, как и атрибут alt, но с той разницей, что данное описание будет показываться пользователю сайта при наведении на картинку курсором. Он не участвует в продвижении сайта, но он позволяет увеличивать поведенческий фактор, который также влияет на позицию сайта в поисковой системе. Поэтому оптимизация изображений играет тоже большую роль при продвижении сайта в поисковых системах.

ПРИМЕР:

1.  <img src="http://img.jpg"  width="300" height="200" alt="ОПИСАНИЕ КАРТИНКИ">

2.<img src="http://img.jpg" width="300" height="200" title="ТАК ЖЕ ОПИСАНИЕ КАРТИНКИ">

3. Рамка вокруг изображения.

border="ЧИСЛО" - создает рамку и определяет ее толщину. Измеряется в пикселях.

ПРИМЕР: 
<img border="5" src="img.jpg"> 

4. Цвет рамки изображения.
bordercolor="цвет" - задает цвет рамки, которая обтекает изображение. Имеет смысл, только если атрибут border > 0 ( r к примеру: border="10").

ПРИМЕР:
<img border="5" bordercolor="#CCC" src="http://img.jpg">

Ну и конечно, CSS

border: 2px solid #55c5e9; /* Рамка и ее цвет */ padding: 15px; /* Расстояние от картинки до рамки */ background: #FFF; /* Цвет фона */ margin-right: 10px; /* Отступ справа */ margin-bottom: 10px; /* Отступ снизу */

vertical-align: middle; /* разместить изображение по-середине строки */

    margin-bottom: 10px; /* Отступ снизу */

border-collapse: collapse; / *убираем пустые промежутки между ячейками */

line-height: normal; font-size: 0;

 margin-bottom: 10px; /* Отступ снизу */

У меня вот что получилось, когда применила для трех картинок без пробелов:

border: 0px solid #fff;/* Рамка вокруг фотографии белая и ее нет */
border-collapse: collapse;
line-height: normal; font-size: 0;
Естественно это нужно прописывать в стилях.

ГАЛЕРЕЯ И КАРТИНКИ

У нас ламеров, к коим я себя приравняла,  есть несколько путей решения  задачи с вызовом картинок:

№1. Самый простой способ увеличения картинки.

Стандартное решение всплывающего окна при наведении на картинку выглядит так:

<a rel="nofollow" target="_blank" href="адрес-изображения-1"> <img width="ширина" height="высота" src="адрес-изображения-2"/></a>

Где

• rel="nofollow" - добавляется для того, чтобы ссылка не передавала вес изображению;
• target="_blank" - для того чтобы изображение открывалось в новой вкладке.

ПЛЮСЫ:

1. Не нужно копаться в настройках,
2.  Не надо писать Классы и CSS, 
3. Подходит для больших изображений
4. Открывает новое окно с иходным размером

МИНУСЫ:

1. У человека открывается новая вкладка - это не всегда удобно.

№2. Смена картинки при наведении курсора мышки html

Для этого нам потребуется 2 рисунка или кнопки в данным примере у меня будет две кнопки: 

<img src="http://img.jpg-1" width="100" height="100" onmouseover="this.src='http://img.jpg-1'; this.width=100;this.height=100;" onmouseout="this.src='http://img.jpg-2'; this.width=100;this.height=100;" />

№3. Смена картинки CSS

Для этого нам потребуется 2 рисунка или кнопки.

1.Стандартное решение всплывающего окна при наведении на картинку выглядит так:

<style type="text/css"> 

.izo { background: url(http://изо1.jpg) no-repeat 50% 50%; display: block; width: 400px; height: 400px; 

} 

.izo:hover { background: url(http://изо2.jpg) no-repeat 50% 50%;

}

 </style>

 <a href="#" class="izo"></a>

На будущее, рекомендую использовать именно такой метод, так как пользуясь средствами JS Вы рискуете попасть на пользователя, у которого он отключен в настройках браузера, в результате чего человек может не увидеть каких-либо деталей или не понять смысла задумки.