2

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 ) を見つけましたが、2 つのコードをまとめるのに苦労しています。私はちょうど Javascript と JQuery を学んでおり、スクリプトを組み合わせて 1 つとして機能させることができます。これまで試したことはすべて失敗しました。

$('.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();
4

1 に答える 1

0

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);
    });
});
于 2014-11-14T01:20:07.080 に答える