Jquery 没有a href的Fancybox图库？

我想用img制作fancybox图库而不使用链接（a href）？我怎么能做到

HTML:

.....

JS（现在它可以处理单个图像，没有画廊效果）：

$（“#foo2 img”）。单击（函数（e）{
var url=$（this.attr（'src'）；
var rel=$（this.attr（'rel'）；
var内容=“”；
$.fancybox({
“transitionIn”：“弹性”，
“transitionOut”：“弹性”，
“speedIn”：600，
“加速输出”：200，
“叠加显示”：错误，
“内容”：内容
});
});

您需要对图像执行fancybox调用：

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

---

应该可以工作，但我还没有测试它…

您不能使用手动方法创建图库。单击（），除非您在fancybox脚本中设置图库的所有元素，如：

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

但是，要使其按您想要的方式工作，并模拟常规的fancybox库，而无需使用链接（

”；
}
}); // 幻想箱
}//fancyBoxMe
$（文档）.ready（函数（）{
$（“#foo2 img”）。每个（功能（i）{
$（this）.bind（'click'，function（）{
fancyBoxMe（i）；
})；//绑定
})；//每个
}); // 准备好的

这将从

标记创建一个fancybox库，具有良好的循环效果。另外，通过一点CSS，我们可以使用fancybox箭头图标来进行导航控制

由于导航控件完全是手动的，因此实际上不需要

标记上的

rel

属性

请注意上面的代码是针对Fancybox v1.3.x的（我假设您使用的是v1.3.x，因为API选项）。

这对我有用：

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

   $(this).fancybox({

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

   });


});

$（文档）.ready（函数（）{
$（“.fancy”）。每个（函数（）{
$（此）。替换为（“”）；
}).promise（）.done（函数（）{$（'.fancybox'）.fancybox（）；}）；
});

然后：

然后进行进一步的定制

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

---

简单的方法是，您可以从id='foo2'在每个img中添加锚定/标记

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

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

   $(this).fancybox({

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

   });


});

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

$('#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
        }
    }
});