Я работаю с Lightbox 2, так как он соответствует почти каждому из моих требований и, кажется, является последним обновленным плагином jQuery с низким профилем, который я использовал. Единственная проблема, с которой я сталкиваюсь, заключается в том, что два изображения (закрытие и загрузка) жестко закодированы в файле .js, и нет примеров для передачи аргументов в сценарий, чтобы переопределить это. Я недостаточно разбираюсь в JS, чтобы использовать документацию, являющуюся исходным кодом.Как передать динамические URL-адреса в экземпляр Lightbox 2, а не использовать его hardcoded `this.URL`?

(function() { 
    var $, Lightbox, LightboxOptions; 
    $ = jQuery; 
    LightboxOptions = (function() { 
    function LightboxOptions() { 
     this.fileLoadingImage = 'images/loading.gif'; 
     this.fileCloseImage = 'images/close.png'; 
     this.resizeDuration = 700; 
     this.fadeDuration = 500; 
     this.labelImage = "Image"; 
     this.labelOf = "of"; 
    } 
    return LightboxOptions; 
    })(); 

    Lightbox = (function() { 
    function Lightbox(options) { 
     this.options = options; 
     this.album = []; 
     this.currentImageIndex = void 0; 
     this.init(); 
    } 
    [...] 
    })(); 

    $(function() { 
    var lightbox, options; 
    options = new LightboxOptions; 
    return lightbox = new Lightbox(options); 
    }); 
}).call(this);

Весь файл можно увидеть on GitHub если я не включил достаточно кода. В включенных разделах this.fileLoadingImage и this.fileCloseImage заданы путь относительно файла HTML, который его выполняет. Например, http://mywebsite.com/. Однако мои CSS, JS, изображения и т. Д. Подаются от http://static[number].mywebsitestatic.com/. Вместо жесткого кодирования одного из моих доступных статических URL-адресов в файле .js, я бы предпочел сделать это более пригодным для повторного использования решением, чтобы, если эти доступные поддомены или родительские домены меняются, мне не нужно обновлять этот файл.

Сайт - приложение Django, поэтому в коде шаблона я могу просто использовать {{ STATIC_URL }}, чтобы выписать правильный статический URL-адрес файла для данной страницы и передать его в файл .js. Но как? Например, я хотел бы быть в состоянии сделать следующее (избегая при этом глобальные переменные):

<script> 
    /* instantiate a new version of Lightbox */ 
    newLightbox.fileLoadingImage = "{{ STATIC_URL }}img/lightbox/loading.gif"; 
    newLightbox.fileCloseImage = "{{ STATIC_URL }}img/lightbox/close.gif"; 
</script>

источник

2012-04-24 Bryson

Вот небольшая настройка, которая позволяет скрипту lightbox.js определять его URL-адрес; а затем URL-адрес изображений зависимостей.

Оригинальный код

this.fileLoadingImage = 'images/loading.gif'; 
this.fileCloseImage = 'images/close.png';

Пересмотренный Кодекс

this.fileLoadingImage = $('script[src$="/lightbox.js"]') 
    .attr('src') 
    .replace(/\/lightbox\.js$/, '/../images/loading.gif'); 
this.fileCloseImage = $('script[src$="/lightbox.js"]') 
    .attr('src') 
    .replace(/\/lightbox\.js$/, '/../images/close.png');

Скрипт работает, проверив все <script> теги, src атрибут заканчивается /lightbox.js (в надежде, что у вас есть только один такой сценарий тег). С этой точки зрения легко вычислить пути изображений. Demo Here. Обратите внимание, что демо использует некоторые трюки для работы с jsFiddle.

источник

2012-04-24 06:27:25

Каждый раз, когда я ссылаюсь, в своем HTML, на LightboxOptions или Lightbox, как используется в .js-файле, браузер возвращает сообщение об ошибке «undefined». Это было первое, что я пробовал. – Bryson

Я вижу. Я замечаю, что код выполняется внутри замыкания, и ни одна из переменных/конфигурации не доступна вне его. Теперь есть трюк, который включает в себя поиск тегов '

Вы можете использовать глобальную переменную JS:

<script> 
    var imagePath = '{{ STATIC_URL }}img/'; 
</script> 
<script src="js/lightbox.js"></script>

Затем модифицируют lightbox.js:

this.fileLoadingImage = imagePath + 'images/loading.gif'; 
this.fileCloseImage = imagePath + 'images/close.png';

источник

2012-04-24 06:21:47 Emmett

Я действительно думал об этом, но я пытался избежать «загромождения глобального пространства имен». – Bryson

Единственный способ обойти это было бы сделать большие изменения в lightbox.js, например. замените свой код инициализации по умолчанию своей собственной функцией 'init', которая принимает объект LightboxOptions в качестве аргумента. – Emmett

Вот почему я выбрал jQuery lightBox plugin, который может быть инициализирован по вашему желанию. Пример:

$("a[rel|=lightbox]").lightBox 
    imageLoading: '/assets/lightbox-ico-loading.gif' 
    imageBtnPrev: '/assets/lightbox-btn-prev.gif' 
    imageBtnNext: '/assets/lightbox-btn-next.gif' 
    imageBtnClose: '/assets/lightbox-btn-close.gif' 
    imageBlank: '/assets/lightbox-blank.gif'

(Я использую Coffeescript).

источник

2012-07-02 16:27:48

Последнее обновление 2007 года? Вы все еще используете это без проблем? – Bryson

@ Брайсон ничего мне не известно. Последняя версия датирована «11 апреля 2008 года». Фактически это было основано на Лайтбоксе 2 Локеша Дакара. Я согласен с тем, что Lightbox 2 сделал некоторые приятные обновления с тех пор. Избавляет меня, почему они не выпустили его как правильный плагин jquery. По моим соображениям я уверен. –

Как передать динамические URL-адреса в экземпляр Lightbox 2, а не использовать его hardcoded `this.URL`?

ответ

Оригинальный код

Пересмотренный Кодекс

Смежные вопросы