bcSlideshow

a javascript slideshow for photographer and artist websites


configuring bcSlideshow, multiple–slideshow mode

This is a list of the options you have available for configuring each of your bcSlideshows. All but two are optional:

  • galleryId
  • imageContainerId
  • backgroundColor
  • frameMargin
  • frame
  • frameShadow
  • matColor
  • totalMatRevealAsPctOfMax
  • imageBorder
  • fadeInOpacityDelta
  • fadeOutOpacityDelta
  • crossFadeTimeDelta
  • imageChangeDelta
  • defaultImageAspectRatio
  • maxS
  • maximizeEachImage
  • showHorizontalImages
  • showVerticalImages
  • randomize
  • imageOnClick
galleryIdPopulate this field with the PhotoShelter gallery ID for the gallery you wish to display. This field is overwritten when a gallery ID is passed to the slideshow as part of the page URL.
Example: galleryId : 'G0000oeUb_BbHm5E',
imageContainerIdPopulate this field with the ID of the HTML <div> that will contain the slideshow.
Example: imageContainerId : 'mySlideshowDiv',
backgroundColorUs CSS of the form "black" or "#FFFFFF" to set the background color of the slideshow.
frameMarginUse CSS of the form "5px" to set the distance between the slideshow <div> border and the image.
frameUse CSS of the form "5px solid #000000" to define the width and color of the frame around your image.
frameShadowUse CSS of the form "5px 5px 5px #000000" to style the shadow of your image frame.
matColorUse CSS of the form "#FFFFCE" to set the color of the mat around your image.
imageBorderUse CSS of the form "3px inset #CCCCCC" to style the border around your image.

If the default timing of your slideshow doesn’t seem quite right for you, you can change it easily. Just be sure to make small changes and test them. There’s a bit of math involved: If crossFadeTimeDelta is set to 14, then every 14 milliseconds the new image opacity will increase by fadeInOpacityDelta, and the old image opacity will decrease by fadeOutOpacityDelta. You want the new image opacity to reach a value of 1, and the old image opacity to reach a value of 0 well before the slideshow changes images ( imageChangeDelta ).

fadeInOpacityDeltaA value > 0 and <= 1. This determines how much the image opacity increases each crossFadeTimeDelta as it fades in.
fadeOutOpacityDeltaA value > 0 and <= 1. This determines how much the image opacity decreases each crossFadeTimeDelta as it fades out.
crossFadeTimeDeltaThe number of milliseconds that elapse before image opacities change to accomplish a fade in/out.
imageChangeDeltaThe number of milliseconds ( 1000 milliseconds = 1 second ) an image is on the screen before a new image is selected. This includes the fade-in and fade-out times.
totalMatRevealAsPctOfMaxA number between 0 and 100, usuallly between 10 and 25. Take the longest dimension of the framed image, and decide what percentage of that dimension should be mat.
defaultImageAspectRatioThis is a fallback number, in case bcSlideshow can’t figure out the aspect ratio of your images. Set this to 0.8, 0.714, 0.66 or whatever fits most of your images.
maxS— reserved for future use
imageOnClick
  • A value of 0 sets the slideshow do do nothing when the image is clicked.
  • A value of 1 sets the slideshow to go to the slideshow gallery in the current screen when the image is clicked.
  • A value of 2 sets the slideshow to bring up the slideshow gallery in a new window or window tab when the image is clicked. This could fail if the viewer has disabled popups in his/her browser.
maximizeEachImageSet this to true (no quotes) to maximize both horizontal and vertical image sizes when the slideshow container is rectangular, false if you want image dimensions to remain constant.
showHorizontalImagesSet this to true (no quotes) if you want the slideshow to show horizontal images, false otherwise. The default value is true.
showVerticalImagesSet this to true (no quotes) if you want the slideshow to show vertical images, false otherwise. The default value is true.
randomizeSet this value to true (no quotes) to randomize the slideshow sequence. There are costs involved, and sometimes it just will not work. When the slideshow is randomized, each time your viewer visits the page, the slideshow code must be downloaded. Normally, the browser retrieves the code from cache, which is much faster. Sometimes, the browser or server will still retrieve the code from cache, regardless. In this case, the slideshow will not be randomized. I do my best to insure randomization, but there are a lot of browser and server software developers out there trying to defeat me.
Previous configuration... Next configuration...