title: Fancybox title / caption
body: <p>I'm very new to website design and can't write js scripts as yet.  My CSS is fairly basic.  I'm using FB 1.3.4 and it all works fine but I want to change the format of the image title / caption.</p>
  
  <p>I currently have this format:<br /> 
  "Image 1 of 10 This is the caption for this image. [Photo: a Smith]"</p>
  
  <p>What I want is this:<br/>
  "This is the caption for this image. [Photo: A Smith]<br/>
  Image 1 of 10"</p>
  
  <p>Note that the Image 1 of 10 is on a new line.  I would also like extra spaces between the end of the image caption and the [Photo: A Smith] although I can't work out how to show it here</p>
  
  <p>My script is:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          $(document).ready(function() {
              $(".fancybox").fancybox({
                      'transitionIn'      : 'none',
                      'transitionOut'     : 'none',
          'overlayColor'      : '#000000',
          'overlayOpacity'    : '0.90',
                      'titlePosition'     : 'over', 
                      'titleFormat'       : function(title, currentArray, currentIndex, currentOpts) {
                      return '&lt;span id="fancybox-title-over"&gt;Image ' + (currentIndex + 1) + ' of ' + currentArray.length + (title.length ? ' &amp;nbsp; ' + title : '') + '&lt;/span&gt;';
                      }
          });
      });
      &lt;/script&gt;
  </code></pre>
  
  <p>My CSS for fancybox-title-over is:</p>
  
  <pre><code>.fancybox-title-over {
  position: absolute;
  bottom: 0;
  left: 0;
  color: #FFF;
  text-align: left;
  </code></pre>
  
  <p>}</p>
  
  <p>I know that I need to alter titlePosition to 'inside' but can't get beyond that!  Can anyone help me with this?  Many thanks.</p>