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-кодом скина эскиза навигатора, поскольку он полностью настраиваемый и может быть очень сложным. Пожалуйста, убедитесь, что ваш элемент ссылки не покрыт каким-либо другим элементом.

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