Positioning the Belt in Carousel Viewer

[slabadie]

1) Script Title: Step Carousel Viewer

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/stepcarousel.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.

[Nile]

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

[slabadie]

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.

[ddadmin]

I'll take a look at this later today.

[slabadie]

OK thank you

[slabadie]

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

[Minos]

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

[ddadmin]

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.

[slabadie]

Thank you both for your attention to this.

[Minos]

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

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.

[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:

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

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

[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