Fancybox gallery without href?

Question

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

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 (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 = '<img src="' + url + '" rel="'+ rel + '" />'; $.fancybox({ 'transitionIn' : 'elastic', 'transitionOut' : 'elastic', 'speedIn' : 600, 'speedOut' : 200, 'overlayShow' : false, 'content' : content }); }); 

Answer 1

You do not have a gallery using the manual .click() method unless you set all the gallery elements inside the fancybox script itself, for example:

 $("#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 mimic the normal fancybox gallery without using links ( <a> tags with href attributes), you will need to create your own function using your own navigation methods.

Without changing the HTML try 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> 

This creates a fancybox gallery from <img> tags, with a smoothing effect. Also, with a bit of CSS we can control the navigation with the fancybox arrow icons. See a working example here .

Since the navigation control is completely manual, you really don't need the rel attribute in the <img> .

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

Answer 2

This worked for me:

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

Answer 3

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

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

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 } } }); 

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

then

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

and then with further customization

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

Answer 5

You need to make a fancybox call on the images:

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

should work, but I have not tested it ...