przepraszam, jeśli zostało to omówione tutaj. Próbowałem szukać, ale znalazłem tylko tematy związane ze stylizacją i pozycjonowaniem napisów w kodzie karuzeli…

Mam więc układ zawierający trzy kolumny:

Lewa kolumna zawiera ogólne informacje dotyczące każdej strony / projektu.Środkowa kolumna zawiera karuzelę Bootstrap 3 z obrazami.Prawa kolumna to miejsce, w którym planowałem wyświetlić wszystkie podpisy związane z obrazami w karuzeli środkowej.

Nie wiem, jak uzyskać napisy w prawej kolumnie. Aby wyjaśnić, podpisy zmieniają się wraz z każdym slajdem karuzeli, tak jak w domyślnym ustawieniu karuzeli. Zasadniczo chcę przenieść napisy z obrazu i do prawej kolumny.

Używam Kirby (www.getkirby.com) jako mojego systemu CMS i używam pętli foreach, aby uzyskać kod obrazów itp. W karuzeli. Oto mój obecny kod, w tym sekcja napisów (którą próbuję przenieść…)

<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 -->

Próbowałem najlepiej, ale nie mam pomysłów. Myślałem, że może mógłbym zrobić coś takiego, jak uczynić podpis zmienną:

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

ale to nie działa poza obszarem karuzeli. Zgaduję, że to nie zadziała poza pętlą foreach?

W każdym razie, jeśli ktoś ma jakieś sugestie, naprawdę bym to docenił. Uczę się PHP, ale nie znam żadnego javascripta, więc mam nadzieję, że istnieje rozwiązanie poza tym. I znowu używam Bootstrap 3.

Oto link do skrzypce, które zrobiłem (bez wszystkich rzeczy php…):

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