adsPlace_1

Войти или Зарегистрироваться

adsPlace_3

Pretty Photo – скрипт лайтбокса

Pretty Photo - скрипт лайтбокса

Спешу поделиться свежей и симпатичной штуковиной для организации lightbox-ов или, выражаясь русским языком, всплывающих окон.

Штуковина представляет собой плагин к JQuery, очень легковесная и простая в использовании. Имя ей “PrettyPhoto”.

В отличии от некоторых своих собратьев по цеху, PrettyPhoto не является комбайном по отображению чего угодно во всплывающем окне. Плагин создан и работает только с целью показа изображений – как одиночных, так и в составе набора (галереи), но от этого не становится менее привлекательным.

Скрипт отлично уживается со следующими браузерами:

  • Firefox 3.0 (Mac/PC/Linux)
  • Firefox 2.0 (Mac/PC)
  • Safari 3.1.1 (Mac)
  • Opera 9+ (Mac/PC)
  • Internet Explorer 6.0 (PC)
  • Internet Explorer 7.0 (PC)

Распространяется по лицензии: Creative Commons Attribution 2.5.

В действии плагин можно посмотреть вот здесь.

Как использовать

Все как обычно:

Подключаем JQuery, сам плагин и его CSS.

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />

В случае, если вам жизненно необходимо поддержать несчастный IE6 в его попытках выглядеть как браузер и отображать прозрачность в PNG, то понадобится еще прописать такую конструкцию:

<!--[if IE 6]>
    <script src="js/DD_belatedPNG_0.0.7a-min.js"></script>
    <script>
DD_belatedPNG.fix('.pp_left,.pp_right,a.pp_close,a.pp_arrow_next,a.pp_arrow_previous,.pp_content,.pp_middle');
    </script>
<![endif]-->

Далее добавляем к нужным ссылкам на изображения атрибут rel=”prettyPhoto”.

Было:

<a href="images/fullscreen/1.jpg" title="Description"><img src="/images1.jpg" alt="Picture 1 title" /></a>

Стало:

<a href="images/fullscreen/1.jpg" title="Description" rel="prettyPhoto"><img src="/images1.jpg" alt="Picture 1 title" /></a>

Внимание:

  • если вы хотите отображать описание к изображению – помещайте текст описания в значение атрибута ‘title’ ССЫЛКИ;
  • если вы хотите отображать заголовок у окошка с изображением – текст заголовка помещайте в значение атрибута ‘alt’ ИЗОБРАЖЕНИЯ;

И, наконец, инициализируем плагин:

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $("a[rel^='prettyPhoto']").prettyPhoto();
    });
</script>

Для любителей применять различные настройки, инициализация может выглядеть так:

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $("a[rel^='prettyPhoto']").prettyPhoto({
            animationSpeed: 'normal',
            padding: 40,
            opacity: 0.35,
            showTitle: true,
            allowresize: true,
            counter_separator_label: '/',
            theme: 'light_rounded'
        });
    });
</script>

Расшифруем параметры:

  • animationSpeed – скорость анимации. Возможные варианты: ‘fast’, ‘slow’, ‘normal’
  • padding – padding для изображения
  • opacity – коэффициент прозрачности области, заполняющей все пустой пространство. Значение может быть в интервале от 0 до 1.
  • showTitle – показывать/не показывать заголовки. Варианты: ‘true’, ‘false’
  • allowresize – разрешить или запретить скрипту изменять размеры изображения и тем самым подстраиваться под размер окна браузера. Возможные вариатны: ‘true’, ‘false’
  • counter_separator_label – разделитель в счетчике изображений в галерее. Например, «3/5» – третье изображение из пяти. Вот значок “/» вы можете заменить на что-нибудь другое.
  • theme – тема оформления. Возможные варианты: ‘light_rounded’, ‘light_rounded’, ‘dark_rounded’, ‘light_square’, ‘dark_square’.

Чтобы организовать переход между изображениями внутри лайтбокса, измените rel=”prettyPhoto” на rel=”prettyPhoto“ у каждого изображения из набора.

Последние из рубрики

Комментарии(3)

    1. Аватар пользователя 1233

      1233

      16:46 19.05.2014

      А ссылку????????????

      ответить
    2. Аватар пользователя Andrews32

      Andrews32

      20:13 17.07.2014

      Столкнулся с такой проблемой в prettyPhoto: когда прописываешь в галерее слишком много картинок, пропадают миниатюры внизу. Опытным путём, уменьшая кол-во картинок (закомментировав лишние), установил порог «пропадания» — 40 штук. В Интернете никакой информации не нашёл. Зато нашёл в скрипте jquery.prettyPhoto.js вот такую строчку: if(pp_images.length > 40) settings.overlay_gallery = false; Теперь понятно. Поставил лимит в 50 шт., — и правда, более сорока картинок стало отображаться.

      ответить
      • Аватар пользователя Styusha16

        Styusha16

        08:50 14.03.2016

        А у меня проблема другая выявилась. выставляю например 10 фото, а при открытии модульного окна с миниатюрами у меня высвечивается 20 миниатюр и внизу указывается в 2 раза больше картинок. И так каждый раз. Если картинок больше 2, то их количество при отображении во всплывающем окне становится в 2 раза больше. Не могу найти в чем проблема.

        ответить

    Оставь свой отзыв

    Для вставки кода используйте кнопки php, html, javascript, css, sql

    * - поля обязательны к заполнению