Fancybox画廊没有href？

我想用img制作fancybox图库而不使用链接（a href）？我该怎么做？Fancybox画廊没有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 
     }); 
    });

来源

2012-02-11 skywind

你不能有一个画廊使用手动方法.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选项）。

来源

2012-02-11 23:18:44 JFK

-1

你需要做的图像的fancybox电话：

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

应该可以工作但我还没有测试过...

来源

2012-02-11 13:33:15 scott

无法正常工作（A HREF -needed。 – skywind 2012-02-11 22:24:50

这为我工作：

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

    $(this).fancybox({ 

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

    }); 


});

来源

2012-06-07 14:18:02 RudyRyu

$(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="" />

来源

2014-09-18 08:44:16

简单的方法，你可以添加锚/ 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 
     } 
    } 
});

来源

2015-12-23 08:47:26

Fancybox画廊没有href？

回答

相关问题