a javascript slideshow for photographer and artist websites

configuring bcSlideshow viewer options for a single slideshow

These are the configuration options you can make available to your viewers:

  • background color
  • frame margin
  • frame
  • frame shadow
  • mat color
  • mat reveal
  • image border
  • picture size
  • orientation
  • legends
  • transition speed
  • display duration

You can create thousands of different displays with these options.

View the source code of my demo screens to see how I’ve done mine.

options button

You must have an options button, so the viewer can select options.

When the options button is clicked, the slideshow stops and blanks, and the options <div> appears.

options div

You must have an options div in which to display the options.

When the options div is hidden, it is effectively removed from the page. This can radically alter the screen if you haven’t prepared the div properly. Normally, this is done by positioning the div absolutely and placing it in a higher z-index. For instance, if you want the options to appear over the slideshow and the slideshow div is at z-index 1, then place the options div at z-index 2.

View the source code of my demo screens to see how I did this.

You present background color options to your viewers as radio buttons. You select the values and descriptons; and your viewers click a radio button.

Use the radio input as shown below. Insert any valid CSS color you choose in the value field, and enter the descriptive text of your choice. Present as many or as few buttons as you choose:

  • <input type="radio" name="bcBackgroundColorGroup" id="bcBackGroundColorGroup_0" value="none" checked />None
  • <input type="radio" name="bcBackgroundColorGroup" id="bcBackGroundColorGroup_1" value="#000000" />Black
  • <input type="radio" name="bcBackgroundColorGroup" id="bcBackGroundColorGroup_2" value="#888888" />Gray
  • <input type="radio" name="bcBackgroundColorGroup" id="bcBackGroundColorGroup_3" value="#FFFFFF" />White

We’re using the metaphore of a framed picture, as if your viewer were asking the question, "How would that look hanging on my wall?"

The frame margin is the distance in pixels between the frame and the slideshow container border.

Again, you present the choices as radio buttons:

  • <input type="radio" name="bcFrameMarginGroup" id="bcFrameMarginGroup_0" value="none" checked />none
  • <input type="radio" name="bcFrameMarginGroup" id="bcFrameMarginGroup_1" value="5px" />Thin
  • <input type="radio" name="bcFrameMarginGroup" id="bcFrameMarginGroup_2" value="10px" />Wider

Here’s how you give your viewers the opportunity to select frames:

  • <input type="radio" name="bcFrameGroup" id="bcFrameGroup_1" value="5px solid black" />Thin black
  • <input type="radio" name="bcFrameGroup" id="bcFrameGroup_2" value="10px solid black" />Wide black
  • <input type="radio" name="bcFrameGroup" id="bcFrameGroup_5" value="5px solid #773F1A" />Thin walnut
  • <input type="radio" name="bcFrameGroup" id="bcFrameGroup_6" value="10px solid #773F1A" />Wide walnut

Frame shadows add a 3-D effect to the presentation:

  • <input type="radio" name="bcFrameShadowGroup" id="bcFrameShadowGroup_0" value="none" checked />none
  • <input type="radio" name="bcFrameShadowGroup" id="bcFrameShadowGroup_1" value="5px 5px 5px #000000" />Black
  • <input type="radio" name="bcFrameShadowGroup" id="bcFrameShadowGroup_2" value="5px 5px 5px #333333" />Dark gray

As with backgrounds and frames, you have 65,636 mat colors to offer your viewers. Here’s a limited selection:

  • <input type="radio" name="bcMatColorGroup" id="bcMatColorGroup_0" value="none" checked />None
  • <input type="radio" name="bcMatColorGroup" id="bcMatColorGroup_1" value="black" />Black
  • <input type="radio" name="bcMatColorGroup" id="bcMatColorGroup_2" value="gray" />Gray
  • <input type="radio" name="bcMatColorGroup" id="bcMatColorGroup_2" value="#663300" />Brown
  • <input type="radio" name="bcMatColorGroup" id="bcMatColorGroup_3" value="white" />White

All images are centered in the frame and mat. Here’s how to select the amount of mat:

  • <input type="radio" name="bcMatRevealGroup" id="bcMatRevealGroup_0" value="0" checked />None
  • <input type="radio" name="bcMatRevealGroup" id="bcMatRevealGroup_1" value="1" />Very thin
  • <input type="radio" name="bcMatRevealGroup" id="bcMatRevealGroup_1" value="5" />Thin
  • <input type="radio" name="bcMatRevealGroup" id="bcMatRevealGroup_2" value="15" />Wider

Use standard CSS to define the border between the mat and your image:

  • <input type="radio" name="bcImageBorderGroup" id="bcImageBorder_0" value="none" checked />None
  • <input type="radio" name="bcImageBorderGroup" id="bcImageBorder_1" value="1px solid black" />Thin black
  • <input type="radio" name="bcImageBorderGroup" id="bcImageBorder_2" value="3px inset #ccc" />Inset

Let your viewers choose whether they want horizontal and vertical images to be the same size. You are limited to the two options below. You can’t change the value, but you can change the description:

  • <input type="radio" name="bcPictureSizeGroup" id="bcPictureSizeGroup_0" value="maximize_images" checked />Maximize each
  • <input type="radio" name="bcPictureSizeGroup" id="bcPictureSizeGroup_1" value="same_size_images" />Fixed size

To allow viewers to choose whether they want horizontal or vertical images in the slideshow, use the three options below. You can’t change the values, but you can change the description:

  • <input type="radio" name="bcOrientationGroup" id="bcOrientationGroup_0" value="horizontal" />Horizontal only
  • <input type="radio" name="bcOrientationGroup" id="bcOrientationGroup_1" value="vertical" />Vertical only
  • <input type="radio" name="bcOrientationGroup" id="bcOrientationGroup_2" value="both" checked />Both

Sometimes legends are a distraction. Other times, they provide information the viewer want’s to see. Let your viewers turn them on and off with these check boxes. You can change the description:

  • <input type="checkbox" name="bcLegendGroup" id="bcLegendGroup_0" value="checkbox" checked />Show title
  • <input type="checkbox" name="bcLegendGroup" id="bcLegendGroup_1" value="checkbox" checked />Show image ID

Because timing is a complex issue, I provide these fixed options. Display those you wish. You may change only the descriptions:

  • <input type="radio" name="bcTransitionSpeedGroup" id="bcTransitionSpeedGroup_0" value="slow" onclick="javascript:bcOptions.modify_duration('slow')" />Slow
  • <input type="radio" name="bcTransitionSpeedGroup" id="bcTransitionSpeedGroup_1" value="medium" onclick="javascript:bcOptions.modify_duration('medium')" />Medium
  • <input type="radio" name="bcTransitionSpeedGroup" id="bcTransitionSpeedGroup_2" value="fast" />Fast
  • <input type="radio" name="bcTransitionSpeedGroup" id="bcTransitionSpeedGroup_3" value="poof" />Poof !
  • <input type="radio" name="bcTransitionSpeedGroup" id="bcTransitionSpeedGroup_4" onclick="javascript:bcOptions.modify_duration('default')" value="default" checked />Default

Finally, I provide these fixed options for slide duration. You may change only the descriptions:

  • <input type="radio" name="bcDisplayDurationGroup" id="bcDisplayDurationGroup_0" value="2" onclick="javascript:bcOptions.modify_transition('2')" />2 seconds
  • <input type="radio" name="bcDisplayDurationGroup" id="bcDisplayDurationGroup_1" value="4" onclick="javascript:options.modify_transition('4')" />4 seconds
  • <input type="radio" name="bcDisplayDurationGroup" id="bcDisplayDurationGroup_2" value="6" />6 seconds
  • <input type="radio" name="bcDisplayDurationGroup" id="bcDisplayDurationGroup_5" value="default" checked />Default
Previous configuration... FAQ...