Replace "Next" and "Previous" text links with images?

[GoogleCodeExporter]

Is it possible to replace the "Next" and the "Previous" text links with images?

I want to have a left pointing arrow and a right pointing arrow instead of
the text links.

Any advice is welcome.

Thanks!

Original issue reported on code.google.com by daniel%j...@gtempaccount.com on 3 Feb 2010 at 6:43

[GoogleCodeExporter]

I did this. Just place the images as backgrounds for the "next" and "prev" 
classes. Set them to display: block, and 
set the height and width to the image height and width. I added in the 
jquery.galleriffic.js file an extra span 
around the link text that I could set to display:none in order to hide the 
standard text. It's the usual screen-
reader degradable trick, just with the extra step of modifying the js code 
slightly.

Original comment by jack.sta...@gmail.com on 12 Feb 2010 at 6:25

[GoogleCodeExporter]

It's easier not to add extra <span> tag.
Add in css something like this for 25px x 25px image:
.next{background:url(/link/to/image.gif);display:block;height:0;overflow:hidden;
padding:25px /* height of image*/ 0 0 0;width:25px /*width of image*/}

Original comment by kristaps...@gmail.com on 14 Jul 2010 at 9:53

[GoogleCodeExporter]

I followed the idea provided by Jack Stalnaker and for the most part this 
worked, however the layout of the controls got messed up and the "previous" and 
"next" buttons are no longer next to each other, but spread far apart. 

Any suggestions on how to fix this?

Original comment by jmkeep...@gmail.com on 1 Sep 2010 at 6:50

[GoogleCodeExporter]

I have a different fix, and I didn't 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:39

[GoogleCodeExporter]

Unfortunately none of the above solutions seems to work in IE..whereas it works 
perfectly for Mozilla or Opera.:/

Original comment by christos...@gmail.com on 10 Dec 2010 at 9:50

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

I use this patch with 4 new paramaters wich default to the text if not provided.
Those parameters are the title of the controls.

Original comment by kio...@gmail.com on 16 May 2012 at 1:02

Attachments:

• patch.diff