Fancybox畫廊沒有href？

Question

我想用img製作fancybox圖庫而不使用鏈接（a href）？我該怎麼做？

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（現在的作品與單個圖像，沒有畫廊效果）：

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

你不能有一個畫廊使用手動方法.click()除非你設置的fancybox腳本內部畫廊的所有元素，如：

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

然而，使其工作您想要的方式和模擬常規的fancybox不使用鏈接的圖庫（<a>標籤具有href屬性），您需要使用自己的自定義導航方法創建自己的功能。

不改變你的HTML，試試這個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> 

這造成從<img>標籤一個的fancybox的畫廊，一個漂亮的循環效應。另外，有一點CSS，我們可以使用fancybox箭頭圖標的導航控件。 See a working example here。

由於導航控件完全是手動操作，因此<img>標籤上實際上不需要rel屬性。

請注意上面的代碼是爲Fancybox v1.3.x（我認爲你使用v1.3.x是因爲API選項）。

Answer 2

你需要做的圖像的fancybox電話：

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

應該可以工作但我還沒有測試過...

Answer 3

這爲我工作：

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

}); 

則：

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

，然後進一步定製

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

Answer 5

簡單的方法，你可以添加錨/ A在每個img中從id ='foo2'標記。

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

然後：

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