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

前端 未结 2 1268
小鲜肉
小鲜肉 2020-12-04 01:15

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 loa

相关标签:
2条回答
  • 2020-12-04 01:48

    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.

    0 讨论(0)
  • 2020-12-04 01:50

    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+

    0 讨论(0)
提交回复
热议问题