How do I open fancybox via manual call for a gallery in the html not via the jquery options?

Question

I am just looking at the fancybox v2 at the moment.

I am trying to get a gallery to load with fancybox but with manual call. I dont want the gallery images to be loaded in via jquery it would be better to have them load from the html page as this is going to be added to a template for a CMS that needs to let the user add images to a gallery that will populate on every new image they upload.

Is it as simple as just adding a call in the options before it starts or in the href of the a tag for the image?

Thanks, Mark

Answer 1

Make sure that all new loaded images share the same class and rel attribute within the anchor that links to them

<a href="image01.jpg" class="fancybox" rel="gallery" ...

Those html anchors can be inside a hidden div if you want. You can check this post for reference.

Then, bind them to fancybox

$(".fancybox").fancybox();

You said you will be using a CMS so if the href format of your loaded images is something like http://path/to/image/?abc=123 (no image extension for instance) add the type:"image" option to your script

$(".fancybox").fancybox({
 type:"image"
});

If the anchors are visible, clicking on any of them will start the gallery.

On the other hand, you may use any other link to start the gallery "manually"

<a href="javascript:;" id="launcher">open gallery</a>

and add this script:

$("#launcher").on("click", function(){
 $(".fancybox").eq(0).trigger("click");
});

the .eq() method is used to start the gallery from the first item (can be any though) otherwise the gallery will start from the last appended item. Also, the .on() method requires jQuery v1.7+

Answer 2

If you want to / have to use older jQuery Versions (e.g. because of a Drupal Module) get rid of the .on() and use

< a href="javascript:;" id="launcher">LINK TO TOPEN GALLERY< /a>

and

jQuery(document).ready(function($) {
    $("#launcher").click(function() {
        $(".imagefield-fancybox").eq(0).trigger("click");
    });
});

instead.

Works also with older jQuery Versions. Replace ".imagefield-fancybox" with the class you are using.