jssor слайдер добавить внешнюю ссылку на миниатюру
Я использую шаблон jssor для своего слайдера, и я изменил настройку, чтобы можно было изменять изображение слайдера при наведении курсора мыши на миниатюру. Но я не знаю, как добавить внешнюю ссылку к уменьшенному изображению, чтобы я мог перейти на другую страницу, связанную с этим изображением. Я попробовал следующий метод с http://quabr.com/28478806/jssor-external-links-on-thumbnails, но это не сработало
<div>
<img u="image" src="../img/photography/002.jpg" />
<div u="thumb">
<a href="http://mylink.com" target="_blank"><img class="i" src="../img/photography/thumb-002.jpg"/></a>
</div>
<div u="caption" t="L">My Title</div>
</div>
</div>
Спасибо за помощь!
1 ответ
Я думаю, это уже сработало.
Но в следующем коде есть дополнительное вложение
<div>
<img u="image" src="../img/photography/002.jpg" />
<div u="thumb">
<a href="http://mylink.com" target="_blank"><img class="i" src="../img/photography/thumb-002.jpg"/></a>
</div>
<div u="caption" t="L">My Title</div>
</div>
</div>
Пожалуйста, удалите его, заменив
<div u="caption" t="L">My Title</div>
</div>
с
<div u="caption" t="L">My Title</div>
Также, пожалуйста, установите 'height: 100%' для элемента 'a', чтобы увеличить кликабельную область.
<a href="http://mylink.com" target="_blank" style="height: 100%;">
И, наконец, ознакомьтесь с HTML-кодом скина эскиза навигатора, поскольку он полностью настраиваемый и может быть очень сложным. Пожалуйста, убедитесь, что ваш элемент ссылки не покрыт каким-либо другим элементом.