Добавление ссылки на изображение в слайдшоу цикл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/

Другие вопросы по тегам