javascript - 如何在fancybox灯箱中为每张幻灯片添加音频

我写了一段代码，以在幻灯箱灯箱中幻灯片显示图像。当我将鼠标悬停在灯箱图像上时，幻灯片标题和音频将显示，并且音频开始自动播放。对于具有相同标题和音频文件的每张幻灯片，其效果都很好。但我想为每个幻灯片显示不同的标题和音频。我不知道如何为每个幻灯片添加音频文件。
这是我的代码：

   <!-- Latest compiled and minified CSS -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" media="screen">
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>

<div class="container">
<div class="row">
    <div class='list-group gallery'>
        <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
              <a class="thumbnail fancybox" rel="ligthbox" href="http://placehold.it/1300x1000.png" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie arcu ut augue mattis mollis. Praesent laoreet lobortis neque. Duis sed gravida dolor. ">
                <img class="img-responsive" alt="" src="http://placehold.it/320x320" />
                <div class='text-right'>
                    <small class='text-muted'>Image Title</small>
                </div> <!-- text-right / end -->
            </a>
        </div> <!-- col-6 / end -->
        <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
              <a class="thumbnail fancybox" rel="ligthbox" href="http://placehold.it/1300x1000.png" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie arcu ut augue mattis mollis. Praesent laoreet lobortis neque. Duis sed gravida dolor. ">
                <img class="img-responsive" alt="" src="http://placehold.it/320x320" />
                <div class='text-right'>
                    <small class='text-muted'>Image Title</small>
                </div> <!-- text-right / end -->
            </a>
        </div> <!-- col-6 / end -->
        <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
              <a class="thumbnail fancybox" rel="ligthbox" href="http://placehold.it/1300x1000.png" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie arcu ut augue mattis mollis. Praesent laoreet lobortis neque. Duis sed gravida dolor. ">
                <img class="img-responsive" alt="" src="http://placehold.it/320x320" />
                <div class='text-right'>
                    <small class='text-muted'>Image Title</small>
                </div> <!-- text-right / end -->
            </a>
        </div> <!-- col-6 / end -->
  <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
              <a class="thumbnail fancybox" rel="ligthbox" href="http://placehold.it/1300x1000.png" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie arcu ut augue mattis mollis. Praesent laoreet lobortis neque. Duis sed gravida dolor. ">
                <img class="img-responsive" alt="" src="http://placehold.it/320x320" />
                <div class='text-right'>
                    <small class='text-muted'>Image Title</small>
                </div> <!-- text-right / end -->
            </a>
        </div> <!-- col-6 / end -->
        </div> <!-- list-group / end -->
        </div> <!-- row / end -->
        </div> <!-- container / end -->

<style type="text/css">
.gallery
{
display: inline-block;
margin-top: 20px;
}

.fancybox-opened .fancybox-title{
 background: #fff;
 color: #000;
 border: 18px solid #000;
 width: 100%;
 margin-bottom: 98px;
 }

  .audiofile{
  border: 10px solid #000;
  padding: 14px;
  position: relative;;
  top: -98px;
  }
 </style>
<script type="text/javascript" >

  $(document).ready(function(){
  $('.fancybox').fancybox({
   helpers: {
   title : {
    type : 'over'
   }
  },
  afterShow : function() {
   $(".fancybox-title").hide();
   $(".fancybox-wrap").hover(function() {
     $(".fancybox-title").stop(true,true).slideDown(200);

     var toolbar = $("<div/>").addClass("audiofile");

    toolbar.html(" <audio autoplay='autoplay' controls='controls'><source src='https://ia802508.us.archive.org/5/items/testmp3testfile/mpthreetest.mp3' /></audio> ");
    $(".fancybox-title").after(toolbar);


    }, function() {
     $(".fancybox-title").stop(true,true).slideUp(200);
     $(".audiofile").remove();
   });
  }

 });
});

最佳答案

您可以获取当前项目并从HTML中读取例如audio-html属性：

HTML：

<div class="container">
  <div class="row">
    <div class='list-group gallery'>
      <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
        <a class="thumbnail fancybox" rel="ligthbox" href="http://placehold.it/1300x1000.png" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie arcu ut augue mattis mollis. Praesent laoreet lobortis neque. Duis sed gravida dolor. " audio-html="<audio autoplay='autoplay' controls='controls'><source src='https://archive.org/download/melody2007/bandaar15-megaprincipenegro.mp3'/></audio>">
          <img class="img-responsive" alt="" src="http://placehold.it/320x320" />
          <div class='text-right'>
            <small class='text-muted'>Image Title</small>
          </div>
          <!-- text-right / end -->
        </a>
      </div>
      <!-- col-6 / end -->
      <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
        <a class="thumbnail fancybox" rel="ligthbox" href="http://placehold.it/1300x1000.png" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie arcu ut augue mattis mollis. Praesent laoreet lobortis neque. Duis sed gravida dolor. " audio-html="<audio autoplay='autoplay' controls='controls'><source src='https://archive.org/download/melody2007/bandazouklouw-sonholindo.mp3'/></audio>">
          <img class="img-responsive" alt="" src="http://placehold.it/320x320" />
          <div class='text-right'>
            <small class='text-muted'>Image Title</small>
          </div>
          <!-- text-right / end -->
        </a>
      </div>
      <!-- col-6 / end -->
      <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
        <a class="thumbnail fancybox" rel="ligthbox" href="http://placehold.it/1300x1000.png" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie arcu ut augue mattis mollis. Praesent laoreet lobortis neque. Duis sed gravida dolor. " audio-html="<audio autoplay='autoplay' controls='controls'><source src='https://archive.org/download/melody2007/brunoetrio-rubi.mp3'/></audio>">
          <img class="img-responsive" alt="" src="http://placehold.it/320x320" />
          <div class='text-right'>
            <small class='text-muted'>Image Title</small>
          </div>
          <!-- text-right / end -->
        </a>
      </div>
      <!-- col-6 / end -->
      <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
        <a class="thumbnail fancybox" rel="ligthbox" href="http://placehold.it/1300x1000.png" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie arcu ut augue mattis mollis. Praesent laoreet lobortis neque. Duis sed gravida dolor. " audio-html="<audio autoplay='autoplay' controls='controls'><source src='https://archive.org/download/melody2007/bandaamorperfeito-aovivo-01-lovelouco.mp3'/></audio>">
          <img class="img-responsive" alt="" src="http://placehold.it/320x320" />
          <div class='text-right'>
            <small class='text-muted'>Image Title</small>
          </div>
          <!-- text-right / end -->
        </a>
      </div>
      <!-- col-6 / end -->
    </div>
    <!-- list-group / end -->
  </div>
  <!-- row / end -->
</div>
<!-- container / end -->

JS：

afterShow: function(index) {
  var currentItem = $('.thumbnail').eq(this.index);
  var audioHtml = currentItem.attr('audio-html');
  $(".fancybox-title").hide();
  $(".fancybox-wrap").hover(function() {
    $(".fancybox-title").stop(true, true).slideDown(200);

    var toolbar = $("<div/>").addClass("audiofile");

    toolbar.html(audioHtml);
    $(".fancybox-title").after(toolbar);

  }, function() {
    $(".fancybox-title").stop(true, true).slideUp(200);
    $(".audiofile").remove();
  });
}

CODEPEN