Positioning the Belt in Carousel Viewer

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.

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

Code:

---

.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

Code:

---

.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.

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.

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

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:

http://i30.tinypic.com/f2por6.gif

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

Code:

---

        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.

Thanks dd, I do what I can :D

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.

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

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