Replace the Pause/Play link with an image

[GoogleCodeExporter]

I was assuming I could do this with CSS by using the following...

.ss-controls a  
{cursor:pointer; text-indent:-9999px;}
.ss-controls a.pause            
{background:url(../images/pause.png) no-repeat top center; height:22px;
width:46px;}
.ss-controls a.play             
{background:url(../images/play.png) no-repeat top center; height:22px;
width:46px;}

The above is generating the background image, but the text is still
displaying on top of the image (even though I am using the text-indent to
hide the text).  Why wont text-indent work on this link? 

All edits I've attempted to make to the javascript just cause the link to
disappear.  Any advice would be appreciated.

Original issue reported on code.google.com by pattyro...@gmail.com on 30 Apr 2010 at 7:16

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Sorry... I should have commented that I had a brain fart when I posted this.  
The
above css works perfectly if you remember to display:block;

Original comment by pattyro...@gmail.com on 25 May 2010 at 3:27

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

I found an easier fix for this. There is no need to edit the CSS at all. 

For your gallery, scroll down to where this bit starts:
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({

and look for: 

playLinkText:              'Play Slideshow',
pauseLinkText:             'Pause Slideshow',
prevLinkText:              '‹ Previous Photo',
nextLinkText:              'Next Photo ›',

Change these fields to this:

playLinkText:              '<img src="play.png" border="0" title="Play 
Slideshow">',
pauseLinkText:             '<img src="pause.png" border="0" title="Pause 
Slideshow">',
prevLinkText:              '<img src="previous.png" border="0" title="Previous 
Photo',
nextLinkText:              '<img src="next.png" border="0" title="Next Photo',

Now, there might be an error. When you preview this, your Previous and Next 
buttons might be mashed together with "> sticking out. There is a segment of 
code in the jquery.galleriffic.js file that is incomplete, but it only shows up 
when you do something like this. 

Open the jquery.galleriffic.js and search for this segment of code:

.append('<div class="nav-controls"><a class="prev" rel="history" 
title="'+this.prevLinkText+'">'+this.prevLinkText+'</a><a class="next" 
rel="history" title="'+this.nextLinkText+'">'+this.nextLinkText+'</a></div>')

And replace it with this:

.append('<div class="nav-controls"><a class="prev" rel="history" 
title="'+this.prevLinkText+'">'+this.prevLinkText+'"></a><a class="next" 
rel="history" title="'+this.nextLinkText+'">'+this.nextLinkText+'"></a></div>')

(The tags right before </a> for prev and next are not closed and need to be)

Voila!

Original comment by dianad...@gmail.com on 7 Oct 2010 at 12:22