Question

我编写了一个fancybox代码，用于在灯箱视图中显示带有图像标题和音频的图库。但只有当我们悬停灯箱图像时才会显示标题和音频。我希望两者（标题和音频）都能正常显示。这是我的代码：

$(document).ready(function() {
  $('.fancybox').fancybox({
    helpers: {
      title: {
        type: 'over'
      }
    },
    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();
      });
    }
  });
});

.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;
}

<!-- 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. " 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 -->

Answer 1

你想要这样的东西吗？ See this fiddle

我在fancybox函数中删除了您的悬停事件：

$(document).ready(function() {
  $('.fancybox').fancybox({
    helpers: {
      title: {
        type: 'over'
      }
    },
    afterShow: function(index) {
      var currentItem = $('.thumbnail').eq(this.index);
      var audioHtml = currentItem.attr('audio-html');
      $(".fancybox-title").hide();

      $(".fancybox-title").stop(true, true).slideDown(200);

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

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

我还在CSS中添加了这个来修改fancybox prev和next按钮的位置：

.fancybox-next { right: -45px !important; }
.fancybox-prev { left: -45px !important; }

如何删除悬停音频播放和标题

1 个答案: