Content Flow and Shadow Box not working in Firefox

Question

I am using the ContentFlow JS script (http://www.jacksasylum.eu/ContentFlow/index.php) and I am also using a ShadowBox (http://www.shadowbox-js.com/index.html) AddOn.

http://salts-studios.com/resources/contentflow/

The ContentFlow works fine, but when you click the image it doesn't load the ShadowBox.

I don't say this very often, but in IE9 it works fine :)

As the ShadowBox JS is compressed there isn't a lot I can really look at. The only thing I have to go on in "aG is undefined" from firebug.

I have tried downloading ShadowBox standalone, but also with the jQuery adapter. The same happens with both.

Any body any ideas?

Thanks in advance.

Answer 1

If you plan only on show images from your own domain, you have the correct options in your version of Shadowbox. However if you need something more than that, you will need to re-download Shadowbox with the Base Adapter, CSS Selectors, and I recommend All Players until you discover what you don't need.

Then, you will need to install Shadowbox correctly. I noticed on your installation you changed the name of the shadowbox.js file, please change to default name because Shadowbox looks for that file by name.

Also, you used the Shadowbox demo's method to initialize Shadowbox which you don't need. Instead, review the correct format:

<!-- Install Shadowbox -->
<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css" />
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>

<!-- Initialize Shadowbox -->
<script type="text/javascript">

    Shadowbox.init();

</script>

Next, update your HTML as follows since Shadowbox works with anchor tags, not img tags. Your CSS styling may affect proper operation, so work with the pic0.jpg until Shadowbox opens and displays the image. Ideally, use an image very different from the others so it's easy to spot.

  <div class="item">
    <a href="pics/pic0.png" rel="shadowbox" title="Optional Shadowbox Title">
      <img class="content" src="pics/pic0.png"/>
    </a>
    <div class="caption">pic0: some stripes</div>
  </div>

The above anchor link can contain a HD version of your image while the pic0.png is sized for the flow player. If you have any other questions or need help, just ask.