bcSlideshow

a javascript slideshow for photographer and artist websites


installing bcSlideshow to run multiple slideshows on a single page

This tutorial lists the steps you should follow to turn a basic installation of bcSlideshow into a multi–slideshow. It’s really pretty easy.

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

First, follow the instructions to install a basic, single–slideshow version on your web page.

You can find those instructions here for your personal web site, and here for your PhotoShelter web pages.

The multi–slideshow version of bcSlideshow doesn’t display titles and descriptions; it doesn’t employ buttons; and it doesn’t provide for viewer configurations. So, you should remove those divs and buttons from the page, if you’ve installed them.

Now, add additional HTML divs, one for each slideshow. They can be any size or shape, but they must be positioned relative, they must have pixel-resolvable dimensions, and they must have unique ids:

Here’s an acceptable CSS style definition:

<style type="text/css">
  #slideshow1, #slideshow2, #slideshow3 { position: relative; height: 200px; width: 300px; }
  #slideshow4 { position: relative; height: 300px; width: 200px; }
</style>

And here are the div definitions:

<div id="slideshow1"></div>
<div id="slideshow2"></div>
<div id="slideshow3"></div>
<div id="slideshow4"></div>

Now, just copy and paste the original javascript control stanza until you have four of them. Be sure to separate them with commas, and change the galleryId and imageContainerId:

Here’s the minimum control object you’ll need. Notice that each imageContainerId property matches an ID of one of the divs you built for the slideshow, and each galleryId is different:

<script type="text/javascript">
  var bcConfig = [
  {  galleryId : 'G0000oeUb_BbHm5E',
    imageContainerId : 'slideshow1'
  },
  {  galleryId : 'G0000g0q2p_biwS8',
    imageContainerId : 'slideshow2'
  },
  {  galleryId : 'G0000ALq.EmyyaT0',
    imageContainerId : 'slideshow3'
  },
  {  galleryId : 'G0000qjg66bFDpak',
    imageContainerId : 'slideshow4'
  }];
</script>

That’s all it takes! Just leave the original javascript call to bryancox.com in place, and bcSlideshow will start up in multi–slideshow mode when you view your web page.

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

<style type="text/css">
  #slideshow1, #slideshow2, #slideshow3 { position: relative; height: 200px; width: 300px; }
  #slideshow4 { position: relative; height: 300px; width: 200px; }
</style>

<div id="slideshow1"></div>
<div id="slideshow2"></div>
<div id="slideshow3"></div>
<div id="slideshow4"></div>

<script type="text/javascript">
  var bcConfig = [
  {  galleryId : 'G0000oeUb_BbHm5E',
    imageContainerId : 'slideshow1'
  },
  {  galleryId : 'G0000g0q2p_biwS8',
    imageContainerId : 'slideshow2'
  },
  {  galleryId : 'G0000ALq.EmyyaT0',
    imageContainerId : 'slideshow3'
  },
  {  galleryId : 'G0000qjg66bFDpak',
    imageContainerId : 'slideshow4'
  }];
</script>

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