?
Solved

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

Posted on 2010-09-02
4
Medium Priority
?
1,147 Views
Last Modified: 2012-05-10
Hi- I've been working on a wordpress website that uses the simple scrollbar gallery plugin:
http://wordpress.org/extend/plugins/simple-scrollbar-gallery/

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:
http://www.creativemusicphotography.com/wordpress/?p=1302


thanks!
0
Comment
Question by:xanabobana
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 12

Expert Comment

by:Dean OBrien
ID: 33595061
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

Easynow
0
 

Author Comment

by:xanabobana
ID: 33598171
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


0
 
LVL 12

Accepted Solution

by:
Dean OBrien earned 2000 total points
ID: 33598660
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

Easynow
0
 

Author Closing Comment

by:xanabobana
ID: 33659379
perfect! thanks!
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses

719 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question