Юля123 (14 Апрель 2016 - 11:01) писал:
Для ее установки в конце style.css (либо main.css) добавляете код:
#gallery { position: relative; padding-top: 50%; -moz-user-select: none; user-select: none; } #gallery img { position: absolute; top: 25%; left: 12.5%; max-width: 24.5%; max-height: 49.5%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); cursor: zoom-in; transition: .2s; } #gallery img:nth-child(4n-2) {left: 37.5%;} #gallery img:nth-child(4n-1) {left: 62.5%;} #gallery img:nth-child(4n) {left: 87.5%;} #gallery img:nth-child(n+5) {top: 75%;} #gallery img:focus { position: absolute; top: 50%; left: 50%; z-index: 1; max-width: 100%; max-height: 100%; outline: none; pointer-events: none; } #gallery img:focus ~ div { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #fff; cursor: zoom-out; }
дальше переходим на вкладку "Сайт" - "Страницы", создаем страницу, например " Галерея изображений" в описании нажимаем на кнопку "источник" и уже в источнике добавляем код:
<div id="gallery"> <img src="ссылка на изображение" alt="" tabindex="0" /> <img src="ссылка на изображение" alt="" tabindex="0" /> <img src="ссылка на изображение" alt="" tabindex="0" /> <img src="ссылка на изображение" alt="" tabindex="0" /> <img src="ссылка на изображение" alt="" tabindex="0" /> <img src="ссылка на изображение" alt="" tabindex="0" /> <img src="ссылка на изображение" alt="" tabindex="0" /> <img src="ссылка на изображение" alt="" tabindex="0" /> <div></div> </div>
"ссылка на изображение" заменяете на ссылку. Важно! ссылку нужно добавлять не через переменную (в редакторе страниц они не работают) а третий вариант ссылки, который выдается в редакторе шаблонов при клике на кнопку-цепочку, для получения ссылки на изображение.
QIP Shot - Screen 267.png
Второй вариант галереи по той же ссылке. В main.css добавляйте код:
#gallery1 { position: relative; padding-top: 50%; -moz-user-select: none; user-select: none; } #gallery1 img { position: absolute; top: 25%; left: 12.5%; max-width: 24.5%; max-height: 49.5%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -moz-user-select: none; user-select: none; cursor: zoom-in; } #gallery1 img:nth-child(4n-2) {left: 37.5%;} #gallery1 img:nth-child(4n-1) {left: 62.5%;} #gallery1 img:nth-child(4n) {left: 87.5%;} #gallery1 img:nth-child(n+5) {top: 75%;} #gallery1 img:focus { position: fixed; top: 50%; left: 50%; z-index: 31; max-width: 100%; max-height: 100%; outline: none; pointer-events: none; } #gallery1 img:focus ~ div { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 30; background: rgba(240,240,240,.9); cursor: zoom-out; }
а в редакторе страниц добавляйте код:
<div id="gallery1"> <img src="ссылка на изображение" alt="" tabindex="0" /> <img src="ссылка на изображение" alt="" tabindex="0" /> <img src="ссылка на изображение" alt="" tabindex="0" /> <img src="ссылка на изображение" alt="" tabindex="0" /> <img src="ссылка на изображение" alt="" tabindex="0" /> <img src="ссылка на изображение" alt="" tabindex="0" /> <img src="ссылка на изображение" alt="" tabindex="0" /> <img src="ссылка на изображение" alt="" tabindex="0" /> <div></div> </div>
"ссылка на изображение" заменяете на ссылку.