lorem | ipsum | dolor |
---|---|---|
sit | amet | 4 |
1 | 2 | 3 |
7 | 6 | 5 |
- lorem
- ipsum
- dolor
- sit
- amet
Пример картинки с увеличением при клике по ней
1. Добавить на эту страницу фотографию, нужного размера (советую не более 1000 px по ширине)
пример: фото remont-skolow.jpg 640 на 361
2. Тебе необходимо уменьшить эту фотку до нужного размера. Это ты можешь сделать так: кликни по фотке, нажми левую кнопку мышки на один из углов фотки и не отпуская, кнопку мышки, двигай, пока не получишь нужный размер. Либо 2ой вариант: правой кнопкой по картинке свойства изображения: задаешь нужный размер.
Я задал 200 px по ширине. Высота подставляется автоматически, пропорционально.
3. Теперь необходимо сделать эту картинку ссылкой для увеличения на экран.
Для этого:
- Кликаем по фотке, Идем в "свойства изображения" и копируем путь до фотки (Скрин: https://yadi.sk/i/ZyNDs0Pq3KZ7CJ )
- Затем этот путь сразу вставляем в ссылку: https://yadi.sk/i/Q8wJGwQZ3KZ7z9
- В редакторе кликаем по кнопке Источник https://yadi.sk/i/SN-dK1C03KZ8JX
- Находим нашу фотку (проще по названию искать)
Видим такой код:
<a href="/files/image/remont-skolow.jpg"><img src="/files/image/remont-skolow.jpg" alt="Ремонт сколов" width="200" height="113" /></a>
Добавляем вот это:
rel="lightbox[]" data-fancybox="gallery"
Вот сюда:
<a href="/files/image/remont-skolow.jpg" rel="lightbox[]" data-fancybox="gallery"><img src="/files/image/remont-skolow.jpg" alt="Ремонт сколов" width="200" height="113" /></a>
не забывай поставить пробел перед этим кодом. - Сохраняешь - проверяешь