Positioning the Belt in Carousel Viewer

[slabadie]

It's almost there.

I assume you wanted me to remove the class=picbox and add a style to this div. I seemed to be getting a repeating region on the top and bottom. http://www4.esu.edu/mascot/scroller5/index.htm.

[Minos]

Yeah, it's because of the div. Here's the hierarchy of that section:

picbar
-left
-DIV <- Causing floating issues
--mygallery
---belt
----panel
-right

Remove the div (formerly picbox) entirely, and change

.stepcarousel .panel {
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px; /*margin around each panel*/
width: 121px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

to

.stepcarousel .panel {
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px; /*margin around each panel*/
width: 121px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
padding: 2px;
border: 1px solid #8B846A;
}

Essentially, it's now applying that bordered effect directly to the images, with a 2px gap.

[slabadie]

I had to remove the padding and make the border 0 to get rid of the repeating region on the top and bottom. Now of course the internal border around the images are gone.

[slabadie]

Is there anyway to unhide the the border on the third image? Everything else is great!! Thank you for your patients.

[ddadmin]

This is separate from what Minos has posted (great job btw), but here is a modified version of Carousel Viewer as promised that supports easily adding left and right nav buttons to the left and right edges of the Carousel Viewer. Screenshot:



First, inside the configuration code, add the new "navbuttons" parameter:

	statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
	contenttype: ['inline'], //content setting ['inline'] or ['external', 'path_to_external_file']
	navbuttons: ['http://i28.tinypic.com/dwudlw.jpg', 'http://i25.tinypic.com/2e1hz42.jpg', 53, 47, 2]

Parameters are: left_image, right_image, left_image_width, right_image_width, steps_to_move_by.

Then, use the below modified carousel.js file.

[Minos]

Thanks dd, I do what I can

There are a few ways to fix that border:
- Make the thumbnails smaller
- Change the margin or padding of the panel css
- Change the size of the bar

The easiest way is to lengthen the bar, which I took the liberty of adjusting to get the proper effect. The following values should be changed:

picbar (style.css) - width should become 419px
arr-right (style.css)- margin-left should become 5px, this actually looks better than the 10px I suggested before
stepcarousel (index.html) - width should become 384px

Lemme know how this helps.

-M.

[slabadie]

Thanks to both of you for your help on this. Sorry for not responding sooner, but I was in the hospital last week.

[slabadie]

After all the help you both have given me, I need to impose on you once more. I just realized that the image belt is not positioned properly in IE6 but works in IE7. http://www4.esu.edu/mascot/scroller5/index.htm