﻿/*jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({
    //loadingImage: 'images/facebox/loading.gif',
   // closeImage: 'images/facebox/closelabel.gif'
   // });

$('a[rel*=facebox-cap]').click(function() {
var caption = $(this).attr('title');
$('<div class="caption">' + caption + '</div>').insertAfter($
('.content')).show()
});
});

$(document).bind('close.facebox', function() {
$('.caption').remove();

})*/

$(document).ready(function() {
    $('a[rel*=facebox]').facebox();
    $('a[rel*=facebox-cap]').click(function() {
        var caption = $(this).attr('title');
        $('<div class="caption">' + caption + '</div>').insertAfter($
('.content')).show()
    });
});

$(document).bind('close.facebox', function() {
    $('.caption').remove();

}); 


/*

Before I go, here's an images only version that displays more
smoothly, displaying the caption after the image loads. Use
rel="facebox-cap" as above.

Have not tested how it combines with other bindings.

Script in the page:

<script type="text/javascript">

$(document).ready(function() {
$('a[rel*=facebox]').facebox();
$('a[rel*=facebox-cap]').mousedown(function() {
        var caption = $(this).attr('title');
        $().bind('reveal.facebox', function() {
                $('<p>' + caption + '</p>').appendTo('.image');
                });
                $().bind('close.facebox', function() {
                        $().unbind('reveal.facebox')
                });
        });

});

</script>

Caption is in a p rather than div, so a CSS example would be:

#facebox .image p {
        background: #777;
        color:#fff;
        text-align: center;
        margin: 0;
        padding:0.3em;
        } 

*/


/*

Very very very last one, pared down some more. For divs, images,
Ajaxes.

$(document).ready(function() {
$('a[rel*=facebox]').facebox();
$('a[rel*=facebox-cap]').mousedown(function() {
        var caption = $(this).attr('title');
        $().one('reveal.facebox', function() {
                $('<p class="caption">' + caption + '</p>').appendTo('.content');
                });
        });

});

Style this one with CSS selector #facebox p.caption 

*/
