Forum — studiograsshopper

Please make sure that you have read the documentation and extensive resources provided on this site before posting your question!

Dynamic Content Gallery Resources

DCG Version 4.0 beta is now available for download and testing. This is a development version and not recommended for live sites. Read more here.

Note that the current stable release of the DCG is version 3.3.5.

	You must be logged in to post	Login Register

Home Forum Dynamic Content Gallery v3+ Change the size of the scroll right and left areas?

Change the size of the scroll right and left areas?

fixed

Page: 1

User

Post

8:55 pm
January 11, 2010

pthomp

Guest

Hi Guys,

I am using the new version of the Dynamic Gallery Plugin on a site I built for a friend and they have asked me to change the size of the right and left scroll area on the main slider so that it is only a square around where the arrows are on the left and right side of the image. Is it possible to make this happen with the slider?

Also if this is possible do I need to extend the link area or is it already the full length of the Slider?

Thanks for your help.

1:09 pm
January 17, 2010

Ade

Admin

posts 2384

Hi,

1. It is possible to make the left and right link areas narrower, but not possible to make it a small square.

Open up jd.gallery.css (it's in the plugin's js-mootools/css folder) and look for this selector:

.jdGallery a.right, .jdGallery a.left

and reduce the existing width:25%; to whatever suits you. Don't make this less than the width of the actual arrow images, otherwise you will lose part of the arrow image.

2. "Also if this is possible do I need to extend the link area or is it already the full length of the Slider?"

Not sure I quite follow you. Or is this covered by the above answer?

Dynamic Content Gallery: Have you read the Configuration Guide and FAQ?

5:45 pm
January 19, 2010

pthomp

Guest

Thanks Ade, that helped a lot. I changed the % from 25% to 5% so that it is the exact width of the arrows.

.jdGallery a.right, .jdGallery a.left

{

position: absolute;

height: 99%;

width: 5%;

cursor: pointer;

z-index:10;

filter:alpha(opacity=20);

-moz-opacity:0.2;

-khtml-opacity: 0.2;

opacity: 0.2;

}

I also had to change the following so that the area in the middle that contains the link to "more" filled the width between the arrows.

.withArrows a.open

{

position: absolute;

top: 0;

left: 5%;

height: 99%;

width: 90%;

cursor: pointer;

z-index: 10;

background: none;

-moz-opacity:0.8;

-khtml-opacity: 0.8;

opacity: 0.8;

}

Thanks again for your help and this wonderful gallery.

10:15 pm
January 19, 2010