Fancybox gallery without a href?

问题:

I want to make fancybox gallery with img without using links (a href)? How i can do that?

HTML:

          ..... 
 

JS (now it works with single images, without gallery effect):

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

回答1:

You cannot have a gallery using the manual method .click() unless you set all the elements of the gallery inside the fancybox script itself like:

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

However, to make it work the way you want and simulate a regular fancybox gallery without using links ( tags with a href attributes ), you would need to create your own function with your own custom navigation methods.

Without changing your HTML, try this JS:

That creates a fancybox gallery from the tags, with a nice cycling effect. Also, with a little of CSS we can have the navigation controls using the fancybox arrow icons. See a working example here.

Since the navigation control is totally manual, you don't actually need the rel attribute on the tag.

Please notice that the code above is for Fancybox v1.3.x (I assumed you are using v1.3.x because the API options).

回答2:

This worked for me:

$(".CLASSNAME").each(function(){     $(this).fancybox({         href : $(this).attr('src')     });   }); 

回答3:

the easy way, you can add anchor/a tag in each img from id='foo2'.

$('#foo2 img').each(function (){  var currentImage = $(this);   currentImage.wrap(""); }); 

And then:

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

回答4:

$(document).ready(function(){      $(".fancy").each(function () {         $(this).replaceWith(''+$(this)[0].outerHTML +'');     }).promise().done(function(){ $('.fancybox').fancybox(); });  }); 

then:

and then with further customization

回答5:

You need to do the fancybox call on the images:

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

should work but i haven't tested it...

文章来源: Fancybox gallery without a href?