#javascript #jquery #galleria
#javascript #jquery #галерея
Вопрос:
Я хочу добавить кнопку «Купить сейчас» в Galleria, которая инициирует добавление изображения в корзину посетителей.
У меня уже настроен код корзины, но я изо всех сил пытаюсь понять, как добавить пользовательскую кнопку в Galleria.
В настоящее время я использую классическую тему и добавил изображение в map.png. Я могу без проблем настроить CSS, но не могу понять, как закодировать расширение для Galleria.
Любая помощь очень ценится!
Ответ №1:
Вы могли бы прикрепить 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 amp; 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;
});
}
});
Ответ №2:
вам следует подумать о создании вашей собственной темы. Галерея «широко расширяема», и вы можете добавить кнопку «Корзина» в init
функцию вашей темы
Комментарии:
1. Надеялся избежать этого, адаптировав существующую тему. Планировал в конце концов использовать тему «Двенадцать», но хотел адаптировать классическую тему, чтобы начать работу. В настоящее время я просматриваю исходный код Galleria, чтобы попытаться добавить его туда. Думаю, метод appendChild — это то, где мне нужно быть…