将自定义按钮添加到Galleria

Question

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

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

我目前使用的经典主题，并已将图像添加到map.png。我可以设置CSS没问题，但无法弄清楚如何将扩展名编码到Galleria。

任何帮助非常感谢！

Answer 1

你应该考虑建立your own theme。广场是“广泛的扩展”，你可以在你的主题

Answer 2

的init函数添加您的购物车按钮，你可以买入的URL连接到数据对象，然后将URL分配到按钮上image event：

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; 
    }); 
    } 
});