Lightshow Magic in Horizontal Scroller Magic

Insert a Horizontal Scroller Magic widget on your page.

Set it to use the Aero Style Theme.

Edit the content panel CSS rule to change the padding values to 0 6px:

.p7HSM01 .p7HSM_content { padding: 0 6px; }

Delete the boilerplate "Lorem Ipsum" text in the scroller and also remove the paragraph tags that surround the text.

Switch to Code View to ensure your insertion point is on a blank line inside the "p7HSM_content" DIV.

<div class="p7HSM_content">
(Your cursor should be here)
</div>

Insert your Lightshow and set it to the Ivory Style Theme

You can add as many images (or content slides) as you wish. Our example contains 22 images. The scroller viewport adapts to the width of its containing element and determines how many thumbnails are visible at a time.

Now we'll need to tweak the CSS for the Lightshow thumbnail LI and A elements. Locate the trigger LI rule, near the bottom of your LSM style sheet. We're using Lightshow's Ivory Theme so the rule is:

.p7LSM01 .p7LSM_trigs li

Remove the float property, set a display property equal to inline-block, and set margin to 6px 3px:

• .p7LSM01 .p7LSM_trigs li {
  • list-style-type: none;
  • padding: 3px;
  • border: 1px solid #444444;
  • display: inline-block;
  • margin: 6px 3px;
• }

Now locate the A rule:

.p7LSM01 .p7LSM_trigs a

Remove the float property:

• .p7LSM01 .p7LSM_trigs a {
  • display:block;
  • z-index:1;
  • font-size: 0.9em;
  • border: 1px solid #333333;
• }

Older versions of IE do not properly support display inline-block so we'll need to write a conditional style sheet with a workaround. Insert this code block on a new line, just before your page's closing </head> tag:

<!--[if lte IE 7]>
<style type="text/css">
.p7LSM01 .p7LSM_trigs li {display: inline;}
</style>
<![endif]-->

That's it!

Dreamweaver's Design View (up to and including version CS4) has rather poor CSS support and, just like older versions of Explorer, does not properly support the inline-block value of the display property. Due to this Dreamweaver flaw, your thumbnails will display vertically, one per line. This is beyond our control and can only be fixed by Adobe. Note that this is only a Dreamweaver Design View Issue—your page will look perfect in actual browsers.