bcSlideshow

a javascript slideshow for photographer and artist websites


installing bcSlideshow on your personal web pages

This tutorial lists the steps you should follow to install the most basic version of bcSlideshow on one of your non-PhotoShelter hosted web pages.

Before you begin, you must be aware that bcSlideshow gets information about your images from the PhotoShelter RSS feeds for your galleries. RSS feeds must be enabled; and if you want to display titles, the title fields in your archived images must be populated.

You should have a basic understanding of HTML and CSS markup.

bcSlideshow works well on almost any normal web page, however, you should avoid placing the slideshow in areas where

  • the z-index style is dynamically changed.
  • the visibility style is dynamically changed.
  • the display style is dynamically changed.

bcSlideshow runs within an HTML div tag. It’s nice to place an image within the div so the viewer has something to look at while the slideshow is loading; but when the slideshow begins, bcSlideshow takes nearly complete control of the area within the div borders. (I do give you some control of things like fonts, etc., via CSS classes. )

As a compromise between viewability, image loading speed, and image security, I suggest you limit the maximum size of the images bcSlideshow displays to 600 pixels on the longest side; but you choose the maximum possible value when you purchase your license. In practice, you can make the div 5–10% larger than the maximum you specify in your order without noticible degradation. As an aside about security, anything smaller that 200 pixels on a side will be displayed without a watermark. Anything larger than 200 pixels will be displayed with watermarks if you have that feature enabled in your PhotoShelter account.

You may place the div anywhere on the page, and you may make it any shape. Later, when we customize the configuration, you can choose whether to show only horizontal images, vertical images, or both.

The div must have an ID, and that ID must match the "imageContainerId" property in the configuration object.

Here’s an acceptable div definition:

<div id="imageContainerDiv"></div>

The slideshow div must be styled with the following attributes. You can add others via CSS styles or via the slideshow configuration object.

  • position: relative;
  • a height resolvable to pixels. height:100% will not work in tables, but will work if the parent div has a height defined in pixels.
  • a width resolvable to pixels. width:100% will not work in tables. width:20pt will not work.

Here’s an acceptable CSS style definition:

<style type="text/css">
  #imageContainerDiv { position: relative; height: 640px; width: 640px; }
</style>

The control object for bcSlideshow is a bit of javascript code. The important thing to remember is that you must not change the punctuation. You also don’t want to change anything to the left of the colons.

Here’s the minimum control object you’ll need. Notice that the imageContainerId property matches the ID of the div you built for the slideshow:

<script type="text/javascript">
  var bcConfig = [{
    galleryId : 'G0000oeUb_BbHm5E',
    imageContainerId : 'imageContainerDiv',
  }];
</script>

The galleryId property identifies the gallery for the slideshow. You can find it most easily by looking at the last field in your gallery URL. Here’s mine: "http://bryancox.photoshelter.com/gallery/American-Southwest-Plants/G0000oeUb_BbHm5E/".

Finally, you must insert a script tag to call bcSlideshow:

<script type="text/javascript" src="http://bryancox.com/cgi-bin/bcSlideshow1PS.cgi?11PS00000" defer="defer"></script>

Buried in the string above will be your bcSlideshow license ID. Mine is "11PS00000".

And that’s it! Your slideshow should start whenever you call the page!

In summary, here‘s all the code you need to get a basic slideshow up and running:

<style type="text/css">
  #imageContainerDiv { position: relative; height: 640px; width: 640px; }
</style>

<div id="imageContainerDiv"></div>

<script type="text/javascript">
  var bcConfig = [{
    galleryId : 'G0000oeUb_BbHm5E',
    imageContainerId : 'imageContainerDiv',
  }];
</script>

<script type="text/javascript" src="http://bryancox.com/cgi-bin/bcSlideshow1PS.cgi?11PS00000" defer="defer"></script>
Previous installation... Next installation...