Thư viện hộp thư đến mà không có a href?

Question

Tôi muốn tạo thư viện fancybox với img mà không cần sử dụng liên kết (a href)? Làm thế nào tôi có thể làm điều đó?

HTML:

<div id="foo2"> 
     <img src="/images/banners/001.jpg" rel="downslider" alt="" width="80" height="80" /> 
     <img src="/images/banners/002.jpg" rel="downslider" alt="" width="80" height="80" /> 
     <img src="/images/banners/003.jpg" rel="downslider" alt="" width="80" height="80" /> 
     <img src="/images/banners/004.jpg" rel="downslider" alt="" width="80" height="80" /> 
     <img src="/images/banners/005.jpg" rel="downslider" alt="" width="80" height="80" /> 
     <img src="/images/banners/006.jpg" rel="downslider" alt="" width="80" height="80" /> 
     <img src="/images/banners/007.jpg" rel="downslider" alt="" width="80" height="80" /> 
     <img src="/images/banners/008.jpg" rel="downslider" alt="" width="80" height="80" /> 
..... 
</div> 

JS (bây giờ nó làm việc với hình ảnh duy nhất, mà không ảnh hưởng bộ sưu tập):

$("#foo2 img").click(function(e) { 
     var url = $(this).attr('src'); 
     var rel = $(this).attr('rel'); 
     var content = '<img src="' + url + '" rel="'+ rel + '" />'; 
     $.fancybox({ 
      'transitionIn' : 'elastic', 
      'transitionOut' : 'elastic', 
      'speedIn'  : 600, 
      'speedOut'  : 200, 
      'overlayShow' : false, 
      'content' : content 
     }); 
    }); 

Answer 1

Bạn không thể có một bộ sưu tập bằng cách sử dụng phương pháp thủ công .click() trừ khi bạn đặt tất cả các yếu tố của phòng trưng bày bên trong kịch bản Fancybox thân thích:

$("#foo2 img").click(function(e) { 
$.fancybox([ 
    'images/01.jpg', 
    'images/02.jpg', // etc 
    ],{ 
    // fancybox options 
    'type': 'image' // etc. 
}); // fancybox 
}); // click 

Tuy nhiên, để làm cho nó làm việc theo cách bạn muốn và mô phỏng một Fancybox thường xuyên bộ sưu tập mà không sử dụng liên kết (<a> thẻ có thuộc tính href), bạn sẽ cần tạo hàm của riêng mình bằng các phương thức điều hướng tùy chỉnh của riêng bạn.

Nếu không có thay đổi HTML của bạn, hãy thử này JS:

<script type="text/javascript"> 
function fancyBoxMe(index){ 
var gallerySize = $("#foo2 img").size(); 
if((index+1) == gallerySize){ nexT = 0 } else { nexT = index+1} 
if(index == 0){ preV = (gallerySize-1) } else { preV = index-1} 
var tarGet = $('#foo2 img').eq(index).attr('src'); 
$.fancybox({ 
    'transitionIn' : 'elastic', 
    'transitionOut' : 'elastic', 
    'speedIn' : 600, 
    'speedOut' : 200, 
    'overlayShow' : false, 
    'href': tarGet, 
    'titlePosition': 'inside', 
    'titleFormat' : function(){ 
    return 'Image '+(index+1)+' of '+gallerySize+'<a id="preV" href="javascript:;" onclick="fancyBoxMe('+preV+')">prev</a> <a id="nexT" href="javascript:;" onclick="fancyBoxMe('+nexT+')">next</a>'; 
    } 
}); // fancybox 
} // fancyBoxMe 
$(document).ready(function() { 
$("#foo2 img").each(function(i){ 
    $(this).bind('click', function(){ 
    fancyBoxMe(i); 
    }); //bind   
}); //each 
}); // ready 
</script> 

Điều đó tạo ra một bộ sưu tập Fancybox từ <img> thẻ, với một hiệu ứng đi xe đạp tốt đẹp. Ngoài ra, với một chút của CSS chúng tôi có thể có các điều khiển điều hướng bằng cách sử dụng các biểu tượng mũi tên fancybox. See a working example here.

Vì điều khiển điều hướng hoàn toàn thủ công, bạn không thực sự cần thuộc tính rel trên thẻ <img>.

Vui lòng lưu ý rằng mã ở trên dành cho Fancybox v1.3.x (Tôi giả sử bạn đang sử dụng v1.3.x vì tùy chọn API).

Answer 2

Bạn cần phải làm các cuộc gọi Fancybox trên hình ảnh:

$('#foo2 img').fancybox({ 
    'transitionIn' : 'elastic', 
    'transitionOut' : 'elastic', 
    'speedIn'  : 600, 
    'speedOut'  : 200, 
    'overlayShow' : false 
}); 

sẽ hoạt động nhưng tôi chưa thử nghiệm ...

Answer 3

này đã làm việc cho tôi:

$(".CLASSNAME").each(function(){ 

    $(this).fancybox({ 

     href : $(this).attr('src') 

    }); 


}); 

Answer 4

$(document).ready(function(){ 

    $(".fancy").each(function() { 
     $(this).replaceWith('<a class="fancybox" href="'+$(this).attr('src')+'">'+$(this)[0].outerHTML +'</a>'); 
    }).promise().done(function(){ $('.fancybox').fancybox(); }); 

}); 

thì:

<img class="fancy" src="1.jpg" alt="" /> 
<img class="fancy" src="2.jpg" alt="" /> 

và sau đó với tuỳ biến hơn nữa

<img class="fancy" src="2.jpg" data-small-image="small2.jpg" alt="" /> 

Answer 5

một cách dễ dàng, bạn có thể thêm anchor/A trong mỗi img từ id = 'foo2'.

$('#foo2 img').each(function(){ 
var currentImage = $(this); 
currentImage.wrap("<a class='fancybox' href='" + currentImage.attr("src") + "'</a>"); }); 

Và sau đó:

$(".fancybox").fancybox({ 
    openEffect : 'none', 
    closeEffect : 'none', 
    beforeShow : function() { 
    this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + ' '+(this.title ? '' + this.title + '' : ''); 
    }, 
    helpers : { 
     thumbs : { 
      width : 50, 
      height : 50 
     } 
    } 
});