Откройте fancybox из функции

Question

Я пытаюсь открыть необычную коробку из имеющейся у меня функции - короче, мой HTML-код выглядит так;

<a href="#modalMine" onclick="myfunction(this); return false;">
  click
</a>

и часть моей функции выглядит так;

function myfunction(me) {
    $(me).fancybox({
        'autoScale': true,
        'transitionIn': 'elastic',
        'transitionOut': 'elastic',
        'speedIn': 500,
        'speedOut': 300,
        'autoDimensions': true,
        'centerOnScroll': true,
    });
}

Вышеописанное работает в IE, но не в FireFox или Chrome - есть идеи, как это исправить? Я знаю, что по одной причине активировать другую ссылку, но я надеюсь, что другое решение возможно.

Answer 1

Если вы хотите просто открыть fancybox, когда вызывается функция javascript.Возможно, в вашем потоке кода, а не в результате клика.Вот как вы это делаете:

function openFancybox() {
  $.fancybox({
     'autoScale': true,
     'transitionIn': 'elastic',
     'transitionOut': 'elastic',
     'speedIn': 500,
     'speedOut': 300,
     'autoDimensions': true,
     'centerOnScroll': true,
     'href' : '#contentdiv'
  });
}

Это создает поле с помощью «contentdiv» и открывает его.

Answer 2

Поскольку вы используете jQuery, прекратите привязывать обработчики событий в своем HTML и начните писать ненавязчивый JavaScript.

$(document).ready(function ()
{
    function myfunction(me)
    {
        $(me).fancybox({
            'autoScale': true,
            'transitionIn': 'elastic',
            'transitionOut': 'elastic',
            'speedIn': 500,
            'speedOut': 300,
            'autoDimensions': true,
            'centerOnScroll': true // remove the trailing comma!!
        }).click();
        // fire the click event after initializing fancybox on this element
        // this should open the fancybox
    }

    // use .one() so that the handler is executed at most once per element
    $('a[href=#modalMine]').one('click', function ()
    {
        myfunction(this);
        return false;
    });
});

Однако я не вижу особой причины для настройки fancybox при нажатии. Вы можете просто сделать это вместо:

$(document).ready(function ()
{
    function myfunction()
    {
        // note the use of "this" rather than a function argument
        $(this).fancybox({
            'autoScale': true,
            'transitionIn': 'elastic',
            'transitionOut': 'elastic',
            'speedIn': 500,
            'speedOut': 300,
            'autoDimensions': true,
            'centerOnScroll': true
        });
    }

    $('a[href=#modalMine]').each(myfunction);
});

Базовая демонстрация (без изображений) & # x2192;

Answer 3

Что вам нужно:

$.fancybox.open({ .... });

См. Раздел «Методы API» внизу здесь:

http://fancyapps.com/fancybox/

Answer 4

Вам совсем не нужно добавлять свой собственный обработчик событий click. Просто инициализируйте элемент с помощью fancybox:

$(function() {
    $('a[href="#modalMine"]').fancybox({
        'autoScale': true,
        'transitionIn': 'elastic',
        'transitionOut': 'elastic',
        'speedIn': 500,
        'speedOut': 300,
        'autoDimensions': true,
        'centerOnScroll': true  // as MattBall already said, remove the comma
    });
});

Готово. Fancybox уже связывает обработчик click, который открывает окно. Взгляните на раздел HowTo.

---

Позже, если вы хотите открыть окно программным способом, вызовите событие click для этого элемента:

$('a[href="#modalMine"]').click();

Answer 5

Вам не нужно инициировать событие щелчка, вы можете сделать это с типом fancybox как ajax.

$.fancybox.open({
      href: "http://........",
      type: 'ajax'
});

Answer 6

Сделать аргумент объекта расширяется от <a>, и используйте open функцию fancybox в событии клика через делегата.

    var paramsFancy={
         'autoScale': true,
         'transitionIn': 'elastic',
         'transitionOut': 'elastic',
         'speedIn': 500,
         'speedOut': 300,
         'autoDimensions': true,
         'centerOnScroll': true,
         'href' : '#contentdiv'
      };

    $(document).delegate('a[href=#modalMine]','click',function(){
               /*Now you can call your function ,
   you can change fields of paramsFancy via this function */
                 myfunction(this);

                paramsFancy.href=$(this).attr('href');
                $.fancybox.open(paramsFancy);

    });

Answer 7

function myfunction(){
    $('.classname').fancybox().trigger('click'); 
}

У меня работает ..

Answer 8

Вот рабочий код в соответствии с авторским Tips & Tricks сообщением в блоге, поместите его в готовый документ:

  $("#mybutton").click(function(){
    $(".fancybox").trigger('click');  
  })

Это запускает уменьшенную версию отображаемого в данный момент изображения или содержимого, как если бы вы щелкнули по нему вручную. Он избегает повторной инициализации Fancybox, но вместо этого сохраняет параметры, с которыми вы его инициализировали, в документе готовым. Если вам нужно сделать что-то другое при открытии окна с отдельной кнопкой по сравнению с нажатием на поле, вам понадобятся параметры, но для многих это будет то, что они искали.

Answer 9

Ответы немного сложнее. Надеюсь, я не неправильно понял вопрос.

Если вы просто хотите открыть необычную коробку от клика до метки «А». Просто установите html на

<a id="my_fancybox" href="#contentdiv">click me</a>

Содержимое вашего ящика будет внутри div с id "contentdiv", и в вашем javascript вы можете инициализировать fancybox следующим образом:

$('#my_fancybox').fancybox({
    'autoScale': true,
    'transitionIn': 'elastic',
    'transitionOut': 'elastic',
    'speedIn': 500,
    'speedOut': 300,
    'autoDimensions': true,
    'centerOnScroll': true,
});

При нажатии на тэг привязки будет отображаться окно с содержимым contentdiv.

Answer 10

...
<div class="img_file" style="background-image: url('/upload/test/14120330.jpg')" data-img="/upload/test/14120330.jpg"></div>
<div class="img_file" style="background-image: url('/upload/test/14120330.jpg')" data-img="/upload/test/14120330.jpg"></div>
...
if($(".img_file[data-img]").length) {
                var imgs_slider_img = [];
                $(".img_file[data-img]").each(function(i) {
                    imgs_slider_img.push({
                        href:$(this).attr('data-img')
                    });
                    $(this).attr('data-index-img', i);
                }).on("click", function(e) {
                    e.preventDefault();
                    $.fancybox.open(imgs_slider_img, {
                         index: $(this).attr('data-index-img'),
                         padding: 0,
                         margin: 0,
                         prevEffect: 'elastic',
                         nextEffect: 'elastic',
                         maxWidth: '90%',
                         maxHeight: '90%',
                         autoWidth: true,
                         autoHeight: true
                    });
                });
            }
...