Positioning the Belt in Carousel Viewer

1) Script Title: Step Carousel Viewer

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...epcarousel.htm

3) Describe problem: Having trouble position the belt on my page. This is a link to the static page of what it should look like http://www4.esu.edu/mascot/index.htm and here is the link to the page with the script on it http://www4.esu.edu/mascot/scroller5/index.htm. There is also a conflict between Firefox and IE. Any help or guidence would be appreciated.

This is because the belt has an absolute positioning - i think - somewhere in its script. I don't know how to fix it though.

Yes, you are right, but the absolute position is set to zero (0) and the relative position does not have a position. If I add numbers other than zero (0) it doesn't move.

I'll take a look at this later today.

OK thank you

Sorry to be a pest, Just wondering when you will have an opportunity to check this out.

I took a look, and preliminarily, it may be that the issues lie within your styles.css rather than the script itself...I'm gonna play with it, see if I can't get you a solution

Sorry for the delay. I've tried a few things, to no avail. The two nav butons on both ends of the Carousel viewer does seem to be the culprit somehow, I agree with Minos. I'll post an update once I try recreating a similar interface from scratch. Should be later today or tomorrow.

Thank you both for your attention to this.

Okay, it took a bit of tweaking, but I've got something that works.

Problem #1 - Picbox. The way float:left works, a div that has this property will butt up it's left edge with the previous div with float:left. In this case, picbox. I couldn't find an easy way to include picbox in the solution, but to get the same effect:

I. Remove picbox.
II. Add

Code:

---

padding: 2px;
border: 1px solid #8B846A;

---

to .stepcarousel .panel css block (in index.html). Keep in mind you need to adjust your sizes accordingly, panel width of 121px and stepcarousel height of 90px worked for me.

Problem #2 - Once you solve that issue, you see that arr-left is the previous float:left, so, we need to fix that.

I: Add float:left; to the .stepcarousel css block (in index.html)
II: The spacing is a little off, picbar width of 411px, arr-right margin-left of 10px, and stepcarousel panel margin of 5px seems to work well.

I *think* that's all you need, lemme know if I left something out.

-M.

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