How to Hover Audio-Play und Titel entfernen

Question

Ich habe einen Fancybox-Code geschrieben, um eine Galerie mit Bildtitel und Audio in Lightbox anzeigen anzuzeigen. aber Titel und Audio werden nur angezeigt, wenn wir das Leuchtpultbild bewegen. Ich möchte beide (Titel und Audio) normal anzeigen. Hier ist mein Code:

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

Haben Sie so etwas wie dies wünschen? See this fiddle

ich Ihr Hover-Ereignis in fancybox Funktion entfernt:

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

ich dies auch in den CSS hinzufügen Positionen von fancybox zurück und neben Tasten ändern:

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