Search code examples
jqueryjquery-pluginscyclecycle-plugin

Display image title with jQuery Cycle Plugin?


I am trying to make the image title display at the same time the image appears, it currently appears right after the image does, using the :after option, code looks like this, Any ideas how I can make the title show up in sync with the image? Thank you! Copy code

     $(document).ready(function() {
              $('#home_gallery').before('<ul class="gallery-nav">').cycle({
                  fx:     'fade',
                  speed:  '1000',
                  timeout: 6000,
                  pager:  '.gallery-nav',
                  slideExpr: 'img',
                  after:   addTitle
              });

           function addTitle() {
                  var name = $(this).attr('alt');

                  $('.gallery-title').text(name);
              }

Solution

  • Use before instead of after

    $('#home_gallery').before('<ul class="gallery-nav">').cycle({
        ...
        before: addTitle
        ...
    });
    

    btw. addTitle can be optimized (removed unneeded variable declaration and unneeded jQuery wrapping)

    function addTitle() {
        $('.gallery-title').text(this.alt);
    }