Эффект лайтбокса в HTML

Реализация поддержки omnibox с предложениями по поиску

Ответ, данный @ element119, отлично работает, но вот слегка измененный код для поддержки предложений поиска, а также поддержки Mozilla.

Следуйте ниже, чтобы реализовать поддержку omni box для вашего сайта.

  1. Сохраните следующий код в качестве search.xml
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/">
  <script/>
  <ShortName>Site Name</ShortName>
  <Description>Site Description (eg: Search sitename)</Description>
  <InputEncoding>UTF-8</InputEncoding>
  <Image width="16" height="16" type="image/x-icon">Favicon url</Image>
  <Url type="application/x-suggestions+json" method="GET" template="http://suggestqueries.google.com/complete/search?output=firefox&amp;q={searchTerms}" />
  <Url type="text/html" method="GET" template="http://yoursite.com/?s={searchTerms}" />
  <SearchForm>http://yoursite.com/</SearchForm>
</OpenSearchDescription>
  1. Загрузить search.xml к корню вашего сайта.
  2. Добавьте следующий метатег к тегу <head> вашего сайта
<link rel="search" href="http://www.yoursite.com/search.xml" type="application/opensearchdescription+xml" title="You site name"/>

Обязательно замените URL-адреса домена своим доменом .

-2
задан Javier 26 February 2019 в 13:06
поделиться

1 ответ

Вы должны использовать скрипт лайтбокса, например fancybox ( https://fancyapps.com/fancybox/3/ ), вам просто нужно добавить атрибуты data-fancybox для ссылок, например: [ 114]

<a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a>

Также возможно заставить его работать без ссылок - https://codepen.io/anon/pen/rRVeJW

0
ответ дан Janis 26 February 2019 в 13:06
поделиться
Другие вопросы по тегам:

Похожие вопросы: