Скрипт галереи

Перепробовала несколько разных скриптов.
Всегда возвращаюсь к highslider.
Самый удобный, надежный, гибкий.

Пара приемов по использованию галереи.

  • Если мы используем галерею в разных местах и разными способами, то удобнее загружать скрипт и css сразу в шапке. Добавляем в head highslide-full.js и highslide.css.
  • Для того, чтобы увеличивать картинку в любом месте сайта по клику, добавим в шапку небольшой скрипт —
    <script type="text/javascript">
    hs.graphicsDir = '/highslide/graphics/';
    hs.align = 'center';
    hs.transitions = ['expand', 'crossfade'];
    hs.outlineType = 'rounded-white';
    hs.fadeInOut = true;
    </script>

    Изображение, которое нужно увеличить, оформляем так:
    <a href="URL полного изображения" onclick="return hs.expand(this)" ><img src="URL превью" alt="" /> </a>
  • Чтобы убрать надпись в верхнем правом углу со ссылкой на автора галереи достаточно в highslide-full.js отредактировать значение showCredits с true на false.

Конечно, при любом использовании highslider нужно подключить ее скрипты.

<link href="/hs/highslide.css" type="text/css"  
data-template-style="true"  rel="stylesheet" />
<script src="/hs/highslide-full.js"></script>