如何解决将自定义按钮添加到Galleria
| 我想向Galleria添加“立即购买”按钮,这将触发将图像添加到访客购物车。 我已经设置好购物车代码,但是我在努力寻找如何向Galleria添加自定义按钮的方法。 我目前正在使用经典主题,并将图像添加到map.png中。我可以设置CSS没问题,但无法弄清楚如何将扩展编码为Galleria。 任何帮助,不胜感激!解决方法
您可以将购买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;
});
}
});
,您应该考虑建立自己的主题。 Galleria是“可广泛扩展的”,您可以在主题的“ 3”功能中添加购物车按钮
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。