1

Currently I use this code for apply Fancybox to a set of images not wrapped by tag <A>:

$("img[alt=lightbox]").each(function(){
   $(this).fancybox({ href : $(this).attr('src') });
});

Now I'd like to add to the same group all images added in this way.

I tried with:

$("img[alt=lightbox]").each(function(){
   $(this).attr("data-fancybox-group", "gallery");
   $(this).fancybox({ href : $(this).attr('src') });
});

Without luck, do you have any advice?

JFK
  • 40,963
  • 31
  • 133
  • 306
Fez Vrasta
  • 14,110
  • 21
  • 98
  • 160

2 Answers2

3

The answer for this question Fancybox gallery without a href? was written for fancybox v1.3.4.

The same solution would work equally for fancybox v2.x, however bear in mind that fancybox v2.x API options are new and not compatible with previous versions ... so you have actually to upgrade the API options to make it work with v2.x

Here is the v2.x update :

The basic html :

 <div id="myContainer">
  <img src="images/01t.jpg" data-href="images/01.jpg" alt=""  />
  <img src="images/02t.jpg" data-href="images/02.jpg" alt=""  />
  <img src="images/03t.jpg" data-href="images/03.jpg" alt=""  />
  <img src="images/04t.jpg" data-href="images/04.jpg" alt=""  />
  <img src="images/05t.jpg" data-href="images/05.jpg" alt=""  />
 </div>

... notice that we used the (HTML5) data-* (data-href) attribute to target the big images and let the src attribute to target the thumbnails.

Then the js : 

// the function we call when we click on each img tag
function fancyBoxMe(e) {
    var numElemets = $("#myContainer img").size();
    if ((e + 1) == numElemets) {
        nexT = 0
    } else {
        nexT = e + 1
    }
    if (e == 0) {
        preV = (numElemets - 1)
    } else {
        preV = e - 1
    }
    var tarGet = $('#myContainer img').eq(e).data('href');
    $.fancybox({
        href: tarGet,
        helpers: {
            title: {
                type: 'inside'
            }
        },
        afterLoad: function () {
            this.title = 'Image ' + (e + 1) + ' of ' + numElemets + ' :: <a href="javascript:;" onclick="fancyBoxMe(' + preV + ')">prev</a>&nbsp;&nbsp;&nbsp;<a href="javascript:;" onclick="fancyBoxMe(' + nexT + ')">next</a>'
        }
    }); // fancybox
} // fancyBoxMe

// bind click to each img tag 
$(document).ready(function () {
    $("#myContainer img").each(function (i) {
        $(this).bind('click', function () {
            fancyBoxMe(i);
        }); //bind      
    }); //each
}); // ready

And of course, here is the DEMO

Community
  • 1
  • 1
JFK
  • 40,963
  • 31
  • 133
  • 306
  • Thank you, but this add a different navigation method using different arrows. Isn't possible do the same thing but with arrows of fancybox? – Fez Vrasta Feb 12 '13 at 10:37
  • @FezVrasta if you are a developer, I guess you won't find difficult to customize it with a bit of css – JFK Feb 12 '13 at 16:43
  • I'd like to not hack Fancybox, so I was asking you if there is a method for set manualy the "next" and "prev" links. I seen in docs that there is an option for change it (tpl) and an option for force arrows to be visible, but arrows simply doesn't become visible. – Fez Vrasta Feb 12 '13 at 16:48
  • you wouldn't be hacking fancybox, you would be adding your own css. Check the example for v1.3.4 http://stackoverflow.com/a/9244921/1055987 ... it uses the fancybox icons with a custom css – JFK Feb 12 '13 at 16:52
  • anyway, we are already hacking fancybox since it is meant to be used with anchors and not with `img` tags ... this is not an standard but a customized solution – JFK Feb 12 '13 at 16:53
1

According to fancy box:

Note - Galleries are created from elements who have the same "rel" tag, example:

Look at bottom of page here

So try setting the rel:

$("img[alt=lightbox]").each(function(){
  $(this).attr("rel", "gallery");
  $(this).fancybox({ href : $(this).attr('src') });
});
jsweazy
  • 1,623
  • 9
  • 22