alternative navigation buttons

Are you referring to the “next >” and “< prev” on the lightbox?

Using a quick bit of javascript, you can change what those links look like.

If you go to your gallery page, and copy and paste the following code into your address bar and hit enter, you can see what the end result will look like:

javascript:{thickboxL10n['next'] = "<img src='https://greatlakesmotorinn.budgetmotelchain.com.au/files/smallArrow.gif' />"};void 0;

Click on an image and you will notice that the next links (and only the next links) will now be an arrow. <strong>This is just a demonstration of what the end result will be.</strong> I used an arrow image from another website, but you should definitely <strong>find or make your own arrow images, and host it yourself</strong>.

Here is how you make it permanent:

You will need to insert two lines of javascript code on your page:

// For the next arrow
thickboxL10n.next = “<img src=’**path to next image**’ />”
// For the previous arrow
thickboxL10n.prev = “<img src=’**path to previous image**’ />”

You will need to find or make your arrow images, upload them to wordpress or some other hosting, and paste the URLs between the ' ' in the img tag.

There are many ways to add the code. A simple one would be to just insert it into your footer like so. It's not the best or right way, but it will get the job done:

<script type=’text/javascript’>
jQuery(document).ready(function() {
// For the next arrow
thickboxL10n.next = “<img src=’**path to next image**’ />”
// For the previous arrow
thickboxL10n.prev = “<img src=’**path to previous image**’ />”
</script>
}`

It needs to be after the other code that sets them to their default values, so the farther down the page the better. The best place is right above the </body> tag

I might be able to throw this in a simple plugin to make it easy to install, update, add images, and disable. That won’t be until later tonight (6 or 7 hours from now).

You can also edit

wp-includes/script-loader.php

directly around line 173, but I wouldn’t really recommend that.

————————

I wrote the stuff below first, but then I was doing a bit of research and I found the above trick, which I think is a bit easier:

The easiest way to change it would be to use CSS.

You would need to add styles for these selectors:

#TB_next a{
  /* Add your CSS styles here for the link */
  /* You may want to hide this one like so: */
  visibility: hidden;
}

#TB_prev a{
  /* Add your CSS styles here for the link */
  /* You may want to hide this one like so: */
  visibility: hidden;
}

/* And add your background picture to */

#TB_next {
  /* Add next arrow background-image property */
}

#TB_prev {
  /* Add previous arrow background-image property */
}

The reason you hide the link is because it has the text “next >” or “< prev”. The only way to not display that is to hide it with CSS (like the above code), edit the thickbox.js file directly.

the NextGen styles in Gallery->Styles would probably be a good place to put it.

This link explains the background-image property. It can be used to include an icon, that you will have to provide.

I screwed up my code tags above.

This is what you want to paste into your address bar and hit enter (on your gallery page) to see a quick demo on (live on your site!):

javascript:{thickboxL10n['next'] = "<img src='https://greatlakesmotorinn.budgetmotelchain.com.au/files/smallArrow.gif' />"};void 0;

I hope you can make sense of the rest. The code parts and normal text are mixed up, let me know if you need clarification.

This is great – I have a basic idea of code, bit like my mechanical ability (kick the tyre and look perplexed)

One question – you say “go to your gallery page, and copy and paste the following code into your address bar and hit enter, you can see what the end result will look like:”

Where is the address bar?

However, I like the CSS editing option better

Thanks a lot, I’ll get back to you once I’ve tested it ??

Yeah, sometimes I have a tendency to overcomplicate things.

For your information, the address bar is where URLs go. It will say stuff like www.ads-software.com/support/…. on this page.

Anyway, I made a quick plugin that will get the job done.

Here is a direct link to the plugin zip.

I made a page with a demonstration as well. You can also download the plugin from there.

Whichever way you get it, you will need to go to:

Plugins->Add New

Under the Install plugins header, you’ll need to click “Upload.”

You can then browse for the zip file and upload it. It will be just like a normal plugin, so just activate it like normal.

There are directions on the page I linked to if you want to change the images.

Excellent – works well – thankyou