Solved

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

Posted on 2010-09-02
4
1,128 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 500 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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

746 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now