简体   繁体   中英

Making an Image a Hyperlink in Nivo Slider

I am working with NivoSlider and have been unable to make the Image a link. I know, i can use captions to create a link. But, that isn't enought. For better accessibility, i want the image to be a link too.

There is one similar question on StackOverflow, but it is for a very old version of Nivo.

I am using this syntax for the slider.

<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>

Everything works perfectly. The slideshow, transition, captions, etc. But, I am unable to make the anchor link work on the entire image. :(

If anyone knows how to make it work, then please let me know.

EDIT: Here is the only piece of CSS written by me:

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

I am very late to party. it may be useful for someone

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; 

}

If you remove the wrapper divs with class "slide" it will work just fine. For example this is from nivo slider's demo

<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>

or checkout this thread,

NIVO SLIDER - Make a slide a link?

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM