Question

我想在不使用链接（一个href）的情况下使用img制作fancybox图库？我怎么能这样做？

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

除非您在fancybox脚本本身内设置图库的所有元素，否则您无法使用手动方法.click()创建图库：

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

由于导航控件完全是手动的，因此您实际上并不需要rel标记上的<img>属性。

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

Answer 2

这对我有用：

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

   $(this).fancybox({

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

   });


});

Answer 3

$(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 4

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

<div class="mytabs">
    <ul class="nav-tabs" style="width: 900px; background-color: gray;" >
        <li ng-class="{'active': activeTab === tab.title}"
            ng-repeat="tab in tabs">
            <a  ng-click="onSelectTab(tab.title)">{{tab.title}}</a>
            <span ng-show="tab.isClosable" ng-click="onClose(tab.title)">
                   <i class="left fa fa-times-circle closeButton" ></i>
            </span>
        </li>
        <li class="bd-bottom clearfix"></li>
    </ul>
    <div class="row mytabs">
        <div class="col-lg-12 col-md-12 col-sm-12 tab-content">
            <div ng-transclude class="mytabs"></div>
        </div>
    </div>
</div>

然后：

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

Answer 5

你需要对图像进行fancybox调用：

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

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

没有href的Fancybox画廊？

5 个答案: