Обновление URL Colorbox и кнопки интереса

У меня есть галерея изображений, которая динамически заполняется с помощью запроса к базе данных. Отсюда у меня работает colorbox, поэтому, когда вы нажимаете на изображение, оно загружает изображение и позволяет вам нажимать кнопку "Далее / Предыдущая", чтобы пройтись по изображениям - довольно стандартные вещи.

Затем я добавил кнопку интереса в colorbox, чтобы при загрузке colorbox у пользователя была возможность закрепить изображение, на которое он смотрит.

$(document).ready(function(){
    $(".gallery").colorbox({
        rel:'group1',
        height: '415px',
        onOpen:function(){  
          $('#colorbox').addClass('cbox-alt');

          // variables used to build pinterest URL
          var baseurl = 'http://www.baseurl.co.uk';
          var imgsrc = $(this).children('img').attr('src'); 
          var desc = $(this).children('img').attr('alt');

          $('#cboxContent').append(
            "<div id='pinterest'><a data-pin-config='none' href='//pinterest.com/pin/create/button/?url=" + baseurl + "&media=" + imgsrc + "&description=" + desc + "' data-pin-do='buttonPin'><img src='http://www.baseurl.co.uk/images/pin_it_button.png' alt='Pin it' /></a></div>"
          );        
        },
      });
    });

Теперь из кода выше я открываю colorbox и добавляю класс исключительно для стилизации, когда он открывается. После этого я устанавливаю несколько переменных, которые помогут мне создать URL, который настроен на интерес к информации.

Это прекрасно работает, если я нажимаю на каждое изображение отдельно. Однако, как только я нажимаю на кнопки "Далее" и "Предыдущие", я хочу обновить URL с именем изображения и описанием текущего изображения, на которое смотрит пользователь.

Любая помощь будет отличной!

1 ответ

Используйте обратный вызов onComplete, чтобы обновить атрибут href вашего элемента привязки.

Другие вопросы по тегам