Изображение Flexslider ‹li›, динамически сгенерированное php. Попытка создать подписи с помощью альтернативного текста

У меня есть установка vanilla flexslider на моем сайте. Ползунок работает, циклически перемещаясь по элементам списка в неупорядоченном списке. Вы можете добавлять заголовки, просто добавляя контейнер заголовков после элемента списка. Это хорошо работает с жестко закодированными изображениями.

Проблема, с которой я столкнулся, заключается в том, что на моем сайте есть несколько разделов с разными слайд-шоу для каждого раздела. Вместо жесткого кодирования элементов li я генерирую их с помощью php, так что, когда пользователь посещает страницу, php определяет, какую страницу просматривает пользователь, и передает ее в слайд-шоу. Затем слайд-шоу находит правильный каталог изображений и загружает все изображения в этом каталоге, будь то два или двадцать. Это намного проще, чем жестко кодировать каждое слайд-шоу, и работает прекрасно.

    <?php
        $dh = "image/slideShows/$slideShow/";
        $images = glob($dh . "*.jpg");                       
        foreach($images as $image){
            ?><li><img src="<?php echo $image;?>" alt="caption text" /></li><?php
        }
        closedir($dh);
    ?>

Мне нужно, чтобы flexslider читал замещающий текст для каждого динамически сгенерированного изображения, а затем помещал его в контейнер подписи:

    <p class="caption">The alt text should show up here.</p>

Я пробовал использовать:

    $(window).load(function() {
      $('.flexslider').flexslider({
        animation: "fade",
        controlsContainer: "#slideShowContainer",
        start: function(slider) {
         $('.caption').html(this.alt);
        },
      });
    });

и безрезультатно играл с current.slide flexslider. Я искал это всю ночь, и я не могу понять это. Я надеюсь, что кто-то здесь может предоставить недостающую ссылку для меня.

Заранее спасибо.

РЕДАКТИРОВАТЬ: я понял это, и это был серьезный вопрос чрезмерного усложнения. Все, что мне нужно было сделать, это вызвать данные EXIF, которые я использовал для атрибута «alt» внутри подписи. Я понятия не имею, почему мне потребовалось так много времени, чтобы понять это. Спасибо вам обоим за помощь!


person Rob    schedule 26.06.2012    source источник
comment
Правильно ли я думаю, что контейнер заголовка должен быть внутри li? Вы также создаете тег заголовка p с помощью php? если нет, вы можете попробовать это внутри start: $(this).after('<p class=caption>'+this.alt+'</p>'). В противном случае проверьте, что this внутри start - это то, что вы думаете.   -  person Thomas    schedule 26.06.2012
comment
Я получаю тот же результат независимо от того, находится ли контейнер заголовка внутри li. Я попробовал код, который вы предоставили, и он не дает никакого результата. Я не знаю, что это в start на самом деле выбирает изображение.   -  person Rob    schedule 26.06.2012
comment
вы можете узнать, позвонив console.log(this) и открыв в браузере с помощью консоли (например, Chrome, нажав Ctrl + J, или Firefox с Firebug)   -  person Thomas    schedule 26.06.2012
comment
Хорошо, я запустил журнал следующим образом: start: function(slider){console.log(this) }, и он говорит мне, что селектор .slides li, поэтому внутри запуска я запустил $('caption').append('<p class=caption>'+$(this).find('img').attr("alt")+'</p>'); вместе с несколькими различными способами его вызова и добавления, и моя подпись отображается как неопределенная. Я также пробовал src вместо alt, и я получаю тот же результат.   -  person Rob    schedule 26.06.2012
comment
Что вы подразумеваете под селектором .slides li? является ли this строкой селектора, а не объектом? В любом случае, это не должно быть $(this).append(...)?   -  person Thomas    schedule 26.06.2012


Ответы (2)


Похоже, у вас есть только одна коробка .caption? И вы хотите, чтобы его содержимое менялось с каждым слайдом?

Я бы попробовал что-то вроде:

before: function(slider) {
        var slideNumber = slider.currentSlide;
        var alt = $('.slides img').eq(slideNumber).attr('alt');
        $('.caption').html('<p>' + alt + '</p>');
    });
},

обратите внимание, что before запускается при каждом переходе между слайдами, а не только один раз, как start

Изменить

OP скорректировал приведенный выше код (см. комментарии ниже), но по-прежнему имеет «проблему, упомянутую в комментарии, когда первое изображение не получает подписи во втором и последующих прокрутках».

Возможно, нам следует использовать after вместо before? Таким образом, нам не нужно делать slideNumber+1 (поскольку before делал это на предыдущем слайде. Возможно, вы можете удалить функцию start в пользу того, чтобы просто делать это над вызовом flexslider

в $(window).load(function(){ или (document).ready(){:

    var alt = $('.slides img').eq(0).attr('alt'); 
    $('.caption').html('<p>' + alt + '</p>'); 

и в течение flexslider()

after:function(slider) { 
    var slideNumber = slider.currentSlide; 
    var alt = $('.slides img').eq(slideNumber).attr('alt'); 
    $('.caption').html('<p>' + alt + '</p>'); 
},
person Zach Lysobey    schedule 26.06.2012
comment
Так близко. Проблема только в том, что первый слайд не имеет подписи, а последующие слайды отличаются на единицу, т. е. слайд 1 = пустой, слайд 2 = слайд 1, слайд 3 = слайд 2 и так далее. Я пытался изменить перед тем, как начать, и, как вы сказали, он срабатывает только один раз. Затем я попытался добавить второй вызов, первый из которых был start, а второй — раньше. Я также добавил +1 .eq(slidenumber+1), чтобы выровнять ситуацию. Это хорошо работает для первого слайда и на протяжении всего цикла, пока мы не вернемся к первому слайду, который затем будет помечен как undefined. - person Rob; 27.06.2012
comment
Мой код теперь выглядит так: start: function(slider) { var slideNumber = slider.currentSlide; var alt = $('.slides img').eq(slideNumber).attr('alt'); $('.caption').html('<p>' + alt + '</p>'); }, before: function(slider) { var slideNumber = slider.currentSlide; var alt = $('.slides img').eq(slideNumber+1).attr('alt'); $('.caption').html('<p>' + alt + '</p>'); }, - person Rob; 27.06.2012
comment
извините, отсутствовал у моего компьютера на некоторое время. Вроде все понял? - person Zach Lysobey; 27.06.2012
comment
Ну, я понял, что слишком усложнял это, и мне не нужно было использовать функции jQuery, чтобы делать то, что я хотел. Однако ваш ответ привел меня туда, куда я пытался пойти. - person Rob; 27.06.2012
comment
рад это слышать ;-). Окончательный код в вашем комментарии выше? Возможно, мне следует отредактировать это в ответе на всякий случай... - person Zach Lysobey; 27.06.2012
comment
Этот код самый дальний, который я получил, хотя он все еще страдает от проблемы, упомянутой в комментарии, когда первое изображение не получает подписи на втором и последующих прокрутках. - person Rob; 27.06.2012

person    schedule
comment
Привет! Добро пожаловать в stackoverflow! Хотя это может быть правильный ответ, я думаю, что сначала нужно небольшое объяснение. Возможно, описание, объясняющее, что ОП (оригинальный постер) сделал неправильно. Или вы могли бы просто объяснить, чем отличается ваш ответ. - person Parris; 02.12.2012