2012-02-24 17 views
5

Oldukça benzersiz bir durum var. Benim senaryo: galeri + 1 orta resim (ilk küçük resim ile aynı kaynağa işaret eden) bağlayan 4 küçük resimler. Aynı galeriyi ortadaki resme tıklayarak açmak istiyorum, fakat onları "rel" özelliği ile bağladığımda, ilk resimde iki kez (döngüdeki 5 büyük resim) ilkin var. Dış linkte belirtilen fancybox galerisini çağırmanın bir yolu var mı? Bu şekilde orta görüntüde tıklama fonksiyonunu tetikleyebilirim ve hala döngüde sadece 4 büyük resmim var. Lütfen yardım edin, bunun için çözüm bulamıyorum. Burada GÜNCELLEMEDiğer bağlantı ile aranan fancybox galeri

benim html I "orta" resmin üzerine tıklayarak "ayrıntılar" galeriyi tetiklemek istiyorum

<div class="details_gallery"> 
<a href="max/1.jpg" class="fancybox"><img src="mid/1.jpg" /></a> 
<div class="details_gallery_min"> 
    <a rel="details" href="max/1.jpg" class="fancybox"><img src="min/1.jpg" alt="" /></a> 
    <a rel="details" href="max/2.jpg" class="fancybox"><img src="min/2.jpg" alt="" /></a> 
    <a rel="details" href="max/3.jpg" class="fancybox"><img src="min/3.jpg" alt="" /></a> 
    <a rel="details" href="max/4.jpg" class="fancybox"><img src="min/4.jpg" alt="" /></a> 
</div> 
</div> 

... olduğunu

cevap

13

Ben ne yapardım Galerinin bir parçası olmaksızın "orta" görselinin bağlantısını değiştirmek için:

<a href="max/1.jpg" onclick="$('a.fancybox').eq(0).trigger('click'); return false;"><img src="mid/1.jpg" alt="mid image" /></a> 

.eq() yöntemi, galerinin ilk görüntüden başlamasını sağlar, aksi takdirde, fantastiğe bağlı son öğeden başlar. Ancak galerinin başka bir elemanından başlamayı belirtebilirsiniz.

+0

Bu tam olarak ihtiyacım olan şey! teşekkür ederim! – lokers

+0

lütfen bunu doğru cevap olarak işaretlemeyi unutmayın, teşekkürler;) – JFK

+0

done:) teşekkürler! – lokers

5
<div class="details_gallery"> 
<a href="#" class="manualfancybox">Manual Call Fancybox</a> 
<div class="details_gallery_min"> 
    <a rel="details" href="max/1.jpg" class="fancybox"><img src="min/1.jpg" alt="" /></a> 
    <a rel="details" href="max/2.jpg" class="fancybox"><img src="min/2.jpg" alt="" /></a> 
    <a rel="details" href="max/3.jpg" class="fancybox"><img src="min/3.jpg" alt="" /></a> 
    <a rel="details" href="max/4.jpg" class="fancybox"><img src="min/4.jpg" alt="" /></a> 
</div> 
</div> 

<script> 

$(document).ready(function(){ 
    $(".manualfancybox").click(function() { 
     var photos = new Array(); 

     $(".details_gallery_min a").each(function(){ 

      href = $(this).attr("href"); 
      title = $(this).attr("title"); 
      photos.push({'href': href, 'title': title})   

     }); 

     jQuery.fancybox(photos , 
      { 'transitionIn' : 'elastic', 
       'easingIn' : 'easeOutBack', 
       'transitionOut' : 'elastic', 
       'easingOut' : 'easeInBack', 
       'opacity' : false, 
       'titleShow' : true, 
       'titlePosition' : 'over', 
       'type'    : 'image',   
       'titleFromAlt' : true 
      } 
     ); 
    }); 
}); 

</script>