Код превью аоз

[EgoZhu]

Ведь пригодится, спасибо анончику с инсайда
Пишет Гость:

06.02.2021 в 16:52

Был бы ты добрым и хорошим - выложил бы под катом код для превью, мне не переломится переоформить.

да не вопрос) в дискорде кидали шаблон, я его под себя чуть поменял.

в скин:

#workskin .preview {
  width: 100%;
  max-width: 620px;
  display: inline-block;
}

#workskin .preview a {
  border-bottom: none;
}

#workskin img.zoom:hover {
  transform: scale(2);
}

#workskin img.zoom {
  width: 25%;
  max-width: 100px;
  transition: all 150ms ease-in-out;
}

в саму работу:

<div class="preview">

<p>По умолчанию все ссылки открываются в текущем окне.<br />
<br />
<span><a href="ССЫЛКА_НА_РАБОТУ1" rel="nofollow"><img class="zoom" src="ПРЕВЬЮ_РАБОТЫ1" /></a></span> <span><a href="ССЫЛКА_НА_РАБОТУ2" rel="nofollow"><img class="zoom" src="ПРЕВЬЮ_РАБОТЫ2" /></a></span>  <span><a href="ССЫЛКА_НА_РАБОТУ3" rel="nofollow"><img class="zoom" src="ПРЕВЬЮ_РАБОТЫ3" /></a></span> <span><a href="ССЫЛКА_НА_РАБОТУ4" rel="nofollow"><img class="zoom" src="ПРЕВЬЮ_РАБОТЫ4" /></a></span> <span><a href="ССЫЛКА_НА_РАБОТУ5" rel="nofollow"><img class="zoom" src="ПРЕВЬЮ_РАБОТЫ5" /></a></span> <span><a href="ССЫЛКА_НА_РАБОТУ6" rel="nofollow"><img class="zoom" src="ПРЕВЬЮ_РАБОТЫ6" /></a></span> <span></span><a href="" rel="nofollow"></a></p></div>

пустые спаны и пустая ссылка в конце нужны для того, чтобы АО3 ничего в коде не съел.
сами превью делаешь 200х200px (или любого другого размера), в посте они отображаются как 100х100px (но это тоже можно поменять), а по наведении мыши увеличиваются в 2 раза, т.е. до полноразмера. если хочешь меньше/больше, пропиши в scale в скобочках не 2, а другое число - оно указывает, во сколько раз увеличится картинка по наведнии.

URL комментария

@темы: фб, зфб