Javascript 如何在fancybox lightbox中为每张幻灯片添加音频

我已经写了一个代码来在fancybox lightbox中幻灯片显示图像。当我悬停lightbox图像时，幻灯片和音频将显示，音频开始自动播放。它适用于所有标题和音频文件相同的幻灯片。但我想为每张幻灯片显示不同的标题和音频。我不知道如何为每张幻灯片添加音频文件。 这是我的密码：

   <!-- 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();
   });
  }

 });
});

.画廊
{
显示：内联块；
边缘顶部：20px；
}
.fancybox已打开。fancybox标题{
背景：#fff；
颜色：#000；
边框：18px实心#000；
宽度：100%；
边缘底部：98px；
}
.音频文件{
边框：10px实心#000；
填充：14px；
职位：相对；；
顶部：-98px；
}
$（文档）.ready（函数（）{
$（'.fancybox'）。fancybox({
助手：{
标题：{
键入：“结束”
}
},
afterShow:function（）{
$（“.fancybox title”）.hide（）；
$（“.fancybox wrap”）.hover（函数（）{
$（“.fancybox title”）.stop（true，true）.slideDown（200）；
var toolbar=$（“”）.addClass（“音频文件”）；
html（“”）；
$（.fancybox title”）。之后（工具栏）；
}，函数（）{
$（“.fancybox title”）.stop（true，true）.slideUp（200）；
$（“.audiofile”）.remove（）；
});
}
});
});

---

您可以从html获取当前项目并读取例如

音频html

属性：

HTML:

JS:

afterShow:函数（索引）{
var currentItem=$（'.thumbnail'）.eq（此.index）；
var audioHtml=currentItem.attr（'audio-html'）；
$（“.fancybox title”）.hide（）；
$（“.fancybox wrap”）.hover（函数（）{
$（“.fancybox title”）.stop（true，true）.slideDown（200）；
var toolbar=$（“”）.addClass（“音频文件”）；
html（audioHtml）；
$（.fancybox title”）。之后（工具栏）；
}，函数（）{
$（“.fancybox title”）.stop（true，true）.slideUp（200）；
$（“.audiofile”）.remove（）；
});
}

---

你能帮帮我吗。。如何在动态中执行此操作。。我的意思是使用db中的动态php值。。例如动态幻灯片标题和音频文件。没办法，我不是PHP的家伙。

<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 -->

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();
  });
}