Slider full image clickable link

[dtmp]

Is there a way to make the entire image a clickable hyperlink? That little arrow link in the upper left is NOT intuitive and gets lost in the artwork.

Let me also rant about the restrictive nature of your support forum, this question was asked in another themes forum but I can’t see your response since I don’t own that one. I can’t see any way to limit my search to just one theme’s forum! Otherwise, I enjoy using your theme.

Topic

[Jason Bobich]

Hello,

This will be a customization you’ll need to make to the theme, but can be pretty easily accomplished with style modifications. I’ll share a CSS snippet that’s been floating around that help you to accomplish this in Akita.

.element-slider .slide .image-link,
.element-slider .slide .image-link:hover {
    background-color: #fff; /* Triggers the anchor in IE */
    background-image: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
}

========

For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme or in the “Custom CSS” option on your theme options page.

Also, here’s a helpful tutorial on how to use Firebug – http://vimeo.com/20917974. The only thing I’d suggest not doing is actually making edits to the theme’s CSS files, as it shows at the end of that video. However, the video serves as a good introduction to Firebug and how it can be used to find what CSS is effecting certain areas of your site without ever digging around in any files.

[dtmp]

Jason, thanks for your reply. I’m not a real CSS genius and know enough to get by (errr..probably not), but your solution seemed a little too complicated for me. I really only wanted to change one slide to this function. So I experimented with the custom slide and came up with this simple (at least I understand it) solution.

I just dropped this into a custom slide and got the desired result.
<a href="X LINK URL X"><img src="X IMAGE LINK X"></a>

is that too simple? Maybe in a future update you could add a full image link functionality check box. I’d also suggest a way to name each slide. In order to make changes to a specific slide I have to open them up to see which ones which if I can’t remember their order.
thanks.

[Jason Bobich]

The way you’re doing it with the custom slide is fine if that works for you.

Although, I think you might be be misunderstanding the first response. Just simply copy and paste that chunk into your Theme Options’s “Custom CSS” option, and everything should be working as you originally wanted.

Maybe in a future update you could add a full image link functionality…

It’s already been done for future updates. 😉

[dtmp]

Gotcha, I was going to try that but as I said not a genius. I think what threw me was your section on getting help with firebug, which led me to believe I was going to have to revise the css for my specific situation.

Just to be clear, if I add this to my custom CSS section, then the checkbox for “Image Link” would become a full image link instead of just the little arrow in the corner? (see, after all that it still not crystal)

[Jason Bobich]

haha, no problem…

Ok, so right now, when you check the “Image Link” checkbox, the theme is inserting this a link into the slide. The theme then styles this link to be small, with a little background image and it’s positioned in the top corner.

However, if you paste that snippet I gave you into your “Custom CSS” option, that will style this inserted link to be 100% x 100%, sitting above the slide, taking up the whole slide, and displayed transparently so the link shows through to the image behind.

Just play with it a little. Paste the snippet in and if you don’t like it, just remove it.

====

So in other words, just take the snippet and paste it into your Custom CSS option. You don’t have to do anything else. Now, when you check the “Image Link” it’ll automatically make it sit over the whole slide.

[dtmp]

Ahhh, thank you, me understands now, Master Yoda.

[Author]

Replies