Добавление ссылки на изображение в слайдшоу цикл2 или пейджер
Мне нужно добавить ссылку на изображения в моем слайд-шоу (цикл2), которое также настроено на пейджер. Как мне сделать это, не сбивая изображение с ползунка?
<div
id="slideshow" class="cycle-slideshow"
data-cycle-manual-fx="scrollHorz"
data-cycle-pager-fx="fade"
data-cycle-manual-speed="400"
data-cycle-prev="#prev"
data-cycle-next="#next"
data-cycle-speed="600"
data-cycle-timeout="3000"
data-cycle-pager = "#pager"
data-cycle-pager-template="<a href='#'><img src='{{src}}' width=150 height=100></a>">
<img src="bear scene.jpg" alt=""/>
<img src="someimage.jpg" alt=""/>
<img src="otherimage.jpg" alt=""/>
<img src="picute.jpg" alt=""/>
<img src="somethingelse.jpg" alt=""/>
<img src="anotherpic_.jpg" alt=""/>
<img src="lastpic.jpg" alt=""/>
</div>
1 ответ
Решение
Если вы не хотите возиться с CSS (что вам нужно сделать, если вы оберните изображения в <a>
теги) вы можете просто использовать JavaScript onclick
событие для изображений, чтобы открыть ссылку из изображений, как это:
<img onclick="window.open('http://www.google.com', '_blank')" src="bear scene.jpg" alt=""/>
Вот несколько примеров: https://jsfiddle.net/2jjomuge/