Question

I am trying to integrate jquery cycle plugin and it works fine. I have navigation controls also in my slideshow. But the problem is that I need to set the controls as background image and should not display the prev next, pause and play links(texts). Please find my code below. If I delete the text of links(previous, next, pause and play) the slideshow wont work. So is there a way to make this text transparent so that user cannot see these links and only images are visible. Please help.

Previous

    <div style="height:25px;width:25px;display:inline-block;background:url('Images/play.png')no-repeat transparent"><a href="" id="play" style="text-indent:-9999px;">Play</a></div>
    <div style="height:25px;width:25px;display:inline-block;background:url('Images/pause.png')no-repeat transparent"><a href="" id="pause">Pause</a>  </div>

<div style="height:25px;width:25px;display:inline-block;background:url('Images/next.png')no-repeat transparent"> <a href="" id="next">Next</a></div>
</div><!--controls-->

Answer 1

You can give it either of these CSS parameters:

display:none; or visibility:hidden;

The first one will remove it from the DOM so it won’t take up space. The nice thing about this is it’s directly interfaced with JQuery’s show() and hide() functions.

The second one will keep it in the DOM and just make it invisible so other elements surrounding it will respect it’s presence and the layout will remain unchanged. To toggle this with JQuery you’ll want to use $('element').css('visibility','visible');