Question

我正在使用Fotorama（www.fotorama.io）Jquery插件构建网站。我一直在使用此代码生成自定义缩略图（jsfiddle）：

 $('.thumbs').each(function () {
  $('a', this).each(function () {
    var $a = $(this);
    // set ids, will use them later
    $a.attr({id: $a.attr('href').replace(/[\/\.-]/g, '')});
  });

  var $thumbs = $(this),
      $fotorama = $thumbs.clone();

  $fotorama
      .on('fotorama:show', function (e, fotorama) {
        // pick the active thumb by id
        $('#' + fotorama.activeFrame.id)
            .addClass('active')
            .siblings()
            .removeClass('active');
      })
      .addClass('fotorama')
      .removeClass('thumbs')
      .insertAfter(this)
      .fotorama({nav: false, width: '100%', maxHeight: 400, ratio: 3/2});

  // get access to the API
  var fotorama = $fotorama.data('fotorama');

  $thumbs.on('click', 'a', function (e) {
    e.preventDefault();
    // show frame by id
    fotorama.show(this.id);
  });
});

此代码效果很好，但我还需要自定义标题。我找到了以下代码（jsfiddle），但我正在努力将两位代码放在一起。我只是学习Javascript和JQuery，可以用手将脚本组合起来。到目前为止，我所尝试的一切都失败了。

$('.fotorama')
  .on('fotorama:show', function (e, fotorama) {    
    fotorama.$caption = fotorama.$caption || $(this).next('.fotorama-caption');
    var activeFrame = fotorama.activeFrame;
    fotorama.$caption.html(
      '<strong>' + activeFrame.title + '</strong><br>'
      + activeFrame.author
    );
  })
  .fotorama();

Answer 1

在isherwood的帮助下解决。请在此处找到解决方案http://jsfiddle.net/vCUC2/97/

$('.thumbs').each(function () {
    $('a', this).each(function () {
        var $a = $(this);
        // set ids, will use them later
        $a.attr({
            id: $a.attr('href').replace(/[\/\.-]/g, '')
        });
    });

    var $thumbs = $(this),
        $fotorama = $thumbs.clone();

    $fotorama.on('fotorama:show', function (e, fotorama) {
        // pick the active thumb by id
        $('#' + fotorama.activeFrame.id)
            .addClass('active')
            .siblings()
            .removeClass('active');

        var activeFrame = fotorama.activeFrame;
        fotorama.$caption = fotorama.$caption || $(this).next('.fotorama-caption');
        fotorama.$caption.html(
            'Title: <strong>' + activeFrame.title + '</strong><br>Caption: ' + activeFrame.author);
    })
        .addClass('fotorama')
        .removeClass('thumbs')
        .insertAfter(this)
        .fotorama({
        nav: false,
        width: '100%',
        maxHeight: 400,
        ratio: 3 / 2
    });

    // get access to the API
    var fotorama = $fotorama.data('fotorama');

    $thumbs.on('click', 'a', function (e) {
        e.preventDefault();
        // show frame by id
        fotorama.show(this.id);
    });
});

使用Fotorama api获取自定义缩略图和标题

1 个答案: