Добавить пользовательскую кнопку в Galleria - PullRequest
Новая
       5

Добавить пользовательскую кнопку в Galleria

1 голос
/ 25 мая 2011

Я хочу добавить кнопку «Купить сейчас» в Galleria, чтобы активировать добавление изображения в корзину для посетителей.

У меня уже установлен код корзины, но я пытаюсь выяснить, как добавить пользовательскую кнопку в Galleria.

В настоящее время я использую классическую тему и добавил изображение в map.png. Я могу настроить CSS без проблем, но не могу понять, как кодировать расширение для Galleria.

Любая помощь с благодарностью!

Ответы [ 2 ]

2 голосов
/ 01 июня 2011

Вы можете прикрепить URL-адрес покупки к объекту данных, а затем назначить URL-адрес для кнопки на событии image :

HTML 

<div>
  <img src="one.jpg">
  <a href="buyone.html">Buy now</a>
</div>
<div>
  <img src="two.jpg">
  <a href="buytwo.html">Buy now</a>
</div>

CSS (Например, стиль, как вы хотите) 

.galleria-button {
    z-index:3;
    padding:5px 10px;
    background:#000;
    color:#fff;
    position:absolute;
    top:20px;
    left:20px;
    cursor:pointer;
}

JS 

$('#galleria').galleria({
  dataConfig: function(img) {
    // return a new buylink key that points to the 
    // next anchor’s href attribute
    return { buylink: $(img).next().attr('href') }; 
  },
  extend: function() {

    // the current buy link
    var buy;

    // create the button and append it
    this.addElement('button').appendChild('container','button');

    // Add text & click event using jQuery
    this.$('button').text('Buy now').click(function() {
        window.location = buy;
    });

    // change the buy link on image
    this.bind('image', function(e) {
      buy = this.getData(e.index).buylink;
    });
  }
});
0 голосов
/ 25 мая 2011

Вы должны рассмотреть вопрос о создании своей собственной темы .Galleria расширяется, и вы можете добавить кнопку корзины в функцию init вашей темы

...