bcSlideshow

a javascript slideshow for photographer and artist websites


configuring bcSlideshow, single–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
  • galleryNameDivId
  • galleryDescriptionDivId
  • messageContainerId
  • prevButtonId
  • nextButtonId
  • runPauseButtonId
  • optionsButtonId
  • backButtonId
  • titleDivId
  • filenameDivId
  • iptc_titleDivId
  • descriptionDivId
  • optionsDivId
  • runLabel
  • pauseLabel
  • backgroundBorder
  • backgroundColor
  • backgroundShadow
  • frameMargin
  • frame
  • frameShadow
  • matColor
  • totalMatRevealAsPctOfMax
  • imageBorder
  • fadeInOpacityDelta
  • fadeOutOpacityDelta
  • crossFadeTimeDelta
  • imageChangeDelta
  • defaultImageAspectRatio
  • maxS
  • showTitleWhilePaused
  • showTitleWhileRunning
  • showFilenameWhilePaused
  • showFilenameWhileRunning
  • showIptcTitleWhilePaused
  • showIptcTitleWhileRunning
  • showDescriptionWhilePaused
  • showDescriptionWhileRunning
  • maximizeEachImage
  • showHorizontalImages
  • showVerticalImages
  • showLoadingMessage
  • randomize
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',
galleryNameDivIdIf an HTML <div> with a matching ID is found, it will be populated with the gallery name. You can style the <div> with CSS.
gallerDescriptionDivIdIf an HTML <div> with a matching ID is found, it will be populated with the gallery description. You can style the <div> with CSS.
messageContainerIdThis can be the same as the imageContainerId. It will be used to display loading and error messages. You can style the <div> with CSS. If you use a separate <div>, the static image will remain in the slideshow container when messages appear.
optionsDivIdIf an HTML <div> with a matching ID is found, it will be made visible when the options button is clicked. You can style the <div> with CSS, and you populate the <div> with the option choices you want the viewer to select from.
titleDivIdIf an HTML <div> with a matching ID is found, it will be populated with the title of the image. You may style this <div> with CSS.
filenameDivIdIf an HTML <div> with a matching ID is found, it will be populated with the filename (less extension) of the image. You may style this <div> with CSS.
iptc_titleDivIdIf an HTML <div> with a matching ID is found, it will be populated with the iptc_title (less "by photographer name") of the image. You may style this <div> with CSS. I include this option because the informaton is provided in the PhotoShelter RSS feed, but I don’t find it useful.
descriptionDivIdIf an HTML <div> with a matching ID is found, it will be populated with the description of the image. You may style this <div> with CSS. I include this option because the informaton is provided in the PhotoShelter RSS feed, but I don’t find it useful.
prevButtonIdIf an HTML button with a matching ID is found, it can be used to step to the previous image when the slideshow is paused. You may style this button with CSS, and you may change the label.
nextButtonIdIf an HTML button with a matching ID is found, it can be used to step to the next image when the slideshow is paused. You may style this button with CSS, and you may change the label.
runPauseButtonIdIf an HTML button with a matching ID is found, it can be used to begin or pause the slideshow. You may style this button with CSS.
optionsButtonIdIf an HTML button with a matching ID is found, it can be used to bring up the viewer options and return to the slideshow. You may style this button with CSS, and you may change the label.
backButtonIdIf an HTML button with a matching ID is found, it can be used to return to the PhotoShelter Gallery display. This button will be labeled with the gallery name. You may style this button with CSs.

I provide button label options for internationalizaton purposes.

runLabelThe button label will be changed from "Run" to this value.
pauseLabelThe button label will be changed from "Pause" to this value.
backgroundBorderUse CSS of the form "1px solid #000000" to style the border of your slideshow container. Use this option with caution, because changing the width of this <div> could alter your page layout. It is wiser to set the <div> border permanently when you design your page.
backgroundColorUs CSS of the form "black" or "#FFFFFF" to set the background color of the slideshow.
backgroundShadowUse CSS of the form "5px 5px 5px #000000" to style the shadow of your slideshow container. Use this option with caution, because changing this property of the <div> could alter your page layout. It is wiser to set this property permanently when you design your page.
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
showTitleWhilePausedSet this to true (no quotes) to show the image title while the slideshow is paused, false otherwise.
showTitleWhileRunningSet this to true (no quotes) to show the image title while the slideshow is running, false otherwise.
showFilenameWhilePausedSet this to true (no quotes) to show the image filename while the slideshow is paused, false otherwise.
showFilenameWhileRunningSet this to true (no quotes) to show the image filename while the slideshow is running, false otherwise.
showIptcTitleWhilePausedSet this to true (no quotes) to show the image iptc_title while the slideshow is paused, false otherwise.
showIptcTitleWhileRunningSet this to true (no quotes) to show the image iptc_title while the slideshow is running, false otherwise.
showDescriptionWhilePausedSet this to true (no quotes) to show the image description while the slideshow is paused, false otherwise.
showDescriptionWhileRunningSet this to true (no quotes) to show the image descripton while the slideshow is running, false otherwise.
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.
showLoadingMessageSet this to true (no quotes) if you want the slideshow to show a "Loading..." message. While this does tell the view that the slideshow is working, it could also overwrite any static images you may have in the message container. Set this value to false to suppress the message.
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 developers out there trying to defeat me.
Previous installation... Next configuration...