hover ses çalma ve başlığı kaldırma

Question

Resim başlığı ve ışık kutusu görünümünde ses ile bir galeri görüntülemek için bir fantezi kodu yazdım. ancak başlık ve ses sadece ışık kutusu görüntüsünü tuttuğumuzda görüntülenecektir. İkisinin de (başlık ve ses) normal olarak gösterilmesini istiyorum.

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

böyle bir şey istiyor musunuz: İşte benim kodudur?

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

:

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

Ben de fancybox prev ve sonraki düğmenin konumunu değiştirmek için CSS'deki bu ekleyin:

See this fiddle ben fancybox fonksiyonunda da vurgulu olay kaldırıldı