Back to Tweaks Main | Buy Now [$95] | Lightshow Magic Home | Main Examples Page


Lightshow Magic in Horizontal Scroller Magic

Show All

  • IMG 0221
  • IMG 0222
  • IMG 0224
  • IMG 0240
  • IMG 0268
  • IMG 0275 2
  • IMG 0279
  • IMG 0282
  • IMG 0283
  • IMG 0284
  • IMG 0290
  • IMG 0291
  • IMG 0295
  • IMG 0311
  • IMG 0466
  • IMG 0522 2
  • IMG 0655
  • IMG 0695
  • IMG 0697
  • IMG 1379
  • IMG 1381
  • IMG 1394

This tutorial will show you how to display a PVII Lightshow Magic gallery inside a Horizontal Scroller Magic widget in 3 steps.

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)

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;}

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.