Расширяем shadowbox

Shadowbox нужен для просмотра галереи фотографий и видео во всплывающем окне. Добавим некоторые возможности в этот плагин.

  1. Очищаем данные из кэша  для определенной галереи. Создаем метод clearGallery:
    Shadowbox.clearGallery = function (gallery) {
        var self = this;
        // Найдем все элементы галереи и удалим их
        for (var i in self.cache) {
            if (self.cache[i].gallery === gallery) {
                self.removeCache(self.cache[i].link);
            }
        }
    };
    

    Этот метод удобен тогда, когда у нас все данные подгружаются по аяксу, и бывает такое что галерею инициализируем заново. При этом shadowbox не затирает старые данные. Поэтому перед тем как инициализировать определенную галерею нужно вызвать данный метод.

  2. При клике на окно shadowbox — показываем следующую фотографию. Создаем метод bodyInnerOnMouseover :
    Shadowbox.bodyInnerOnMouseover = function () {
        if (Shadowbox.gallery.length <= 1) {
            if (document.getElementById("sb-body-inner").style.cursor != "default")
                document.getElementById("sb-body-inner").style.cursor = "default";
        } else {
            if (document.getElementById("sb-body-inner").style.cursor != "pointer")
                document.getElementById("sb-body-inner").style.cursor = "pointer";
        }
    
    }
    

    Открываем файл shadowbox.min.js, находим элемент sb-body-inner и навешиваем на него такие события:

    <div id="sb-body-inner" onclick="Shadowbox.next();" onmouseover="Shadowbox.bodyInnerOnMouseover();"></div>
    
  3. Чтобы галерея скролилась при инициализации передаем параметр continues
    Shadowbox.init({
        continuous: true
    });
    
По теме:
Выбираем технологии и инструменты для разработки веб приложений

1 Выбор и настройка инструментов для разработки фронтенда (только самые важные): 1.1 Twitter bootstrap — фреймворк позволяет писать качественную верстку Read more

Внедряем js модуль в query plugin

Например написан модуль SelectControl по принципу amd : define("SelectControl", ["jquery"/* TODO uncomment: , "addJqueryPlugin" */], function($) { function SelectControl() { this.init.apply(this, Read more

Soap вызов, используя jquery.ajax

Иногда не хочется делать запрос с клиента на свой сервер, который в свою очередь, используя soap клиент, делает запрос еще на Read more

Редактор текста и html — TinyMCE

TinyMCE — бесплатный javascript HTML редактор, легко внедрить в сайт, имеет кучу плагинов и гибко настраивается. Заходим на официальный сайт и Read more

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *