I'm trying to use an "img" in the "a" tag to launch my gallery, but I don't want that image displayed in the gallery. On IE9, instead of seeing my image contained in the launch anchor, I see one of the images from the gallery - apparently random since it isn't the first image - with the image I wanted to be in the anchor overlaid but very small. Here is the code I'm using:

<div class="floatbox" data-fb-options="group:irss2013">
    <a href="/images/Seminar/IRSS2013/keynote.PNG" title="IRSS 2013 Keynote Address" />
    <a href="/images/Seminar/IRSS2013/main.PNG" title="IRSS 2013 Main Classroom" />
    <a href="/images/Seminar/IRSS2013/price.PNG" title="IRSS 2013 Scope Class" />
    <a href="/images/Seminar/IRSS2013/service.PNG" title="IRSS 2013 Service Advisor Class" />
    <a href="/images/Seminar/IRSS2013/vendor_1.PNG" title="IRSS 2013 Vendor Booth" />
    <a href="/images/Seminar/IRSS2013/vendor_2.PNG" title="IRSS 2013 Vendor Booth" />
    <a href="/images/Seminar/IRSS2013/vendor_3.PNG" title="IRSS 2013 Vendor Booth" />
    <a href="/images/Seminar/IRSS2013/vendor_4.PNG" title="IRSS 2013 Vendor Booth" />
    <a href="/images/Seminar/IRSS2013/vendor_5.PNG" title="IRSS 2013 Vendor Booth" />
    <a href="/images/Seminar/IRSS2013/vendor_6.PNG" title="IRSS 2013 Vendor Booth" />
    <a href="/images/Seminar/IRSS2013/vendor_7.PNG" title="IRSS 2013 Vendor Booth" />
    <a href="/images/Seminar/IRSS2013/vendor_8.PNG" title="IRSS 2013 Vendor Booth" />
    <a href="/images/Seminar/IRSS2013/vendor_9.PNG" title="IRSS 2013 Vendor Booth" />
    <a href="/images/Seminar/IRSS2013/vendor_10.PNG" title="IRSS 2013 Vendor Booth" />
<a href="/images/Seminar/irss2013_post.png" data-fb-options="showThis:false doSlideshow:true group:irss2013 navType:both showNavOverlay:true">
<img src="/images/Seminar/irss2013_post.png" alt="IRSS gallery" title="Click for slideshow" />
</a>
</div>

Autoplay starts but stops after it reaches the second image. It displays the same way in Chrome but the behavior is even more bizarre - everything just disappears after attempting to load the first image!

www.ramac.com

At the top of the rightmost column is the gallery launcher.

<a> elements are not self-closing. The syntax <a ... /> is illegal HTML. You need a closing tag on <a> elements, such as <a href="keynote.PNG"></a>

Nice catch - Visual Studio thoughtfully did that for me and I didn't even notice it. However, that did not solve the problem. Any other suggestions? My options.js is basically unchanged, except for the addition of my licenses. I'm using the custom.css but all I did with that was change a couple of colors so they match the site. The floatbox CSS comes after all of my others so that should not be causing a conflict. These are the options I'm setting for the page.

fbPageOptions = {
    shadowType: 'halo',
    resizeDuration: 5.5,
    imageFadeDuration: 4.5,
    overlayFadeDuration: 0,
    navType: 'both',
    minBoxHeight: "500px",
    minBoxWidth: "700px",
    minContentHeight: 480,
    minContentWidth: 680,
    titleAsCaption: "a",
    colorTheme: "custom",
    newWindowLinkPos: "bl",
    captionPos: "tl",
    activateOnClick: true,
    showOuterClose: true,
    showClose: false
};

Ah-hah! It's because of the uppercase .PNG file extensions. Floatbox recognizes .png as an image, but not .PNG. Yours are being loaded as a gallery set of iframes. Either change the case of the file extensions or place type:image in the options for each one.

I love it when I see a post start with "Aha"! That fixed all of the problems except for one: The image contained in the anchor is still wrong. I've tried moving it to first place in the div, to last place, and outside the div.

What does "the image contained in the anchor is still wrong" mean? Which image? (They are all contained in anchors.) Wrong in what way?

I'm sorry, my mistake - it's all good now! Thanks so much for all of your help!