Fancybox gallery without a href?

Question

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

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

score 11 · Accepted Answer · answered Feb 11 '12 at 23:18

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 (<a> 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:

<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>

That creates a fancybox gallery from the <img> 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 <img> 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).

score 9 · Answer 2 · edited Jun 07 '12 at 14:41

9

This worked for me:

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

   $(this).fancybox({

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

   });


});

edited Jun 07 '12 at 14:41

Josh Darnell

11,304
9
38
66

answered Jun 07 '12 at 14:18

RudyRyu

91
1
1

score 3 · Answer 3 · answered Sep 18 '14 at 08:44

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

score 2 · Answer 4 · answered Dec 23 '15 at 08:47

the easy way, you can add 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
        }
    }
});

score 0 · Answer 5 · answered Aug 19 '21 at 13:59

Just wrap the clicked image inside a href and than trigger the fancybox to show the image.

 $(document).on('click tap', 'img.fancybox', function(e)
 {
     // Already wrapped a fancybox href around the clicked image
     if ($(this).parent().is('a')) {
         return false;
     }

    $(this)
    .wrap('<a href="' + this.src + '" class="fancybox" data-fancybox-group="gallery" title="' + this.alt + '" />')
    .parent()
    .fancybox({})
    .trigger('click');
});

score 0 · Answer 6 · answered Feb 11 '12 at 13:33

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?

6 Answers6

Linked