bcSlideshow

a javascript slideshow for photographer and artist websites


installing bcSlideshow on a PhotoShelter web page

This tutorial lists the steps you should follow to install the most basic version of bcSlideshow on one of your manually-customized PhotoShelter 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 the following pages:

  • the home page ( e.g. bryancox.photoshelter.com )
  • custom page 1 ( e.g. bryancox.photoshelter.com/page1 )
  • custom page 2 ( e.g. bryancox.photoshelter.com/page2 )
  • the about page ( e.g. bryancox.photoshelter.com/about )
  • the portfolio page ( e.g. bryancox.photoshelter.com/portfolio )

bcSlideshow may work on other pages, but I haven’t tested them all.

Note: bcSlideshow will NOT work on the gallery-slideshow page. PhotoShelter scripts that run against that page prohibit this. Besides, why not keep that page in your pocket? You might want to use a flash slideshow some time — or even give your viewers a choice.

If you have a flash slideshow running on your PhotoShelter web page, you must disable or remove it. To disable it, replace the widget double–brackets with opening and closing comment tags. I suggest you make a backup of your existing code ( just copy & paste it into a text file ), then delete the widget. The slideshow widget looks like this:

[[gallery_slideshow ... ]]

where ... could be any of the slideshow options.

A disabled widget looks like this:

<!––gallery_slideshow––>

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:

<!––gallery_slideshow––>

<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 demo... Next installation...