1

我想向 Galleria 添加一个“立即购买”按钮，这将触发将图像添加到访客购物车。

我已经设置了购物车代码，但我正在努力弄清楚如何将自定义按钮添加到 Galleria。

我目前正在使用经典主题并将图像添加到 map.png 中。我可以毫无问题地设置 CSS，但不知道如何为 Galleria 的扩展编写代码。

非常感谢任何帮助！

4

2 回答 2

2

您可以将购买 url 附加到数据对象，然后将 url 分配给图像事件上的按钮：

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;
    });
  }
});
于 2011-06-01T18:44:23.423 回答
0

你应该考虑建立你自己的主题。Galleria 是“可广泛扩展的”，您可以在init主题功能中添加购物车按钮

于 2011-05-25T12:59:11.363 回答