desculpas se isso foi coberto em qualquer lugar aqui. Tentei pesquisar, mas encontrei apenas tópicos relacionados a estilo e posicionamento de legendas no código do carrossel ...

Então, eu tenho um layout que contém três colunas:

A coluna da esquerda contém informações gerais relacionadas a cada página / projeto.A coluna central contém um carrossel Bootstrap 3 com imagens.A coluna da direita é onde eu estava planejando exibir todas as legendas relacionadas às imagens no centro do carrossel.

Eu não consigo descobrir como fazer as legendas funcionarem na coluna da direita. Para esclarecer, as legendas serão alteradas com cada slide do carrossel, assim como na configuração padrão do carrossel. Eu basicamente quero mover as legendas da imagem e colocá-las na coluna da direita.

Estou usando o Kirby (www.getkirby.com) como meu CMS e estou usando um loop foreach para obter o código das imagens, etc. no carrossel. Aqui está o meu código atual, incluindo a seção de legenda (que estou tentando mover…)

<div id="center" class="col-xs-12 col-sm-6 col-md-8">
    <?php $imagepage = $page->children()->first() ?>
    <?php if($imagepage->hasImages()): ?> 
    <div id="merry-go-round" class="carousel slide">
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <?php $n=0; foreach($imagepage->images() as $image): $n++; ?>               
            <div class="item<?php if($n==1) echo ' active' ?>">
                <img style="display:block; margin-left: auto; margin-right: auto;" src="<?php echo $image->url() ?>" alt="<?php echo html($image->title()) ?>" class="img-responsive">
                <div class="carousel-caption"><?php echo $image->img_title() ?></div>
            </div>
    <?php endforeach ?>
    <?php endif ?>
        </div><!-- /carousel-inner -->
        <!-- Controls -->
        <a class="left carousel-control" href="#merry-go-round" data-slide="prev"></a>
        <a class="right carousel-control" href="#merry-go-round" data-slide="next"></a>
    </div><!-- /merry-go-round -->
</div><!-- /#center -->

<div id="right" class="col-xs-12 col-sm-3 col-md-2">
    <p>THIS IS WHERE I AM TRYING TO PUT THE CAROUSEL CAPTIONS…</p>
</div><!-- /#right -->

Eu tentei da melhor forma, mas estou sem idéias. Eu pensei que talvez eu pudesse fazer algo como tornar a legenda uma variável:

<?php $test_caption = $image->img_title() ?><?php echo $test_caption ?>

mas isso não funciona fora da área do carrossel. Eu estou supondo que não funcionará fora do loop foreach?

De qualquer forma, se alguém tiver alguma sugestão, eu realmente aprecio isso. Eu estou aprendendo PHP como eu vou junto, mas eu não conheço nenhum javascript, então eu estou esperando que haja uma solução fora disso. E mais uma vez, estou usando o Bootstrap 3.

Aqui está um link para um violino que eu fiz (sem todo o material do php…):

http://jsfiddle.net/4tMfJ/2/