How to create links for images in this jQuery Slider plugin

Question

Okay so I am trying to add links to each of my photos in the slider. I have done it on 2 other websites but this coding is different then the other 2 when I add the anchor tag.

<a href="http://www.google.com

I tried placing it in different parts of the HTML template, but it does not work so here is my coding. I know its probably something simple I am missing?

<div class="pad-slider">
        <div class="main-slider">
            <ul class="items">
                <li>
                    <img src="images/slide1.jpg" alt="" />
                    <div class="slider-banner"><span>The Next Level of Your Success</span></div>
                </li>
                <li>
                    <img src="images/slide2.jpg" alt="" />
                    <div class="slider-banner"><span>We offer Different Ways of Problem Solving</span></div>
                </li>
                <li>
                    <img src="images/slide3.jpg" alt="" />
                    <div class="slider-banner"><span>We craft practical solutions</span></div>
                </li>
            </ul>
        </div>
    </div>

If you need anymore information let me know. Here is the template website I am using with the Slider seen live on the homepage: Link

Solution

The particular jQuery slider you are using is named TMSlider 0.4.1 and it allows the SPAN text to become links if you setup your HTML correctly.

Also, if you want the actual images to become links (which may be the same or different as the above links), then add an extra div and a little CSS to achieve that functionality.

jsFiddle DEMO

HTML Section:

<div class="pad-slider">
    <div class="main-slider">
        <ul class="items">
            <li>
              <img src="http://img186.imageshack.us/img186/1866/halo3wallpaper1024copy9yf1.jpg" alt="" />
              <div class="slider-banner">
                <div class="imageLink" title="Click here to open Google IMAGES website." onclick="window.open('http://images.google.com/'); return true;"></div>
                <a href="http://www.google.com">
                  <span>Click here to open Google MAIN website.</span>
                </a>
              </div>
            </li>
            <li>
              <img src="http://img91.imageshack.us/img91/6278/telagawarnalakewallpapew.jpg" alt="" />
              <div class="slider-banner">
                <div class="imageLink" title="Click here to open Bing IMAGES website."  onclick="window.open('www.bing.com/images/'); return true;"></div>
                <a href="http://www.bing.com">
                  <span>Click here to open Bing MAIN website.</span>
                </a>
              </div>
            </li>
            <li>
              <img src="http://img393.imageshack.us/img393/9093/sky04jr4.jpg" alt="" />
              <div class="slider-banner">
                <div class="imageLink" title="Click here to open AltaVista IMAGES website"  onclick="window.open('http://images.search.yahoo.com/'); return true;"></div>
                  <a href="http://us.altavista.com/">
                    <span>Click here to open AltaVista MAIN website.</span>
                  </a>
                </div>
            </li>
        </ul>
    </div>
</div>

CSS Section:

.imageLink {
  width: 950px;
  height: 440px;
  margin-top: -440px;
  cursor: pointer;
}

Adjust the width and height of the added CSS so it matches your Sliders size, with the exception of using a negative value for margin-top.

Alternate Link Format: If you want the clicked-images not to open a separate tab/window, then you use this syntax for the onclick event to use the same browser window.

onclick="window.location.href = 'http://www.bing.com/images/'; return true;"

Comments

[Admin]

Thank you so much and what I did was looked at the CSS and changed the slider banner to a clear png background and then deleted all the text and it let you have just a link on the picture so thank you so much

[arttronics]

It looks like your not using my answer, but your own that is much different. That's great that you found an answer you like, but do consider creating an answer based on your solution, and accept your own answer. Cheers!