Преобразование изображения в гиперссылку в Nivo Slider

Я работаю с NivoSlider и не смог сделать изображение ссылкой. Я знаю, я могу использовать подписи, чтобы создать ссылку. Но этого недостаточно. Для лучшей доступности я хочу, чтобы изображение тоже было ссылкой.

На StackOverflow есть похожий вопрос, но он относится к очень старой версии Nivo.

Я использую этот синтаксис для слайдера.

<div class="slider-wrapper theme-default container">
    <div class="ribbon"></div>
    <div id="slider" class="nivoSlider">
        <div class='slide'><a href='#'><img src='abc.png'></a>
        </div>
        <div class='slide'><a href='http://google.com'><img src='google.png' title=''></a>
        </div>
    </div>
</div>

Все работает отлично. Слайд-шоу, переход, подписи и т. д. Но я не могу заставить якорную ссылку работать на всем изображении. :(

Если кто-нибудь знает, как заставить его работать, то, пожалуйста, дайте мне знать.

РЕДАКТИРОВАТЬ: Вот единственный фрагмент CSS, написанный мной:

.slider-wrapper {
    margin: auto;
    margin-top: 15px;
    background: fade(white,80%);
    padding-top: 15px;
    margin-bottom: 40px;
}
.slide-title {
    .font;
    color: #ddd;
}

javascript html jquery css nivo-slider
person Rohitink    schedule 15.10.2013    source источник
comment
Это, вероятно, связано с CSS... Ваши изображения, вероятно, находятся в абсолютной позиции (вместо привязки), поэтому высота/ширина привязки равна 0. В панели отладки вашего браузера убедитесь, что привязка занимает всю ширину/ высота изображения. Или опубликуйте свой код CSS в вопросе.   -  person VVV    schedule 15.10.2013
comment
на всей странице. Что вы имеете в виду?   -  person putvande    schedule 15.10.2013
comment
@vyx.ca Я добавил CSS. Не могли бы вы предоставить мне CSS, чтобы помочь мне.   -  person Rohitink    schedule 15.10.2013
comment
@RohitSmith ваш CSS не имеет значения. .slide-title даже не используется, и вы не предоставили css для .slide, .slide a   -  person VVV    schedule 15.10.2013

Ответы (2)


arrow_upward
0
arrow_downward

Я очень опаздываю на вечеринку. это может быть полезно для кого-то

HTML

<div class="slider-wrapper theme-default">
              <div id="slider" class="nivoSlider">
                <a href="http://www.google.ae/" target="_new"><img  title="#htmlcaption1"  src="images/01.png" alt=""></a>
                <a href="http://www.yahoo.ae/" target="_new"><img title="#htmlcaption2"  src="images/02.png" alt=""></a>                 
              </div>
          </div>

CSS

.nivoSlider a.nivo-imageLink {
background:white; 
filter: alpha(opacity=0); 
opacity: 0;
z-index: 8;
width: 100%;
height: 100%;
position: absolute;

}

person Anjum....    schedule 06.05.2014

arrow_upward
-1
arrow_downward

Если вы удалите элементы-оболочки с классом «слайд», все будет работать нормально. Например, это из демонстрации слайдера nivo.

<a href="#1"><img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" /></a>
                <a href="#2"><img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" /></a>
                <a href="#3"><img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" /></a>
                <a href="#4"><img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" /></a>

или проверить эту тему,

NIVO SLIDER — сделать слайд ссылкой?

person melc    schedule 15.10.2013