Javascript 将自定义按钮添加到Galleria
我想在Galleria中添加一个“立即购买”按钮,该按钮将触发将图像添加到访客购物车 我已经设置了购物车代码,但我正在努力想办法将自定义按钮添加到Galleria 我目前正在使用经典主题,并已将图像添加到map.png中。我可以设置CSS没有问题,但是我不知道如何编写Galleria的扩展Javascript 将自定义按钮添加到Galleria,javascript,jquery,galleria,Javascript,Jquery,Galleria,我想在Galleria中添加一个“立即购买”按钮,该按钮将触发将图像添加到访客购物车 我已经设置了购物车代码,但我正在努力想办法将自定义按钮添加到Galleria 我目前正在使用经典主题,并已将图像添加到map.png中。我可以设置CSS没有问题,但是我不知道如何编写Galleria的扩展 非常感谢您的帮助
非常感谢您的帮助你应该考虑建筑。Galleria是“可广泛扩展”的,您可以在主题的
init
功能中添加购物车按钮您可以将购买url附加到数据对象,然后将url分配给以下页面上的按钮:
HTML
JS
希望通过修改现有主题来避免这种情况。计划最终使用“十二”主题,但想改编经典主题让我开始。我目前正在浏览Galleria的资料来源,试图将其添加到那里。我认为appendChild方法是我需要的。。。
<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>
.galleria-button {
z-index:3;
padding:5px 10px;
background:#000;
color:#fff;
position:absolute;
top:20px;
left:20px;
cursor:pointer;
}
$('#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;
});
}
});