Поэтому я провел последние 2 часа, ударяя головой о стену, потому что, возможно, это простое решение (?):
Я хочу добавить кнопку гиперссылки, используя CSS для каждого изображения /div в jQuery Loopedslider.
Я использовал loopedslider несколько раз ранее, но никогда не добавлял кнопки гиперссылки. Хорошим примером этого может стать домашняя страница веб- магазина Amazons: http://webstore.amazon.co.uk/, где кнопка находится в левом нижнем углу для каждого изображения.
Возможно ли это с помощью Loopedslider? Христос, это даже имеет смысл? : -/
Любая помощь будет оценена по достоинству! Ура! :-)
Что-то вроде этого:
.yourDiv:after{
position: absolute;
bottom: 5px;
right: 5px;
z-index: 10;
display: block;
padding: 5px;
content: "click here!";
background-color: blue;
color: #fff;
font-family: "comic sans", arial, sans-serif;
font-size: 12px;
}
Конечно, вам нужно настроить таргетинг на определенные div в слайдере, например.slider div {}
А затем в js добавьте функции щелчка.
ОБНОВЛЕНИЕ: Похоже, что jQuery не может добавить функциональность: после элементов. Поэтому мое предложение состоит в том, что вы добавляете кнопки в jQuery вместо css.
Это должно сделать это!
$("#loopedSlider .slider div").each(function(){
// of course you'll need to create the class (.myBtnStyling) in your css file...
var btn = $("<div>")
.addClass("myBtnStyling")
.text("Click here!");
btn.click(function(){
// click functionality here...
alert("yay");
});
$(this).append(btn);
});