Solved

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

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn how to dynamically set the form action using jQuery.

911 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

20 Experts available now in Live!

Get 1:1 Help Now