Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2010-09-02
4
Medium Priority
?
1,153 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
  • 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

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

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

These days socially coordinated efforts have turned into a critical requirement for enterprises.
It’s a season to be thankful, and we’re thankful for users like you who engage on site, solve technology problems, and network with others in the industry. What tech are we most thankful for? Keep reading.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

876 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