Adding a Link to my Anything Slider

[ddfashionsquare]

Hi,
I’m hoping some one out there can help me! I have a great looking anything slider on my web site home page, but I have’t figured out how to add a link to it that’ll take a customer to another location on the site. The slider was built into the template I purchased and I’m really trying to make the most of it. When a customer clicks on the slide advertising Animal Themed Jewelry, it does nothing. I need the click to take my customer to the Animal Themed Jewelry category of my site.

I’m grateful for any help anyone can offer.

[JosiahB]

I would need to see a link to you site to give you assistance

[ddfashionsquare]

sure, thank you!
http://www.ddfashionsquare.com

[Mottie]

Hi ddfashionsquare!

It looks like you’re just using images inside of the slider. If you add some css and wrap the image in a link, it will start doing what you need it to do. Here is the css you’ll need:

#slider a img { width: 100%; height: 100%; }

and the HTML

I only added a link around the animal theme image since it seemed that I used the correct URL. I didn’t try any of the others, but that should give you an idea of how it works.

[ddfashionsquare]

That’s great, thank you! I’m going to work with it now and will let you know how it turns out :)

[ddfashionsquare]

It worked, but since I stink at understanding CSS, I didn’t do anything with the CSS code you gave me. Is it necessary?

Thanks again!

[Mottie]

It just makes the image the same size as the slider… so up to you.

[ddfashionsquare]

Any idea where in the CSS I’d put the code? Looks like I need it.

/******* SET DEFAULT DIMENSIONS HERE ********/
div.anythingSlider {
position: relative;
display: block;
margin: 0 auto 1px;
overflow: hidden; /* needed for Opera and Safari */
}

/**** DO NOT CHANGE BELOW THIS LINE ****/
/* anythingSlider viewport window */
div.anythingSlider .anythingWindow {
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
top:-3px;
}

/* anythingSlider base */
.anythingBase {
background: transparent;
list-style: none;
position: absolute;
top: 0;
left: 0;

}
.anythingBase .panel {
background: transparent;
display: block;
overflow: hidden;
float: left;

[Mottie]

Add it anywhere… at the top is fine.

[ddfashionsquare]

It worked. Thank you :)

[Author]

Posts