bxSlider göster/gizle divs

Sayfamın içeriği bir jquery 'showonlyone' işlevini kullanarak bir defada bir div gösteren farklı bağlantılar kullanılarak değiştirilir. Sayfayı yüklemede, div'lerin hiçbiri görüntülenmemelidir. Ben iyi çalışan var, ben bir resim kaydırıcıyı (bxSlider), bir tanesini newboxes1 arasına koymaya çalışana kadar.bxSlider göster/gizle divs

Kutunun dışında, bxSlider iyi çalışıyor. İçinde resimler gösterilmez. Bkz. Canlı örnek here. Ben sayfa yüklenirken zaman öylesine div hiçbiri gösteriyoruz CSS'deki

.newboxes {display:none;}

kullanmak

<head> 

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript">           
function showonlyone(thechosenone) { 
    $('.newboxes').each(function(index) { 
      if ($(this).attr("id") == thechosenone) { 
       $(this).show(); 
      } 
      else { 
       $(this).hide(); 
      } 
    }); 
}</script> 
</script> 


<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> 
<script src="jquery.bxSlider.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 

$(function(){ 
    var slider = $('#slidersample').bxSlider({ 
    mode:'fade', 
    controls: false 
    }); 
    $('#bx-prev-sample').click(function(){ 
    slider.goToPreviousSlide(); 
    return false; 
    }); 
    $('#hover-next-g-sample').click(function(){ 
    slider.goToPreviousSlide(); 
    return false; 
    }); 
    $('#bx-next-sample').click(function(){ 
    slider.goToNextSlide(); 
    return false; 
    }); 
    $('#hover-next-d-sample').click(function(){ 
    slider.goToNextSlide(); 
    return false; 
    }); 
}); 
}); 
</script> 
</head> 


<body> 
<div id="left-menu"> 
<a id="myHeader1" href="javascript:showonlyone('newboxes1');" >LINK 1</a><br /> 
<a id="myHeader2" href="javascript:showonlyone('newboxes2');" >LINK 2</a><br /> 
<a id="myHeader3" href="javascript:showonlyone('newboxes3');" >LINK 3</a> 
</div> 

<div class="newboxes" id="newboxes1">DIV 1 
<!-- SLIDER --> 
<div id="slider" style="margin-top: 0px; width="580 px"; height="375 px"> 
<div class="bx-prev"><div id="bx-prev-sample">←</div></div> 
<div class="bx-next"><div id="bx-next-sample">→</div></div> 
<div class= "hover-next-g"><div id="hover-next-g-sample" style="height:100%; width:100%"></div></div> 
<div class= "hover-next-d"><div id="hover-next-d-sample" style="height:100%; width:100%"></div></div> 
<ul id="slidersample" width="580px" height="375 px" style="margin:0px ; padding:0px"> 
    <li><img src="images/1.jpg" width="580" height="375" /></li> 
    <li><img src="images/2.jpg" width="580" height="375" /></li> 
    <li><img src="images/3.jpg" width="580" height="375" /></li> 
</ul> 
</div> 
<!-- SLIDER END--> 
</div> 

<div class="newboxes" id="newboxes2">DIV 2<br /></div> 

<div class="newboxes" id="newboxes3">DIV 3</div> 

</body> 
</html>

: gibi

İşte benim kod görünüyor budur. Bunu CSS'den kaldırmak, here'u gördüğünüz gibi bxSlider sorununu çözer. Ancak, tüm sayfaların gizlenmesini istediğimde içerik sayfa yüklendiğinde gösterilir. Kodun başka bir yerinde display:block veya display:none kullanma denemesi başarısız oldu.

Bunu düzeltmenin bir yolu düşünen var mı? Teşekkür ederim.

kaynak

2012-06-17 user1461763

Bu soruyu bir süre önce sordum ama aynı sorunu yaşıyorum. BxSlider ve ekran ile ilgili hiçbir fikrim yok: yok. Ekranın hiçbiri için ayarlanmamış bir div içinde bulunması, içeriği okumaz gibi görünmüyor.

Bunun yerine, ekran yerine visibility:hidden ve visibility:visible geçişleri yaptık.

kaynak

2012-08-17 15:58:29 unsunghero

Bu harika bir çözümdü. Fikir için teşekkürler! –

bxSlider eklentisi ile benzer bir sorun yaşadım: içerdiği DIV başlangıçta display:none gizlendiğinde, DIV görünür $('#div-id').show(); görüntülendiğinde slayt gösterisi görünmezdi. Sadece slayt gösterisi kontrol düğmeleri belirdi.

<script> 

var mySlider; 

$(function() { 

    mySlider = $('#slider').bxSlider({ 
      easing: 'easeInCubic', 
      displaySlideQty: 3, 
      moveSlideQty: 1, 
      infiniteLoop: false, 
      hideControlOnEnd: true 
    }); 

    $("#processSignUp").click(function() { // button that sets the DIV visible 
     $("#trainings-slide").show();  // DIV that contain SLIDER 
     mySlider.reloadSlider();  // Reloads the slideshow (bxSlider API function) 
    }); 

}); 

</script>

ben sadece DIV (kaydırma çubuğunu içeren) göstermiştir sonra slayt yeniden ve mükemmel çalıştı görebileceğiniz gibi: Sonra böyle sorunu çözdü. Belki bu sizin problemlerinizi çözmenize ve görünürlüğü kullanmaktan kaçınmanıza yardımcı olabilir: gizli ve diğer hileler.

kaynak

2012-09-04 07:55:13 sh0ne

Harika cevap - en son BX sürgü versiyonunun işlevinin reloadSlider olduğunu unutmayın() reloadShow() – rentageekmom

Eğer mySlider için bir işaretçimiz yoksa? veya tüm slaytları css sınıfıyla yeniden yüklemek istersem? $ ('. bxslider'). reloadSlider() çalışmıyor benim için –

çalışmıyor: Uncaught TypeError: slider.reloadSlider bir işlev değil –

Görünürlüğü kullanabilirsiniz: gizlilik ve görünürlük: görünür, ancak bazı sıkıntılar olacaktır. Ve yüksekliği kullanabilirsiniz: 0px; taşma: gizli; Son çözümü kullanıyorum

kaynak

2014-04-10 14:00:33 user3519817

Başka bir çözüm, bxslider'ın yüklenmesine izin vermek, sonra sahip olduktan sonra gizlemek olacaktır.

<script> 
    var mySlider; 

    $(function() { 
     mySlider = $('#slider').bxSlider({ 
      easing: 'easeInCubic', 
      displaySlideQty: 3, 
      moveSlideQty: 1, 
      infiniteLoop: false, 
      hideControlOnEnd: true, 
      onSliderLoad: function() { 
       $('#trainings-slide').hide(); 
      } 
     }); 
    }); 
</script>

kaynak

2014-06-24 17:57:20 eightdotthree

bu benim için çalışmıyor, aynı şey oluyor. –

Bu benim için en iyisi – tosin

bxSlider göster/gizle divs

cevap

İlgili konular