• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1159
  • Last Modified:

How do I add arrows to simple-scrollbar-gallery wordpress plugin?

Hi- I've been working on a wordpress website that uses the simple scrollbar gallery plugin:

In the FAQ it says you can use css to add arrows to the scrolling thumbnails but I can't figure out how.  If I add the images into the div, it stops the thumbs from scrolling altogether.  I'm not sure how to use the background-image css property in this case because I want 2 images, one on the left & one on the right.

Here's an example of the gallery in use:

  • 2
  • 2
1 Solution
Dean OBrienCommented:
Not sure if this would work, but this is what i would do for starters....

Open the file simple-scroll-gallery.php, and edit this line:

$output .= "      <div class='gallery-list'>\n";

As you can see this is the innermost div that contains the thumbnail gallery. Now to begin try adding a small red square div above the thumbs, using z-index:100. If this div does not alter the function of the scroll bar, then you should be fine to simply pop two arrows in 'above the current thumbs.

So try adding this:

$output .= "      <div class='gallery-list'><div style='position:absolute;z-index:100;left:0px;top:0px;width:100px;height:100px;background:#f00;'>text</div>\n";

Let me know if

a) you see red box
b) it alters the function of the scroll bar

xanabobanaAuthor Commented:
unfortunately, that made all of the thumbs display at once & moved the entire thumbnail div to the top of the page.  I left it so you could see http://www.creativemusicphotography.com/wordpress/?p=1302

Dean OBrienCommented:
You appear to have put the div around all the thumbnails.

I meant for you to insert my code exactly, you missed off the last bit that close the div. If you leave the div open then it will definitely mess up all the thumbnails

>>     text</div>

Try that out, if it works, add a second div and absolutely position it to the right hand side. Then if it still works, drop your left and right arrow image into those divs.

Im away for next fortnight so wont comment any further.

good luck

xanabobanaAuthor Commented:
perfect! thanks!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now